{result.map((item, index) => {
const resut = !_.isString(item) ? JSON.stringify(item) : item;
return (
diff --git a/src/components/Header/Header.spec.tsx b/src/components/Header/Header.spec.tsx
index dfd3c8b..98e096d 100644
--- a/src/components/Header/Header.spec.tsx
+++ b/src/components/Header/Header.spec.tsx
@@ -50,14 +50,6 @@ describe('
', () => {
});
});
- it('dispatch reset action when reset button is clicked', () => {
- jest.spyOn(global, 'confirm' as any).mockReturnValueOnce(true);
- fireEvent.click(screen.getByTestId('actionbutton-button-reset'));
- expect(dispatch).toHaveBeenCalledWith({
- type: AppAactions.RESET_ALL,
- });
- });
-
it('dispatch load code sample on sample change', () => {
fireEvent.change(screen.getByTestId('header-code-selector'), {
target: { value: 'Axios' },
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 2888ced..a972923 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -10,13 +10,6 @@ const Header: React.FC = () => {
const { runCode } = useCodeRunner();
const { theme, codeSampleName } = state;
- const handleReset = () => {
- // eslint-disable-next-line no-restricted-globals
- const answer = confirm('This will clear history and code. Are you sure?');
- if (answer) {
- dispatch({ type: AppAactions.RESET_ALL });
- }
- };
const handleChange = (e: ChangeEvent
) => {
const {
target: { value },
@@ -78,6 +71,7 @@ const Header: React.FC = () => {
{EDITOR_THEMES.map(item => (
+ // eslint-disable-next-line jsx-a11y/control-has-associated-label
))}
-
-
', () => {
- const props: TabProps = {
- tab: {
- id: 'js',
- title: 'JS',
- iconName: 'fab fa-js-square',
- component: () => ,
- },
- };
-
- it('render tab component correctly', () => {
- render();
-
- expect(screen.getByTestId('tab-title').textContent).toEqual(
- props.tab.title
- );
- expect(screen.queryByTestId('tab-component')).toBeInTheDocument();
- });
-
- it('applies light style if active theme is light', () => {
- const state = {
- theme: 'vs-light',
- } as AppState;
-
- render(
- // eslint-disable-next-line react/jsx-no-constructed-context-values
-
-
-
- );
-
- expect(screen.getByTestId('tab-component-wrapper')).toHaveStyle({
- background: '#fff',
- color: '#000',
- });
- });
-});
diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx
deleted file mode 100644
index 0e079bf..0000000
--- a/src/components/Tab/Tab.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import TabIcon from 'components/TabIcon';
-import { AppContext } from 'context/AppContext';
-import { useContext } from 'react';
-
-const lightStyle = { background: '#fff', color: '#000' };
-
-const Tab: React.FC = ({ tab }) => {
- const { state } = useContext(AppContext);
- const extraStyle = state.theme === 'vs-light' ? lightStyle : {};
-
- const { title, iconName, iconColor, iconWrap, component: TabComponent } = tab;
-
- return (
-
-
- -
-
-
-
- {title}
-
-
-
-
-
-
- );
-};
-
-export default Tab;
diff --git a/src/components/Tab/index.tsx b/src/components/Tab/index.tsx
deleted file mode 100644
index 9cd25a5..0000000
--- a/src/components/Tab/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'components/Tab/Tab';
diff --git a/src/components/Tab/types.d.ts b/src/components/Tab/types.d.ts
deleted file mode 100644
index 48bd491..0000000
--- a/src/components/Tab/types.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-interface Tab {
- id: string;
- title: string;
- iconName: string;
- component: ReactElement;
- iconColor?: string;
- iconWrap?: boolean;
-}
-
-interface TabProps {
- tab: Tab;
- extra?: object;
-}
diff --git a/src/components/TabIcon/TabIcon.spec.tsx b/src/components/TabIcon/TabIcon.spec.tsx
deleted file mode 100644
index 6132812..0000000
--- a/src/components/TabIcon/TabIcon.spec.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import TabIcon from 'components/TabIcon';
-
-describe('', () => {
- const iconName = 'fab fa-js-square';
-
- it('wrap icon in span when iconWrap prop is true', () => {
- render();
- expect(screen.queryByTestId('app-tab-icon-wrap')).toBeInTheDocument();
- });
-
- it('does not wrap icon in span when iconWrap prop is false', () => {
- render();
- expect(screen.queryByTestId('app-tab-icon-wrap')).not.toBeInTheDocument();
- });
-
- it('render correct icon', () => {
- render();
- const iconElement = screen.getByTestId('app-tab-icon');
- expect(iconElement).toHaveClass(iconName);
- });
-});
diff --git a/src/components/TabIcon/TabIcon.tsx b/src/components/TabIcon/TabIcon.tsx
deleted file mode 100644
index c68b909..0000000
--- a/src/components/TabIcon/TabIcon.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-const TabIcon: React.FC = ({
- iconName,
- iconColor = '#FFF',
- iconWrap = false,
-}) => {
- const renderIcon = () => (
-
- );
-
- if (iconWrap) {
- return (
-
- {renderIcon()}
-
- );
- }
-
- return renderIcon();
-};
-
-export default TabIcon;
diff --git a/src/components/TabIcon/index.tsx b/src/components/TabIcon/index.tsx
deleted file mode 100644
index fd4108a..0000000
--- a/src/components/TabIcon/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'components/TabIcon/TabIcon';
diff --git a/src/components/TabIcon/types.d.ts b/src/components/TabIcon/types.d.ts
deleted file mode 100644
index 91fa49e..0000000
--- a/src/components/TabIcon/types.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-interface TabIconProps {
- iconName: string;
- iconWrap?: boolean;
- iconColor?: string;
-}
diff --git a/src/context/Reducer.spec.ts b/src/context/Reducer.spec.ts
index 60f0038..2462e6f 100644
--- a/src/context/Reducer.spec.ts
+++ b/src/context/Reducer.spec.ts
@@ -83,17 +83,6 @@ describe('Reducer tests', () => {
expect(state.codeSampleName).toEqual(payload.codeSampleName);
});
- it('reset values when reset all action is dispatched', () => {
- const state = reducer(INITIAL_STATE, {
- type: AppAactions.RESET_ALL,
- });
- expect(state.loading).toEqual(false);
- expect(state.result.length).toEqual(0);
- expect(state.error).toEqual('');
- expect(state.codeSample).toEqual('');
- expect(state.codeSampleName).toEqual('');
- });
-
it('return state if action cannot be handled', () => {
const state = reducer(INITIAL_STATE, {
type: 'Unhandled',
diff --git a/src/context/Reducer.ts b/src/context/Reducer.ts
index 9b7e91a..c2c65b8 100644
--- a/src/context/Reducer.ts
+++ b/src/context/Reducer.ts
@@ -10,7 +10,6 @@ export const AppAactions = {
TOGGLE_JSON_VIEW: 'TOGGLE_JSON_VIEW',
TOGGLE_THEME: 'TOGGLE_THEME',
CLEAR_RESULT: 'CLEAR_RESULT',
- RESET_ALL: 'RESET_ALL',
LOAD_CODE_SAMPLE: 'LOAD_CODE_SAMPLE',
};
@@ -56,15 +55,6 @@ export const reducer = (state: AppState, action: Action): AppState => {
return handleLoadCodeSample(state, action);
case AppAactions.CLEAR_RESULT:
return { ...state, result: [] };
- case AppAactions.RESET_ALL:
- return {
- ...state,
- codeSample: '',
- codeSampleName: '',
- result: [],
- error: '',
- loading: false,
- };
default:
return state;
}
diff --git a/src/helpers/const.ts b/src/helpers/const.ts
index 7fc8bc6..b70ff23 100644
--- a/src/helpers/const.ts
+++ b/src/helpers/const.ts
@@ -63,6 +63,43 @@ export const CODE_SAMPLES: CodeSample[] = [
codeSample:
'// date-fns code example. Reference date-fns in the code as `dfn` \n\nconst value = dfn.formatDistance(dfn.subDays(new Date(), 3), new Date(), { addSuffix: true });\nvalue;',
},
+ {
+ id: 6,
+ name: 'Typescript',
+ codeSample: `// Interface for calculation parameters
+interface CalculationParams {
+ operation: string;
+ operand1: number;
+ operand2: number;
+}
+
+// Function to calculate values based on operation
+function calculate(params: CalculationParams): number | string {
+ const { operation, operand1, operand2 } = params;
+ switch (operation) {
+ case '+':
+ return operand1 + operand2;
+ case '-':
+ return operand1 - operand2;
+ case '*':
+ return operand1 * operand2;
+ case '/':
+ if (operand2 === 0) {
+ return 'Cannot divide by zero';
+ } else {
+ return operand1 / operand2;
+ }
+ default:
+ return 'Invalid operation';
+ }
+}
+
+// Example usage:
+console.log(calculate({ operation: '+', operand1: 5, operand2: 3 })); // Output: 8
+console.log(calculate({ operation: '-', operand1: 7, operand2: 2 })); // Output: 5
+console.log(calculate({ operation: '*', operand1: 4, operand2: 6 })); // Output: 24
+`,
+ },
];
export const EDITOR_THEMES: EditorTheme[] = [
diff --git a/src/hooks/useCodeRunner.tsx b/src/hooks/useCodeRunner.tsx
index f58fc75..fee5d38 100644
--- a/src/hooks/useCodeRunner.tsx
+++ b/src/hooks/useCodeRunner.tsx
@@ -1,4 +1,5 @@
import { useContext } from 'react';
+import { transpile } from 'typescript';
import { AppContext } from 'context/AppContext';
import { AppAactions } from 'context/Reducer';
@@ -18,7 +19,7 @@ const useCodeRunner = () => {
const runCode = async (code: string) => {
try {
dispatch({ type: AppAactions.CODE_RUNNING });
- const result = await evalCode(code);
+ const result = await evalCode(transpile(code));
dispatch({ type: AppAactions.CODE_RUN_SUCCESS, payload: result });
} catch (e) {
dispatch({
diff --git a/src/hooks/useResizer.tsx b/src/hooks/useResizer.tsx
deleted file mode 100644
index 6d34e5c..0000000
--- a/src/hooks/useResizer.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const MIN_WIDTH = 100;
-const MAX_WIDTH = 1400;
-
-const useResizer = (ref: React.RefObject) => {
- const [width, setWidth] = useState(MAX_WIDTH);
-
- const startResize = (e: MouseEvent) => {
- let value = e.clientX;
- if (value < MIN_WIDTH) {
- value = MIN_WIDTH;
- }
- if (value > MAX_WIDTH) {
- value = MAX_WIDTH;
- }
-
- setWidth(value);
- };
-
- const stopResize = () => {
- window.removeEventListener('mousemove', startResize, false);
- window.removeEventListener('mouseup', stopResize, false);
- };
-
- const initResize = () => {
- window.addEventListener('mousemove', startResize, false);
- window.addEventListener('mouseup', stopResize, false);
- };
-
- useEffect(() => {
- ref.current.addEventListener('mousedown', initResize, false);
- return () => {
- stopResize();
- };
- }, []);
-
- return { width };
-};
-
-export default useResizer;
diff --git a/src/styles/App.css b/src/styles/App.css
index b780dfc..70f9c49 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -23,13 +23,6 @@ body {
flex: 1;
}
-.resizer {
- width: 12px;
- margin: 0 05px;
- cursor: ew-resize;
- background-color: #3a3f44;
-}
-
.monaco-editor,
.overflow-guard {
width: 100% !important;
@@ -38,12 +31,18 @@ body {
.console {
word-wrap: break-word;
word-break: break-all;
- padding: 20px;
font-size: large;
font-family: sans-serif;
- height: 100%;
width: 100%;
+ height: 100vh;
+ padding: 20px 20px 120px 20px;
overflow-y: scroll;
+
+}
+
+.console-light {
+ background-color: #fff;
+ color: #3a3f44;
}
.error {