From edd36398fd4162261f00176e13647204b1fff58b Mon Sep 17 00:00:00 2001 From: Albert Trott Date: Sun, 9 Feb 2025 15:56:38 +0100 Subject: [PATCH 1/5] refactor(core): refactor sections --- src/pages/home/Home.styled.ts | 22 ---------------- .../BaseLayoutElement/BaseLayoutElement.tsx | 15 +++++++++++ .../home/sections/BaseSection/BaseSection.tsx | 25 +++++++++++++++++++ .../home/sections/Callstack/Callstack.tsx | 7 +++--- .../sections/Configurator/Configurator.tsx | 2 +- src/pages/home/sections/Console/Console.tsx | 7 +++--- .../home/sections/EventLoop/EventLoop.tsx | 2 +- .../MicroTasksQueue/MicroTasksQueue.tsx | 7 +++--- .../RequestAnimationFrameQueue.tsx | 10 +++++--- .../home/sections/TasksQueue/TasksQueue.tsx | 7 +++--- .../home/sections/WebApiQueue/WebApiQueue.tsx | 7 +++--- 11 files changed, 63 insertions(+), 48 deletions(-) create mode 100644 src/pages/home/sections/BaseLayoutElement/BaseLayoutElement.tsx create mode 100644 src/pages/home/sections/BaseSection/BaseSection.tsx diff --git a/src/pages/home/Home.styled.ts b/src/pages/home/Home.styled.ts index f4fa242..dc7e53e 100644 --- a/src/pages/home/Home.styled.ts +++ b/src/pages/home/Home.styled.ts @@ -58,28 +58,6 @@ export const NarrowColumn = styled.div( ` ); -export const BaseLayoutElement = styled.div( - ({ theme: { custom } }) => css` - border: 1px solid ${custom.sys.colors.border}; - background: ${custom.sys.colors.container}; - transition: - background-color ${custom.sys.transitions.color}, - border-color ${custom.sys.transitions.color}; - margin: 0; - padding: 10px; - border-radius: 8px; - ` -); - -export const List = styled(BaseLayoutElement)` - display: flex; - flex-direction: column; - padding: 10px; - gap: 20px; - overflow: auto; - position: relative; -`; - export const sharedComponentStyles = ({ theme }: { theme: Theme }) => css` min-height: 10vh; @media (min-width: ${theme.custom.sys.breakpoints.desktop}px) { diff --git a/src/pages/home/sections/BaseLayoutElement/BaseLayoutElement.tsx b/src/pages/home/sections/BaseLayoutElement/BaseLayoutElement.tsx new file mode 100644 index 0000000..047d853 --- /dev/null +++ b/src/pages/home/sections/BaseLayoutElement/BaseLayoutElement.tsx @@ -0,0 +1,15 @@ +import styled from '@emotion/styled'; +import { css } from '@emotion/react'; + +export const BaseLayoutElement = styled.div( + ({ theme: { custom } }) => css` + border: 1px solid ${custom.sys.colors.border}; + background: ${custom.sys.colors.container}; + transition: + background-color ${custom.sys.transitions.color}, + border-color ${custom.sys.transitions.color}; + margin: 0; + padding: 10px; + border-radius: 8px; + ` +); diff --git a/src/pages/home/sections/BaseSection/BaseSection.tsx b/src/pages/home/sections/BaseSection/BaseSection.tsx new file mode 100644 index 0000000..e80ba9d --- /dev/null +++ b/src/pages/home/sections/BaseSection/BaseSection.tsx @@ -0,0 +1,25 @@ +import { PropsWithChildren } from 'react'; +import styled from '@emotion/styled'; +import { BaseLayoutElement } from '../BaseLayoutElement/BaseLayoutElement.tsx'; + +export const Section = styled(BaseLayoutElement)` + display: flex; + flex-direction: column; + padding: 10px; + gap: 20px; + overflow: auto; + position: relative; +`; + +export function BaseSection({ + title, + children, + className, +}: PropsWithChildren<{ title: string; className?: string }>) { + return ( +
+ {title} + {children} +
+ ); +} diff --git a/src/pages/home/sections/Callstack/Callstack.tsx b/src/pages/home/sections/Callstack/Callstack.tsx index 79a95f4..9ef4bc6 100644 --- a/src/pages/home/sections/Callstack/Callstack.tsx +++ b/src/pages/home/sections/Callstack/Callstack.tsx @@ -1,10 +1,10 @@ import * as Styled from './Callstack.styled.ts'; import useBoolean from 'utils/hooks/useBoolean.ts'; -import { List } from '../../Home.styled.ts'; import CallStackModal from './Callstack.modal.tsx'; import { useQueueManagerStore } from 'store/store.ts'; import { Icon } from 'components/Icon/Icon.tsx'; import { useTheme } from '@emotion/react'; +import { BaseSection } from 'pages/home/sections/BaseSection/BaseSection.tsx'; function CallStack({ className }: { className?: string }) { const tasks = useQueueManagerStore((state) => state.callstack); @@ -12,8 +12,7 @@ function CallStack({ className }: { className?: string }) { const theme = useTheme(); return ( - - CallStack + @@ -23,7 +22,7 @@ function CallStack({ className }: { className?: string }) { ))} - + ); } diff --git a/src/pages/home/sections/Configurator/Configurator.tsx b/src/pages/home/sections/Configurator/Configurator.tsx index f7f51a2..7183783 100644 --- a/src/pages/home/sections/Configurator/Configurator.tsx +++ b/src/pages/home/sections/Configurator/Configurator.tsx @@ -1,9 +1,9 @@ import * as Styled from './Configurator.styled.ts'; -import { BaseLayoutElement } from '../../Home.styled.ts'; import Controls from './Controls/Controls.tsx'; import Editor from './Editor/Editor.tsx'; import { codeExamples } from './Configurator.data.tsx'; import { useState } from 'react'; +import { BaseLayoutElement } from '../BaseLayoutElement/BaseLayoutElement.tsx'; export default function Configurator({ className }: { className?: string }) { const [text, setText] = useState(codeExamples[3].code); diff --git a/src/pages/home/sections/Console/Console.tsx b/src/pages/home/sections/Console/Console.tsx index 64a0ceb..e55ab0a 100644 --- a/src/pages/home/sections/Console/Console.tsx +++ b/src/pages/home/sections/Console/Console.tsx @@ -1,19 +1,18 @@ import { useQueueManagerStore } from 'store/store.ts'; import * as Styled from './Console.styled.ts'; -import { List } from '../../Home.styled.ts'; +import { BaseSection } from 'pages/home/sections/BaseSection/BaseSection.tsx'; function Console({ className }: { className?: string }) { const tasks = useQueueManagerStore((state) => state.console); return ( - - Console + {tasks.map((log, i) => ( {log} ))} - + ); } diff --git a/src/pages/home/sections/EventLoop/EventLoop.tsx b/src/pages/home/sections/EventLoop/EventLoop.tsx index d6993b7..7c42328 100644 --- a/src/pages/home/sections/EventLoop/EventLoop.tsx +++ b/src/pages/home/sections/EventLoop/EventLoop.tsx @@ -1,11 +1,11 @@ import * as Styled from './EventLoop.styled.ts'; import useBoolean from 'utils/hooks/useBoolean.ts'; -import { BaseLayoutElement } from 'pages/home/Home.styled.ts'; import { EVENT_LOOP_ID } from 'utils/constants.ts'; import EventLoopModal from './EventLoop.modal.tsx'; import Wheel from 'pages/home/sections/EventLoop/Wheel/Wheel.tsx'; import { Icon } from 'components/Icon/Icon.tsx'; import { useTheme } from '@emotion/react'; +import { BaseLayoutElement } from '../BaseLayoutElement/BaseLayoutElement.tsx'; function EventLoop({ className }: { className?: string }) { const [isOpened, toggle] = useBoolean(false); diff --git a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.tsx b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.tsx index a5b012a..9b3f244 100644 --- a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.tsx +++ b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.tsx @@ -1,10 +1,10 @@ import { useQueueManagerStore } from 'store/store.ts'; import * as Styled from './MicroTasksQueue.styled.ts'; import useBoolean from 'utils/hooks/useBoolean.ts'; -import { List } from '../../Home.styled.ts'; import MicroTasksQueueModal from './MicroTasksQueue.modal.tsx'; import { Icon } from 'components/Icon/Icon.tsx'; import { useTheme } from '@emotion/react'; +import { BaseSection } from '../BaseSection/BaseSection.tsx'; function MicroTasksQueue({ className }: { className?: string }) { const tasks = useQueueManagerStore((state) => state.microtask); @@ -12,8 +12,7 @@ function MicroTasksQueue({ className }: { className?: string }) { const theme = useTheme(); return ( - - Microtasks Queue + @@ -23,7 +22,7 @@ function MicroTasksQueue({ className }: { className?: string }) { ))} - + ); } diff --git a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.tsx b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.tsx index 06fadd3..a9416b6 100644 --- a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.tsx +++ b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.tsx @@ -1,10 +1,10 @@ import * as Styled from './RequestAnimationFrameQueue.styled.ts'; import useBoolean from 'utils/hooks/useBoolean.ts'; -import { List } from '../../Home.styled.ts'; import RequestAnimationFrameQueueModal from './RequestAnimationFrameQueue.modal.tsx'; import { useQueueManagerStore } from 'store/store.ts'; import { Icon } from 'components/Icon/Icon.tsx'; import { useTheme } from '@emotion/react'; +import { BaseSection } from 'pages/home/sections/BaseSection/BaseSection.tsx'; function RequestAnimationFrameQueue({ className }: { className?: string }) { const callbacks = useQueueManagerStore((state) => state.rafCallback); @@ -12,8 +12,10 @@ function RequestAnimationFrameQueue({ className }: { className?: string }) { const theme = useTheme(); return ( - - RequestAnimationFrame callbacks + @@ -23,7 +25,7 @@ function RequestAnimationFrameQueue({ className }: { className?: string }) { ))} - + ); } diff --git a/src/pages/home/sections/TasksQueue/TasksQueue.tsx b/src/pages/home/sections/TasksQueue/TasksQueue.tsx index 15c26d1..eeab56d 100644 --- a/src/pages/home/sections/TasksQueue/TasksQueue.tsx +++ b/src/pages/home/sections/TasksQueue/TasksQueue.tsx @@ -1,10 +1,10 @@ import { useQueueManagerStore } from 'store/store.ts'; import * as Styled from './TasksQueue.styled.ts'; import useBoolean from 'utils/hooks/useBoolean.ts'; -import { List } from '../../Home.styled.ts'; import TasksQueueModal from './TasksQueue.modal.tsx'; import { Icon } from 'components/Icon/Icon.tsx'; import { useTheme } from '@emotion/react'; +import { BaseSection } from '../BaseSection/BaseSection.tsx'; function TasksQueue({ className }: { className?: string }) { const tasks = useQueueManagerStore((state) => state.macrotask); @@ -12,8 +12,7 @@ function TasksQueue({ className }: { className?: string }) { const theme = useTheme(); return ( - - Tasks Queue + @@ -23,7 +22,7 @@ function TasksQueue({ className }: { className?: string }) { ))} - + ); } diff --git a/src/pages/home/sections/WebApiQueue/WebApiQueue.tsx b/src/pages/home/sections/WebApiQueue/WebApiQueue.tsx index 6fb1668..e0f8879 100644 --- a/src/pages/home/sections/WebApiQueue/WebApiQueue.tsx +++ b/src/pages/home/sections/WebApiQueue/WebApiQueue.tsx @@ -1,11 +1,11 @@ import WebApiTask from './WebApiTask.tsx'; import * as Styled from './WebApiQueue.styled.ts'; import useBoolean from 'utils/hooks/useBoolean.ts'; -import { List } from '../../Home.styled.ts'; import WebApiQueueModal from './WebApiQueue.modal.tsx'; import { useQueueManagerStore } from 'store/store.ts'; import { Icon } from 'components/Icon/Icon.tsx'; import { useTheme } from '@emotion/react'; +import { BaseSection } from 'pages/home/sections/BaseSection/BaseSection.tsx'; function WebApiQueue({ className }: { className?: string }) { const tasks = useQueueManagerStore((state) => state.webApi); @@ -13,8 +13,7 @@ function WebApiQueue({ className }: { className?: string }) { const theme = useTheme(); return ( - - Web api + @@ -24,7 +23,7 @@ function WebApiQueue({ className }: { className?: string }) { ))} - + ); } From a198ce6f40ce48bf408b99c5e0089bf518687cf5 Mon Sep 17 00:00:00 2001 From: Albert Trott Date: Sun, 9 Feb 2025 16:19:50 +0100 Subject: [PATCH 2/5] refactor(core): simplify modal sections --- .../BaseModalSection.styled.ts | 14 ++++++ .../BaseModalSection/BaseModalSection.tsx | 36 +++++++++++++ .../sections/Callstack/Callstack.modal.tsx | 49 ------------------ .../sections/Callstack/Callstack.styled.ts | 13 ----- .../home/sections/Callstack/Callstack.tsx | 49 +++++++++++++----- .../MicroTasksQueue/MicroTasksQueue.modal.tsx | 36 ------------- .../MicroTasksQueue/MicroTasksQueue.styled.ts | 13 ----- .../MicroTasksQueue/MicroTasksQueue.tsx | 38 +++++++++----- .../RequestAnimationFrameQueue.modal.tsx | 40 --------------- .../RequestAnimationFrameQueue.styled.ts | 13 ----- .../RequestAnimationFrameQueue.tsx | 39 ++++++++++----- .../sections/TasksQueue/TasksQueue.modal.tsx | 48 ------------------ .../sections/TasksQueue/TasksQueue.styled.ts | 13 ----- .../home/sections/TasksQueue/TasksQueue.tsx | 50 ++++++++++++++----- .../WebApiQueue/WebApiQueue.modal.tsx | 38 -------------- .../WebApiQueue/WebApiQueue.styled.ts | 13 ----- .../home/sections/WebApiQueue/WebApiQueue.tsx | 40 ++++++++++----- 17 files changed, 201 insertions(+), 341 deletions(-) create mode 100644 src/pages/home/sections/BaseModalSection/BaseModalSection.styled.ts create mode 100644 src/pages/home/sections/BaseModalSection/BaseModalSection.tsx delete mode 100644 src/pages/home/sections/Callstack/Callstack.modal.tsx delete mode 100644 src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.modal.tsx delete mode 100644 src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.modal.tsx delete mode 100644 src/pages/home/sections/TasksQueue/TasksQueue.modal.tsx delete mode 100644 src/pages/home/sections/WebApiQueue/WebApiQueue.modal.tsx diff --git a/src/pages/home/sections/BaseModalSection/BaseModalSection.styled.ts b/src/pages/home/sections/BaseModalSection/BaseModalSection.styled.ts new file mode 100644 index 0000000..ee5d80c --- /dev/null +++ b/src/pages/home/sections/BaseModalSection/BaseModalSection.styled.ts @@ -0,0 +1,14 @@ +import styled from '@emotion/styled'; +import { TransparentButton } from 'components/TransparentButton/TransparentButton.tsx'; + +export const InfoButton = styled(TransparentButton)` + position: absolute; + top: 8px; + right: 8px; +`; + +export const CloseButton = styled(TransparentButton)` + position: absolute; + top: 12px; + right: 12px; +`; diff --git a/src/pages/home/sections/BaseModalSection/BaseModalSection.tsx b/src/pages/home/sections/BaseModalSection/BaseModalSection.tsx new file mode 100644 index 0000000..6f36637 --- /dev/null +++ b/src/pages/home/sections/BaseModalSection/BaseModalSection.tsx @@ -0,0 +1,36 @@ +import { JSX, PropsWithChildren } from 'react'; +import { BaseSection } from 'pages/home/sections/BaseSection/BaseSection.tsx'; +import useBoolean from 'utils/hooks/useBoolean.ts'; +import * as Styled from './BaseModalSection.styled.ts'; +import { Icon } from 'components/Icon/Icon.tsx'; +import { useTheme } from '@emotion/react'; +import InfoModal from 'components/Modal/Modal.tsx'; + +export function BaseModalSection({ + title, + children, + modalContent, + className, +}: PropsWithChildren<{ + title: string; + className?: string; + modalContent: JSX.Element; +}>) { + const [isOpened, toggle] = useBoolean(false); + const theme = useTheme(); + + return ( + + + + + + + + + {modalContent} + + {children} + + ); +} diff --git a/src/pages/home/sections/Callstack/Callstack.modal.tsx b/src/pages/home/sections/Callstack/Callstack.modal.tsx deleted file mode 100644 index f7d7c6a..0000000 --- a/src/pages/home/sections/Callstack/Callstack.modal.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import * as Styled from './Callstack.styled.ts'; -import InfoModal from 'components/Modal/Modal.tsx'; -import { Icon } from 'components/Icon/Icon.tsx'; -import { useTheme } from '@emotion/react'; - -function CallStackModal({ - isOpened, - toggle, -}: { - isOpened: boolean; - toggle: () => void; -}) { - const theme = useTheme(); - return ( - -

Call stack

- - - -

- A call stack is a mechanism for an interpreter to keep track of its - place in a script that calls multiple functions — what function is - currently being run and what functions are called from within that - function, etc. -

-
    -
  • - When a script calls a function, the interpreter adds it to the call - stack and then starts carrying out the function. -
    • -
  • - Any functions that are called by that function are added to the call - stack further up, and run where their calls are reached. -
    • -
  • - When the current function is finished, the interpreter takes it off - the stack and resumes execution where it left off in the last code - listing. -
    • -
  • - If the stack takes up more space than it was assigned, a "stack - overflow" error is thrown. -
    • -
- - ); -} - -export default CallStackModal; diff --git a/src/pages/home/sections/Callstack/Callstack.styled.ts b/src/pages/home/sections/Callstack/Callstack.styled.ts index bae8c48..1c82237 100644 --- a/src/pages/home/sections/Callstack/Callstack.styled.ts +++ b/src/pages/home/sections/Callstack/Callstack.styled.ts @@ -1,6 +1,5 @@ import styled from '@emotion/styled'; import { css } from '@emotion/react'; -import { TransparentButton } from 'components/TransparentButton/TransparentButton.tsx'; export const Callstack = styled.div( ({ theme }) => css` @@ -38,15 +37,3 @@ export const CallstackElement = styled.div( } ` ); - -export const InfoButton = styled(TransparentButton)` - position: absolute; - top: 8px; - right: 8px; -`; - -export const CloseButton = styled(TransparentButton)` - position: absolute; - top: 12px; - right: 12px; -`; diff --git a/src/pages/home/sections/Callstack/Callstack.tsx b/src/pages/home/sections/Callstack/Callstack.tsx index 9ef4bc6..28c67a2 100644 --- a/src/pages/home/sections/Callstack/Callstack.tsx +++ b/src/pages/home/sections/Callstack/Callstack.tsx @@ -1,28 +1,51 @@ import * as Styled from './Callstack.styled.ts'; -import useBoolean from 'utils/hooks/useBoolean.ts'; -import CallStackModal from './Callstack.modal.tsx'; import { useQueueManagerStore } from 'store/store.ts'; -import { Icon } from 'components/Icon/Icon.tsx'; -import { useTheme } from '@emotion/react'; -import { BaseSection } from 'pages/home/sections/BaseSection/BaseSection.tsx'; +import { BaseModalSection } from '../BaseModalSection/BaseModalSection.tsx'; + +const ModalContent = ( + <> +

Call stack

+

+ A call stack is a mechanism for an interpreter to keep track of its place + in a script that calls multiple functions — what function is currently + being run and what functions are called from within that function, etc. +

+ + +); function CallStack({ className }: { className?: string }) { const tasks = useQueueManagerStore((state) => state.callstack); - const [isOpened, toggle] = useBoolean(false); - const theme = useTheme(); return ( - + - - - {tasks.map((task) => ( {task} ))} - - + ); } diff --git a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.modal.tsx b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.modal.tsx deleted file mode 100644 index b14394f..0000000 --- a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.modal.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as Styled from './MicroTasksQueue.styled.ts'; -import InfoModal from 'components/Modal/Modal.tsx'; -import { Icon } from 'components/Icon/Icon.tsx'; -import { useTheme } from '@emotion/react'; - -function MicroTasksQueueModal({ - isOpened, - toggle, -}: { - isOpened: boolean; - toggle: () => void; -}) { - const theme = useTheme(); - return ( - -

Microtasks

- - - -

- A microtask is a short function which is executed after the function or - program which created it exits and only if the JavaScript execution - stack is empty, but before returning control to the event loop being - used by the user agent to drive the script's execution environment. -

-

Events that can trigger new microtasks:

-
    -
  • Promise resolution (.then(), .catch(), .finally())
    • -
  • Occurrence of observed DOM changes
    • -
  • queueMicrotask() method
    • -
- - ); -} - -export default MicroTasksQueueModal; diff --git a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts index 12bcf05..f8386bf 100644 --- a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts +++ b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts @@ -1,6 +1,5 @@ import styled from '@emotion/styled'; import { css } from '@emotion/react'; -import { TransparentButton } from 'components/TransparentButton/TransparentButton.tsx'; export const MicroTasksQueue = styled.div` flex: 1; @@ -25,15 +24,3 @@ export const MicroTask = styled.div( word-wrap: break-word; ` ); - -export const InfoButton = styled(TransparentButton)` - position: absolute; - top: 8px; - right: 8px; -`; - -export const CloseButton = styled(TransparentButton)` - position: absolute; - top: 12px; - right: 12px; -`; diff --git a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.tsx b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.tsx index 9b3f244..c69b48e 100644 --- a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.tsx +++ b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.tsx @@ -1,28 +1,40 @@ import { useQueueManagerStore } from 'store/store.ts'; import * as Styled from './MicroTasksQueue.styled.ts'; -import useBoolean from 'utils/hooks/useBoolean.ts'; -import MicroTasksQueueModal from './MicroTasksQueue.modal.tsx'; -import { Icon } from 'components/Icon/Icon.tsx'; -import { useTheme } from '@emotion/react'; -import { BaseSection } from '../BaseSection/BaseSection.tsx'; +import { BaseModalSection } from '../BaseModalSection/BaseModalSection.tsx'; + +const ModalContent = ( + <> +

Microtasks

+

+ A microtask is a short function which is executed after the function or + program which created it exits and only if the JavaScript execution stack + is empty, but before returning control to the event loop being used by the + user agent to drive the script's execution environment. +

+

Events that can trigger new microtasks:

+ + +); function MicroTasksQueue({ className }: { className?: string }) { const tasks = useQueueManagerStore((state) => state.microtask); - const [isOpened, toggle] = useBoolean(false); - const theme = useTheme(); return ( - + - - - {tasks.map((task) => ( {task} ))} - - + ); } diff --git a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.modal.tsx b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.modal.tsx deleted file mode 100644 index 9637b9e..0000000 --- a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.modal.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import * as Styled from './RequestAnimationFrameQueue.styled.ts'; -import InfoModal from 'components/Modal/Modal.tsx'; -import { Icon } from 'components/Icon/Icon.tsx'; -import { useTheme } from '@emotion/react'; - -function RequestAnimationFrameQueueModal({ - isOpened, - toggle, -}: { - isOpened: boolean; - toggle: () => void; -}) { - const theme = useTheme(); - return ( - -

RequestAnimationFrame

- - - -

- The window.requestAnimationFrame() method tells the browser you wish to - perform an animation. It requests the browser to call a user-supplied - callback function before the next repaint. -

-

- The frequency of calls to the callback function will generally match the - display refresh rate. The most common refresh rate is 60hz, (60 - cycles/frames per second), though 75hz, 120hz, and 144hz are also widely - used. -

-

- requestAnimationFrame() calls are paused in most browsers when running - in background tabs or hidden iframes, in order to improve performance - and battery life. -

- - ); -} - -export default RequestAnimationFrameQueueModal; diff --git a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts index c4d0e45..abba67b 100644 --- a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts +++ b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts @@ -1,6 +1,5 @@ import styled from '@emotion/styled'; import { css } from '@mui/material'; -import { TransparentButton } from 'components/TransparentButton/TransparentButton.tsx'; export const CallbacksQueue = styled.div` flex: 1; @@ -25,15 +24,3 @@ export const Callback = styled.div( word-wrap: break-word; ` ); - -export const InfoButton = styled(TransparentButton)` - position: absolute; - top: 8px; - right: 8px; -`; - -export const CloseButton = styled(TransparentButton)` - position: absolute; - top: 12px; - right: 12px; -`; diff --git a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.tsx b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.tsx index a9416b6..14ff71c 100644 --- a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.tsx +++ b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.tsx @@ -1,31 +1,44 @@ import * as Styled from './RequestAnimationFrameQueue.styled.ts'; -import useBoolean from 'utils/hooks/useBoolean.ts'; -import RequestAnimationFrameQueueModal from './RequestAnimationFrameQueue.modal.tsx'; import { useQueueManagerStore } from 'store/store.ts'; -import { Icon } from 'components/Icon/Icon.tsx'; -import { useTheme } from '@emotion/react'; -import { BaseSection } from 'pages/home/sections/BaseSection/BaseSection.tsx'; +import { BaseModalSection } from '../BaseModalSection/BaseModalSection.tsx'; + +const ModalContent = ( + <> +

RequestAnimationFrame

+

+ The window.requestAnimationFrame() method tells the browser you wish to + perform an animation. It requests the browser to call a user-supplied + callback function before the next repaint. +

+

+ The frequency of calls to the callback function will generally match the + display refresh rate. The most common refresh rate is 60hz, (60 + cycles/frames per second), though 75hz, 120hz, and 144hz are also widely + used. +

+

+ requestAnimationFrame() calls are paused in most browsers when running in + background tabs or hidden iframes, in order to improve performance and + battery life. +

+ +); function RequestAnimationFrameQueue({ className }: { className?: string }) { const callbacks = useQueueManagerStore((state) => state.rafCallback); - const [isOpened, toggle] = useBoolean(false); - const theme = useTheme(); return ( - - - - {callbacks.map((callback) => ( {callback} ))} - - + ); } diff --git a/src/pages/home/sections/TasksQueue/TasksQueue.modal.tsx b/src/pages/home/sections/TasksQueue/TasksQueue.modal.tsx deleted file mode 100644 index bac8539..0000000 --- a/src/pages/home/sections/TasksQueue/TasksQueue.modal.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import * as Styled from './TasksQueue.styled.ts'; -import InfoModal from 'components/Modal/Modal.tsx'; -import { Icon } from 'components/Icon/Icon.tsx'; -import { useTheme } from '@emotion/react'; - -function TasksQueueModal({ - isOpened, - toggle, -}: { - isOpened: boolean; - toggle: () => void; -}) { - const theme = useTheme(); - return ( - -

Tasks

- - - -

- A task is anything which is scheduled to be run by the standard - mechanisms such as initially starting to run a program, an event being - dispatched asynchronously, or an interval or timeout being fired. These - all get scheduled on the task queue. -

-

- For example, tasks get added to the task queue when: -

-
    -
  • - A new JavaScript program or subprogram is executed (such as from a - console, or by running the code in a {'