+
+
+
+
+
+
+
+
+ JS Playground is an experimental JavaScript PlayGround
+ created for Education and Testing Purposes
+
+
This sandbox playground is hooked up directly with
+
+
+ {LIBRARIES.map(lib => (
+ -
+
+
+ ))}
+
+
+
Enjoy
+
+
+ Khalid Elshafie
+
+
+
-
- ))}
-
-
Enjoy
-
-
+
);
};
diff --git a/src/components/ActionButton/ActionButton.spec.tsx b/src/components/ActionButton/ActionButton.spec.tsx
deleted file mode 100644
index 542f9ce..0000000
--- a/src/components/ActionButton/ActionButton.spec.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import ActionButton from 'components/ActionButton';
-
-const buttonTestId = 'actionbutton-button';
-const iconTestId = 'actionbutton-icon';
-describe('
', () => {
- const onClick = jest.fn();
-
- it('render clear button when button type is clear', () => {
- render(
);
- const button = screen.getByTestId(`${buttonTestId}-clear`);
- const icon = screen.getByTestId(iconTestId);
-
- expect(button.textContent?.trim()).toEqual('Clear result');
- expect(button).toHaveClass('btn-info');
- expect(icon).toHaveClass('fa-trash');
- });
-
- it('render execute button when button type is execute', () => {
- render(
);
- const button = screen.getByTestId(`${buttonTestId}-execute`);
- const icon = screen.getByTestId(iconTestId);
-
- expect(button.textContent?.trim()).toEqual('Run');
- expect(button).toHaveClass('btn-success');
- expect(icon).toHaveClass('fa-play-circle');
- });
-
- it('render loading icon when loading prop is truthy', () => {
- render(
);
- const icon = screen.getByTestId(iconTestId);
- expect(icon).toHaveClass('fas fa-spinner fa-spin');
- });
-
- it('invoke onClick when button is clicked', () => {
- render(
);
- const button = screen.getByTestId(`${buttonTestId}-execute`);
- fireEvent.click(button);
- expect(onClick).toHaveBeenCalledTimes(1);
- });
-});
diff --git a/src/components/ActionButton/ActionButton.tsx b/src/components/ActionButton/ActionButton.tsx
deleted file mode 100644
index 6bfdc88..0000000
--- a/src/components/ActionButton/ActionButton.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-const ButtonProps: Record
= {
- clear: {
- title: 'Clear result',
- icon: 'fas fa-trash',
- className: 'btn btn-info',
- toolTip: 'Clear result (CtrCmd + l)',
- },
- execute: {
- title: 'Run',
- icon: 'fas fa-play-circle',
- className: 'btn btn-success',
- toolTip: 'Run Code (CtrCmd + k)',
- },
- history: {
- title: 'History',
- icon: 'fas fa-history',
- className: 'btn btn-warning',
- toolTip: 'Show run history',
- },
-};
-
-const ActionButton: React.FC = ({
- type,
- onClick,
- loading = false,
-}) => {
- const buttonProps = ButtonProps[type];
- const iconName = loading ? 'fas fa-spinner fa-spin' : buttonProps.icon;
- return (
-
- );
-};
-
-export default ActionButton;
diff --git a/src/components/ActionButton/index.tsx b/src/components/ActionButton/index.tsx
deleted file mode 100644
index 9b18f0e..0000000
--- a/src/components/ActionButton/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'components/ActionButton/ActionButton';
diff --git a/src/components/ActionButton/types.d.ts b/src/components/ActionButton/types.d.ts
deleted file mode 100644
index 62b5fab..0000000
--- a/src/components/ActionButton/types.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-type ActionButtonType = 'execute' | 'clear' | 'history';
-
-interface ActionButtonProps {
- type: ActionButtonType;
- onClick: VoidFunction;
- loading?: boolean;
-}
-
-interface ActionButtonTypeProps {
- title: string;
- icon: string;
- className: string;
- toolTip?: string;
-}
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 07147a4..bd32cba 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,17 +1,16 @@
-import { useContext, useEffect, useState } from 'react';
-import Header from 'components/Header';
-import About from 'components/About';
+import Split from 'react-split';
+import Editor from '../CodeEditor/CodeEditor';
+import Console from 'components/Console';
+import { useContext, useEffect } from 'react';
import { AppContext } from 'context/AppContext';
import { AppActions } from 'context/Reducer';
-import ContextMenu from 'components/ContextMenu';
-import JsonView from 'components/JsonView';
-import CodeEditor from 'components/CodeEditor';
-import Console from 'components/Console';
-import HistoryModal from 'components/HistoryModal';
+import History from 'components/History';
+import About from 'components/About';
+import ShareCode from 'components/ShareCode';
+import { decompressFromEncodedURIComponent } from 'lz-string';
const App: React.FC = () => {
const { dispatch } = useContext(AppContext);
- const [position, setPosition] = useState(null);
useEffect(() => {
const consoleProxy = console.log;
@@ -19,42 +18,43 @@ const App: React.FC = () => {
dispatch({ type: AppActions.CODE_RUN_SUCCESS, payload: msg });
consoleProxy(msg);
};
- }, []);
- const handleContextMenu = (event: React.MouseEvent) => {
- event.preventDefault();
- const { pageX, pageY } = event;
- setPosition({ top: pageY, left: pageX });
- };
+ try {
+ const params = new URLSearchParams(window.location.search);
+ const codeParam = params.get('code');
+ if (codeParam) {
+ const payload = {
+ codeSample: decompressFromEncodedURIComponent(codeParam),
+ codeSampleName: 'URL Code',
+ };
+ dispatch({ type: AppActions.LOAD_CODE_SAMPLE, payload });
+ }
+ } catch (_) {
+ // Ignore errors in URL parsing or decompression
+ }
+ }, []);
return (
-
-
-
-
-
-
+
+
+
+
-
-
-
-
setPosition(null)}
- onClick={() => {
- dispatch({ type: AppActions.TOGGLE_JSON_VIEW, payload: 'block' });
- setPosition(null);
- }}
- />
-
-
+
);
};
diff --git a/src/components/Clickable/Clickable.spec.tsx b/src/components/Clickable/Clickable.spec.tsx
deleted file mode 100644
index 7e4827a..0000000
--- a/src/components/Clickable/Clickable.spec.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import Clickable from 'components/Clickable';
-
-describe('
', () => {
- it('invoke on click when button clicked', () => {
- const onClick = jest.fn();
- render(
);
- fireEvent.click(screen.getByTestId('app-clickable'));
- expect(onClick).toHaveBeenCalledTimes(1);
- });
-});
diff --git a/src/components/Clickable/Clickable.tsx b/src/components/Clickable/Clickable.tsx
deleted file mode 100644
index d8dca23..0000000
--- a/src/components/Clickable/Clickable.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-const Clickable: React.FC
= ({ onClick, children }) => (
-
-);
-
-export default Clickable;
diff --git a/src/components/Clickable/index.tsx b/src/components/Clickable/index.tsx
deleted file mode 100644
index 91fe454..0000000
--- a/src/components/Clickable/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'components/Clickable/Clickable';
diff --git a/src/components/Clickable/types.d.ts b/src/components/Clickable/types.d.ts
deleted file mode 100644
index 5d3fb5d..0000000
--- a/src/components/Clickable/types.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-interface ClickableProps extends React.HTMLAttributes {
- onClick: VoidFunction;
-}
diff --git a/src/components/CodeEditor/CodeEditor.tsx b/src/components/CodeEditor/CodeEditor.tsx
index da27898..b7a0596 100644
--- a/src/components/CodeEditor/CodeEditor.tsx
+++ b/src/components/CodeEditor/CodeEditor.tsx
@@ -17,7 +17,7 @@ const CodeEditor: React.FC = () => {
value: '',
language: 'typescript',
fontSize: 20,
- theme: state.theme,
+ theme: 'vs-dark',
minimap: {
enabled: false,
},
@@ -25,7 +25,7 @@ const CodeEditor: React.FC = () => {
const editorInstance = monaco.editor.create(
editorRef.current!,
- editorConfig
+ editorConfig,
);
monaco.editor.setModelLanguage(editorInstance.getModel()!, 'typescript');
@@ -69,10 +69,6 @@ const CodeEditor: React.FC = () => {
return () => editor?.dispose();
}, [editorRef.current]);
- useEffect(() => {
- editor?.updateOptions({ theme: state.theme });
- }, [state.theme]);
-
useEffect(() => {
editor?.setValue(state.codeSample);
}, [state.codeSample]);
diff --git a/src/components/Console/Console.spec.tsx b/src/components/Console/Console.test.tsx
similarity index 65%
rename from src/components/Console/Console.spec.tsx
rename to src/components/Console/Console.test.tsx
index 094ee4a..d0019ff 100644
--- a/src/components/Console/Console.spec.tsx
+++ b/src/components/Console/Console.test.tsx
@@ -8,7 +8,6 @@ describe('', () => {
afterEach(() => {
state = {
- display: 'block',
error: '',
result: [''],
} as AppState;
@@ -20,7 +19,7 @@ describe('', () => {
render(
-
+ ,
);
const errorDiv = screen.getByTestId('console-error');
@@ -34,12 +33,12 @@ describe('', () => {
render(
-
+ ,
);
expect(screen.queryByTestId('console-error')).not.toBeInTheDocument();
expect(screen.getByTestId('console-result').children.length).toEqual(
- result.length
+ result.length,
);
});
@@ -49,14 +48,33 @@ describe('', () => {
render(
-
+ ,
);
expect(screen.getByTestId('console-result-item-0').textContent).toEqual(
- JSON.stringify(result[0])
+ JSON.stringify(result[0], null, 0),
);
expect(screen.getByTestId('console-result-item-1').textContent).toEqual(
- result[1]
+ JSON.stringify(result[1], null, 0),
+ );
+ });
+
+ it('add indentation when result is large', () => {
+ const largeObj = {
+ a: 'This is a long string to make the object large enough for pretty print.',
+ b: Array(10).fill('more data'),
+ c: { nested: true, arr: [1, 2, 3, 4, 5] },
+ };
+ state.result = [largeObj];
+ render(
+
+
+ ,
+ );
+
+ // The component should pretty-print with 2 spaces for large objects
+ expect(screen.getByTestId('console-result-item-0').textContent).toEqual(
+ JSON.stringify(largeObj, null, 3),
);
});
});
diff --git a/src/components/Console/Console.tsx b/src/components/Console/Console.tsx
index d66a4e5..5c61191 100644
--- a/src/components/Console/Console.tsx
+++ b/src/components/Console/Console.tsx
@@ -1,41 +1,48 @@
import { useContext } from 'react';
-import _ from 'lodash';
import { AppContext } from 'context/AppContext';
const Console: React.FC = () => {
const { state } = useContext(AppContext);
- const { result, error, theme } = state;
- const extraClass = theme === 'vs-light' ? 'console-light' : '';
+ const { result, error } = state;
const createKey = (index: number) => {
return `key${index}`;
};
- if (error) {
+ const renderError = () => {
return (
-
-
- {error}
-
+
+ {error}
);
- }
+ };
+
+ const renderResult = () => {
+ return result.map((item, index) => {
+ const key = createKey(index);
+ const isObject = typeof item === 'object' && item !== null;
+ const str = JSON.stringify(item);
+ const space = isObject && str.length > 60 ? 3 : 0;
+
+ return (
+
+
+ ›
+
+ {JSON.stringify(item, null, space)}
+
+
+
+ );
+ });
+ };
return (
-
- {result.map((item, index) => {
- const consoleItem = !_.isString(item) ? JSON.stringify(item) : item;
- return (
-
-
- ›
-
- {consoleItem}
-
-
-
- );
- })}
+
+ {error ? renderError() : renderResult()}
);
};
diff --git a/src/components/ContextMenu/ContextMenu.spec.tsx b/src/components/ContextMenu/ContextMenu.spec.tsx
deleted file mode 100644
index 06f1e4e..0000000
--- a/src/components/ContextMenu/ContextMenu.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import ContextMenu from 'components/ContextMenu';
-
-describe('
', () => {
- const props: ContextMenuProps = {
- position: { left: 1, top: 1 },
- onClick: jest.fn(),
- onClose: jest.fn(),
- };
- it('does not render if position is not defined', () => {
- render(
);
- expect(screen.queryByTestId('app-context-menu')).not.toBeInTheDocument();
- });
-
- it('render context menu when position is defined', () => {
- render(
);
- const menuItem = screen.queryByTestId('app-context-menu');
- expect(menuItem).toBeInTheDocument();
- });
-});
diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx
deleted file mode 100644
index e87111b..0000000
--- a/src/components/ContextMenu/ContextMenu.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import Clickable from 'components/Clickable';
-
-const ContextMenu: React.FC
= ({
- position,
- onClose,
- onClick,
-}) => {
- if (!position) return null;
-
- return (
-
- -
- View JSON
-
- -
- Close
-
-
- );
-};
-
-export default ContextMenu;
diff --git a/src/components/ContextMenu/index.tsx b/src/components/ContextMenu/index.tsx
deleted file mode 100644
index 9cb8a35..0000000
--- a/src/components/ContextMenu/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'components/ContextMenu/ContextMenu';
diff --git a/src/components/ContextMenu/types.d.ts b/src/components/ContextMenu/types.d.ts
deleted file mode 100644
index 7b32c36..0000000
--- a/src/components/ContextMenu/types.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-interface MenuPosition {
- top: number;
- left: number;
-}
-interface ContextMenuProps {
- position: MenuPosition | null;
- onClose: VoidFunction;
- onClick: VoidFunction;
-}
diff --git a/src/components/Header/Header.spec.tsx b/src/components/Header/Header.spec.tsx
deleted file mode 100644
index a61c6b0..0000000
--- a/src/components/Header/Header.spec.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import Header from 'components/Header';
-import { AppContext } from 'context/AppContext';
-import { AppActions } from 'context/Reducer';
-
-describe('', () => {
- describe('header actions', () => {
- const state = { codeSample: '', codeSampleName: '' } as AppState;
- let dispatch: jest.Mock;
- beforeEach(() => {
- dispatch = jest.fn();
- render(
-
-
- ,
- );
- });
-
- afterEach(() => {
- cleanup();
- });
-
- it('dispatch about action when about button is click', () => {
- fireEvent.click(screen.getByText('About'));
- expect(dispatch).toHaveBeenCalledWith({
- payload: 'block',
- type: AppActions.TOGGLE_ABOUT_MODAL,
- });
- });
- it('toggle the theme when toggle button is click', () => {
- fireEvent.click(screen.getByTestId('app-theme-button-vs-dark'));
- expect(dispatch).toHaveBeenCalledWith({
- payload: 'vs-dark',
- type: AppActions.TOGGLE_THEME,
- });
- });
-
- it('dispatch execute code action when run button is clicked', () => {
- fireEvent.click(screen.getByTestId('actionbutton-button-execute'));
- expect(dispatch).toHaveBeenCalledWith({
- type: AppActions.CODE_RUNNING,
- });
- });
-
- it('dispatch clear result action when clear button is clicked', () => {
- fireEvent.click(screen.getByTestId('actionbutton-button-clear'));
- expect(dispatch).toHaveBeenCalledWith({
- type: AppActions.CLEAR_RESULT,
- });
- });
-
- it('dispatch load code sample on sample change', () => {
- fireEvent.change(screen.getByTestId('header-code-selector'), {
- target: { value: 'Axios' },
- });
- expect(dispatch).toHaveBeenCalledWith({
- type: AppActions.LOAD_CODE_SAMPLE,
- payload: expect.objectContaining({
- codeSampleName: 'Axios',
- }),
- });
- });
- });
-});
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
deleted file mode 100644
index 10e64ba..0000000
--- a/src/components/Header/Header.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { ChangeEvent, useContext } from 'react';
-import ActionButton from 'components/ActionButton';
-import { AppContext } from 'context/AppContext';
-import { AppActions } from 'context/Reducer';
-import { CODE_SAMPLES, EDITOR_THEMES } from 'helpers/const';
-import useCodeRunner from 'hooks/useCodeRunner';
-
-const Header: React.FC = () => {
- const { state, dispatch } = useContext(AppContext);
- const { runCode } = useCodeRunner();
- const { theme, codeSampleName } = state;
-
- const handleChange = (e: ChangeEvent) => {
- const {
- target: { value },
- } = e;
-
- const { codeSample } = CODE_SAMPLES.find(item => item.name === value)!;
-
- const payload = {
- codeSample,
- codeSampleName: value,
- };
-
- dispatch({ type: AppActions.LOAD_CODE_SAMPLE, payload });
- };
-
- return (
-
- );
-};
-
-export default Header;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
deleted file mode 100644
index a0dab5b..0000000
--- a/src/components/Header/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'components/Header/Header';
diff --git a/src/components/History/History.test.tsx b/src/components/History/History.test.tsx
new file mode 100644
index 0000000..85a9bd7
--- /dev/null
+++ b/src/components/History/History.test.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { fireEvent, act, render, screen } from '@testing-library/react';
+import { AppContext } from 'context/AppContext';
+import { AppActions } from 'context/Reducer';
+import History from 'components/History';
+import * as StorageService from 'services/storage';
+
+const getHistorySpy = jest.spyOn(StorageService, 'getHistory');
+const mockHistory = [
+ {
+ date: 'second',
+ code: 'const a = 10',
+ },
+ {
+ date: 'first',
+ code: 'const b = 20',
+ },
+];
+
+describe('', () => {
+ const state = {
+ historyOpen: true,
+ } as AppState;
+ const dispatch = jest.fn();
+
+ beforeEach(async () => {
+ getHistorySpy.mockReturnValue([...mockHistory]);
+ await act(async () => {
+ render(
+
+
+ ,
+ );
+ });
+ });
+
+ afterEach(jest.clearAllMocks);
+
+ it('render history list', () => {
+ const historyElement = screen.getByTestId('history-container');
+ expect(historyElement.children.length).toEqual(2);
+ });
+
+ it('calls closes the modal on button click', () => {
+ const closeButton = screen.getByTestId('history-close-btn');
+ fireEvent.click(closeButton);
+
+ expect(dispatch).toHaveBeenCalledWith({
+ type: AppActions.HIDE_HISTORY,
+ });
+ });
+
+ it('restores history when restore button is clicked', async () => {
+ // Expand
+ const disclosureButtons = await screen.findAllByRole('button');
+ for (const btn of disclosureButtons) {
+ if (btn.textContent !== 'Restore') {
+ await act(async () => {
+ fireEvent.click(btn);
+ });
+ }
+ }
+
+ const restoreButtons = await screen.findAllByRole('button', {
+ name: /Restore/,
+ });
+ await act(async () => {
+ fireEvent.click(restoreButtons[0]);
+ });
+
+ expect(dispatch).toHaveBeenCalledWith({
+ type: AppActions.LOAD_CODE_SAMPLE,
+ payload: {
+ codeSample: mockHistory[1].code,
+ codeSampleName: '',
+ },
+ });
+ });
+});
diff --git a/src/components/History/History.tsx b/src/components/History/History.tsx
new file mode 100644
index 0000000..9782fb5
--- /dev/null
+++ b/src/components/History/History.tsx
@@ -0,0 +1,121 @@
+import { useContext } from 'react';
+import {
+ Dialog,
+ DialogPanel,
+ DialogTitle,
+ Disclosure,
+ DisclosureButton,
+ DisclosurePanel,
+} from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { AppContext } from 'context/AppContext';
+import { AppActions } from 'context/Reducer';
+import { getHistory } from 'services/storage';
+
+const History: React.FC = () => {
+ const { state, dispatch } = useContext(AppContext);
+
+ const history = getHistory();
+
+ const makeKey = (item: HistoryItem, index: number) => `${item.date}_${index}`;
+
+ const handleRestore = (item: HistoryItem) => () => {
+ const payload = {
+ codeSample: item.code,
+ codeSampleName: '',
+ };
+
+ dispatch({ type: AppActions.LOAD_CODE_SAMPLE, payload });
+ };
+
+ return (
+
+ );
+};
+
+export default History;
diff --git a/src/components/History/index.tsx b/src/components/History/index.tsx
new file mode 100644
index 0000000..43c8ad7
--- /dev/null
+++ b/src/components/History/index.tsx
@@ -0,0 +1 @@
+export { default } from 'components/History/History';
diff --git a/src/components/HistoryModal/HistoryModal.spec.tsx b/src/components/HistoryModal/HistoryModal.spec.tsx
deleted file mode 100644
index 23b693e..0000000
--- a/src/components/HistoryModal/HistoryModal.spec.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { AppContext } from 'context/AppContext';
-import { AppActions } from 'context/Reducer';
-import HistoryModal from 'components/HistoryModal';
-import * as StorageService from 'services/storage';
-
-const getHistorySpy = jest.spyOn(StorageService, 'getHistory');
-const mockHistory = [
- {
- date: 'second',
- code: 'const a = 10',
- },
- {
- date: 'first',
- code: 'const b = 20',
- },
-];
-
-describe('', () => {
- const state = {
- historyModalShown: true,
- } as AppState;
- const mockSetState = jest.fn();
- const dispatch = jest.fn();
-
- beforeEach(() => {
- getHistorySpy.mockReturnValue(mockHistory);
- jest.spyOn(React, 'useState').mockReturnValue([0, mockSetState]);
- render(
-
-
-
- );
- });
-
- afterEach(jest.clearAllMocks);
-
- it('render history list', () => {
- const historyElement = screen.getByTestId('history-accordion');
- expect(historyElement.children.length).toEqual(2);
- });
-
- it('calls closes the modal on button click', () => {
- fireEvent.click(screen.getByTestId('modal-close-btn'));
-
- expect(dispatch).toHaveBeenCalledWith({
- type: AppActions.TOGGLE_HISTORY_MODAL,
- });
- });
-
- describe('when restoring history', () => {
- const historyItemIndex = 0;
- beforeEach(async () => {
- const restoreButtons = await screen.findAllByRole('button', {
- name: /Restore/,
- });
- fireEvent.click(restoreButtons[historyItemIndex]);
- });
-
- it('restore history when restore button click', () => {
- expect(dispatch).toHaveBeenNthCalledWith(1, {
- type: AppActions.LOAD_CODE_SAMPLE,
- payload: {
- codeSample: mockHistory[historyItemIndex].code,
- codeSampleName: '',
- },
- });
- });
-
- it('dismiss the modal', () => {
- expect(dispatch).toHaveBeenNthCalledWith(2, {
- type: AppActions.TOGGLE_HISTORY_MODAL,
- });
- });
- });
-});
diff --git a/src/components/HistoryModal/HistoryModal.tsx b/src/components/HistoryModal/HistoryModal.tsx
deleted file mode 100644
index 7bf8393..0000000
--- a/src/components/HistoryModal/HistoryModal.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { useContext, useState } from 'react';
-import { AppContext } from 'context/AppContext';
-import Modal from 'components/Modal';
-import { AppActions } from 'context/Reducer';
-import { getHistory } from 'services/storage';
-
-const HistoryModal: React.FC = () => {
- const { state, dispatch } = useContext(AppContext);
- const [activeIndex, setActiveIndex] = useState(-1);
-
- const history = getHistory();
-
- const makeKey = (item: HistoryItem, index: number) => `${item.date}_${index}`;
-
- const handleHeaderButtonClick = (index: number) => {
- if (index === activeIndex) {
- setActiveIndex(-1);
- } else setActiveIndex(index);
- };
-
- const handleRestore = (item: HistoryItem) => () => {
- const payload = {
- codeSample: item.code,
- codeSampleName: '',
- };
-
- dispatch({ type: AppActions.LOAD_CODE_SAMPLE, payload });
- dispatch({ type: AppActions.TOGGLE_HISTORY_MODAL });
- };
-
- return (
- dispatch({ type: AppActions.TOGGLE_HISTORY_MODAL })}
- title="Code History"
- >
-
- {history.reverse().map((item, index) => {
- const isActive = index === activeIndex;
- return (
-
-
-
-
-
-
-
{item.code}
-
-
-
-
-
-
- );
- })}
-
+
+
+
+
+
+
+
+
+
+
+
+
{children}
+
-
-
-
-
{title}
-
-
-
-
-
-
-
-
-