upgrade dependencies and delete unused hooks

sujinleeme · Mar 16, 2021 · 4c5f0c4 · 4c5f0c4
1 parent 5534259
commit 4c5f0c4
Show file tree

Hide file tree

Showing 13 changed files with 1,000 additions and 1,405 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,4  1,4 @@
 module.exports = {
   singleQuote: false,
-  printWidth: 80,
   printWidth: 100,
 };
diff --git a/package.json b/package.json
@@ -32,8  32,6 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "^4.0.2",
-    "react-textarea-autosize": "^8.3.0",
-    "resize-observer-polyfill": "^1.5.1",
     "typescript": "^4.0.3",
     "uuid": "^8.3.2",
     "web-vitals": "^0.2.4"
@@ -90,7  88,6 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.0",
-    "@types/resize-observer-browser": "^0.1.5",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.14.0",
     "@typescript-eslint/parser": "^4.14.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,16  1,16 @@
-import React, { useEffect, useState } from "react";
 import React, { useEffect, useRef, useState } from "react";
 
 import { Stack, IStackStyles, mergeStyleSets } from "@fluentui/react";
 
 import { AppBar } from "./components/app-bar";
 import { CommandBar } from "./components/command-bar";
 import { JSONEditor } from "./components/json-editor";
 import { SampleData } from "./components/json-editor/mock-data";
-import { useToggle, useViewport, ViewportProvider } from "./hooks";
 import { useToggle } from "./hooks";
 
 enum Editor {
   Schema = "Schema",
-  InputJson = "Input Json",
   InputJson = "Input JSON",
 }
 
 // Mutating styles definition
@@ -28,14  28,8 @@ const editorStackStyle: IStackStyles = {
   },
 };
 
-export const getEditorClassNames = ({
-  isFullWidth,
-}: {
-  isFullWidth: boolean;
-  vw: number;
-  vh: number;
-}) => {
-  return mergeStyleSets({
 export const getEditorClassNames = ({ isFullWidth }: { isFullWidth: boolean }): IStackStyles =>
   mergeStyleSets({
     root: [
       {
         width: "50%",
@@ -47,15  41,12 @@ export const getEditorClassNames = ({
       },
     ],
   });
-};
 
 const App = (): JSX.Element => {
   const [isSchemaEditorOn, toggleASchemaEditorOn] = useToggle(false);
   const [isSchemaSampleDataOn, toggleSchemaSampleDataOn] = useToggle(false);
   const [schemaValue, setSchemaValue] = useState<string | undefined>(undefined);
-  const viewportContext = useViewport();
-  // const [containerCSS, setContainerCSS] = useState<IStackStyles>();
-  const { vh, vw } = viewportContext;
   const BarRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     if (!isSchemaEditorOn && isSchemaSampleDataOn) {
@@ -68,14  59,9 @@ const App = (): JSX.Element => {
   const getSchemaValue = () =>
     isSchemaSampleDataOn && !schemaValue ? SampleData.schema : schemaValue;
 
-  // useEffect(() => {
-  //   const vhTOpx = containerStyle(vh);
-  //   setContainerCSS(vhTOpx);
-  // }, [vh]);
-
   return (
-    <ViewportProvider>
-      <Stack styles={containerStyle}>
     <Stack styles={containerStyle}>
       <div ref={BarRef}>
         <Stack.Item>
           <AppBar />
           <CommandBar
@@ -85,53  71,41 @@ const App = (): JSX.Element => {
             onSchemaSampleDataOn={toggleSchemaSampleDataOn}
           />
         </Stack.Item>
-        <Stack wrap horizontal grow styles={editorStackStyle}>
-          {isSchemaEditorOn && (
-            <Stack.Item
-              styles={getEditorClassNames({
-                isFullWidth: !isSchemaEditorOn,
-                vh,
-                vw,
-              })}
-            >
-              <JSONEditor
-                title={Editor.Schema}
-                path="schema.json"
-                defaultValue={
-                  isSchemaSampleDataOn ? SampleData.schema : undefined
-                }
-                onChange={handleSchemaValueChange}
-              />
-            </Stack.Item>
-          )}
       </div>
       <Stack wrap horizontal grow styles={editorStackStyle}>
         {isSchemaEditorOn && (
           <Stack.Item
             styles={getEditorClassNames({
               isFullWidth: !isSchemaEditorOn,
-              vh,
-              vw,
             })}
           >
             <JSONEditor
-              title={isSchemaEditorOn ? Editor.InputJson : ""}
-              path="input_json.json"
-              schemaValue={getSchemaValue()}
-              defaultValue={
-                isSchemaSampleDataOn ? SampleData.jsonInput : undefined
-              }
               title={Editor.Schema}
               path="schema.json"
               defaultValue={isSchemaSampleDataOn ? SampleData.schema : undefined}
               isSchemaSampleDataOn={isSchemaSampleDataOn}
               onChange={handleSchemaValueChange}
             />
           </Stack.Item>
-        </Stack>
         )}
         <Stack.Item
           styles={getEditorClassNames({
             isFullWidth: !isSchemaEditorOn,
           })}
         >
           <JSONEditor
             title={isSchemaEditorOn ? Editor.InputJson : ""}
             path="input_json.json"
             schemaValue={getSchemaValue()}
             isSchemaSampleDataOn={isSchemaSampleDataOn}
             defaultValue={isSchemaSampleDataOn ? SampleData.jsonInput : undefined}
           />
         </Stack.Item>
       </Stack>
-    </ViewportProvider>
     </Stack>
   );
 };
 
-const AppContainer = (): JSX.Element => {
-  return (
-    <ViewportProvider>
-      <App />
-    </ViewportProvider>
-  );
-};
 const AppContainer = (): JSX.Element => <App />;
 
 export default AppContainer;
diff --git a/src/assets/jsonlint/utils.tsx b/src/assets/jsonlint/utils.tsx
@@ -18,10  18,7 @@ export const escapeUnicodeChars = (
 ): string =>
   // note: we leave surrogate pairs as two individual chars,
   // as JSON doesn't interpret them as a single unicode char.
-  text.replace(
-    /[\u007F-\uFFFF]/g,
-    (c) => `\\u${`0000${c.charCodeAt(0).toString(16)}`.slice(-4)}`
-  );
   text.replace(/[\u007F-\uFFFF]/g, (c) => `\\u${`0000${c.charCodeAt(0).toString(16)}`.slice(-4)}`);
 
 /**
  * Parse JSON using the parser built-in in the browser.

diff --git a/src/assets/jsonlint/validation.ts b/src/assets/jsonlint/validation.ts
@@ -50,19  50,13 @@ interface ValidateSchemaArgs {
 
 type ValidateSchema = ImproveSchemaError[] | undefined;
 
-const validateSchema = ({
-  schema,
-  json,
-}: ValidateSchemaArgs): ValidateSchema => {
 const validateSchema = ({ schema, json }: ValidateSchemaArgs): ValidateSchema => {
   if (schema) {
     const validator = ajv.compile(schema);
     const isValid = validator(json);
     if (!isValid) {
       const { errors } = validator;
-      return (
-        (errors && errors.map((error) => improveSchemaError(error))) ||
-        undefined
-      );
       return (errors && errors.map((error) => improveSchemaError(error))) || undefined;
     }
   }
   return undefined;
@@ -98,14  92,9 @@ interface ValidateJsonArgs {
   schema?: Record<string, unknown>;
 }
 
-export type ValidationJson =
-  | (ImproveSchemaError | ImproveParseError)[]
-  | undefined;
 export type ValidationJson = (ImproveSchemaError | ImproveParseError)[] | undefined;
 
-export const validateJson = ({
-  jsonString,
-  schema,
-}: ValidateJsonArgs): ValidationJson => {
 export const validateJson = ({ jsonString, schema }: ValidateJsonArgs): ValidationJson => {
   try {
     const json = parseString(jsonString);
     // execute JSON schema validation (ajv)

diff --git a/src/components/json-editor/components/error-message-bar/error-message-bar.tsx b/src/components/json-editor/components/error-message-bar/error-message-bar.tsx
@@ -33,10  33,7 @@ const headerStyle = {
   },
 };
 
-const onRenderDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (
-  props,
-  defaultRender
-) => {
 const onRenderDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (props, defaultRender) => {
   if (!props) return null;
   return (
     <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
@@ -48,9  45,7 @@ const onRenderDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (
   );
 };
 
-export const ErrorMessageBar: React.FC<ErrorMessageBarProps> = ({
-  errors,
-}): JSX.Element => {
 export const ErrorMessageBar: React.FC<ErrorMessageBarProps> = ({ errors }): JSX.Element => {
   const items = errors.map((error) => ({
     key: `error-${uuid()}`,
     problems: error,
@@ -68,10  63,7 @@ export const ErrorMessageBar: React.FC<ErrorMessageBarProps> = ({
   ];
 
   return (
-    <ScrollablePane
-      scrollbarVisibility={ScrollbarVisibility.auto}
-      className={classNames.wrapper}
-    >
     <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto} className={classNames.wrapper}>
       <DetailsList
         compact
         items={items}

diff --git a/src/components/json-editor/components/tool-bar/tool-bar.tsx b/src/components/json-editor/components/tool-bar/tool-bar.tsx
@@ -48,11  48,7 @@ export const FileUploader: React.FC<FileUploaderProps> = ({ onFileHandle }) => {
 
   return (
     <>
-      <CommandButton
-        iconProps={uploadIcon}
-        text="Upload"
-        onClick={handleUploadClick}
-      />
       <CommandButton iconProps={uploadIcon} text="Upload" onClick={handleUploadClick} />
       <input
         ref={inputFileRef}
         style={{ display: "none" }}

diff --git a/src/components/json-editor/json-editor.tsx b/src/components/json-editor/json-editor.tsx
@@ -1,12  1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import { Stack, IStackStyles } from "@fluentui/react";
-import Editor, {
-  useMonaco,
-  BeforeMount,
-  OnMount,
-  OnValidate,
-} from "@monaco-editor/react";
 import Editor, { useMonaco, BeforeMount, OnMount, OnValidate } from "@monaco-editor/react";
 import dirtyJson from "dirty-json";
 import * as Monaco from "monaco-editor/esm/vs/editor/editor.api";
 
@@ -24,7  19,7 @@ import {
 
 const stackStyles: IStackStyles = {
   root: {
-    height: "100%",
     height: "inherit",
     borderTop: BorderLine,
     borderRight: BorderLine,
     borderBottom: BorderLine,
@@ -36,6  31,7 @@ interface JSONEditorProps {
   schemaValue?: string;
   title?: string;
   path?: string;
   isSchemaSampleDataOn: boolean;
   onChange?: (value: string) => void;
 }
 
@@ -48,6  44,7 @@ export const JSONEditor: React.FC<JSONEditorProps> = ({
   schemaValue,
   title,
   path = "",
   isSchemaSampleDataOn,
   onChange,
 }): JSX.Element => {
   const monaco = useMonaco();
@@ -136,6  133,10 @@ export const JSONEditor: React.FC<JSONEditorProps> = ({
     handleJsonSchemasUpdate();
   }, [schemaValue, handleJsonSchemasUpdate]);
 
   useEffect(() => {
     updateEditorLayout();
   }, [isSchemaSampleDataOn, updateEditorLayout]);
 
   useEffect(() => {
     isAutoPrettifyOn && handleEditorPrettify();
   }, [isAutoPrettifyOn, handleEditorPrettify]);
@@ -184,8  185,7 @@ export const JSONEditor: React.FC<JSONEditorProps> = ({
     const editor = editorRef.current;
     const value = editor && editor.getValue();
     const fixedValue = value && dirtyJson.parse(value);
-    const formattedValue =
-      fixedValue && prettifyJsonString(JSON.stringify(fixedValue));
     const formattedValue = fixedValue && prettifyJsonString(JSON.stringify(fixedValue));
     editor && editor.setValue(formattedValue);
   };
 

diff --git a/src/components/json-editor/utils/__test__/file.test.tsx b/src/components/json-editor/utils/__test__/file.test.tsx
@@ -9,12  9,7 @@ interface MockButtonProps {
   onClick: () => void;
 }
 const MockButton: React.FC<MockButtonProps> = ({ onClick }) => (
-  <button
-    type="button"
-    data-testid="mock-button"
-    aria-label="download"
-    onClick={onClick}
-  />
   <button type="button" data-testid="mock-button" aria-label="download" onClick={onClick} />
 );
 
 describe("downloadJsonFile", () => {
@@ -34,9  29,7 @@ describe("downloadJsonFile", () => {
 
   test("should download json file when button is clicked", () => {
     const handleDownloadClick = () => downloadJsonFile(validFormattedJsonInput);
-    const { getByTestId } = render(
-      <MockButton onClick={handleDownloadClick} />
-    );
     const { getByTestId } = render(<MockButton onClick={handleDownloadClick} />);
     const button = getByTestId("mock-button");
     button.click();
     expect(window.URL.createObjectURL).toHaveBeenCalledTimes(1);

diff --git a/src/components/json-editor/utils/json-string.tsx b/src/components/json-editor/utils/json-string.tsx
@@ -20,9  20,7 @@ export const prettifyJsonString = (jsonString: string): string => {
   }
 };
 
-export const parseJsonSchemaString = (
-  jsonString: string
-): Record<string, unknown> => {
 export const parseJsonSchemaString = (jsonString: string): Record<string, unknown> => {
   try {
     return JSON.parse(jsonString);
   } catch (err) {

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -1,2  1 @@
 export * from "./use-toggle";
-export * from "./use-viewport";
Original file line number	Diff line number	Diff line change
		@@ -1,2 1 @@
		export * from "./use-toggle";
		export * from "./use-viewport";