From f201471816ef813599b20d80755b61a94b0f1d06 Mon Sep 17 00:00:00 2001 From: toncic Date: Sun, 23 Aug 2020 21:44:54 +0300 Subject: [PATCH 1/2] Introducing mobx library for state managing. --- package.json | 2 ++ src/App.tsx | 36 +++++++++++++++------------------- src/State/AppState.ts | 45 +++++++++++++++++++++++++++++++++++++++++++ tsconfig.json | 1 + yarn.lock | 17 ++++++++++++++++ 5 files changed, 81 insertions(+), 20 deletions(-) create mode 100644 src/State/AppState.ts diff --git a/package.json b/package.json index 9fb30fa..072758c 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,8 @@ "@types/react-dom": "^16.9.0", "@types/react-json-tree": "^0.6.11", "jsonpath-plus": "^4.0.0", + "mobx": "^5.15.6", + "mobx-react": "^6.2.5", "react": "^16.13.1", "react-dom": "^16.13.1", "react-dropzone": "^11.0.3", diff --git a/src/App.tsx b/src/App.tsx index 4e4ba39..105f327 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,8 @@ import JsonPathInputField from './Components/JsonPathInputField'; import LoadingComponent from './Components/LoadingComponent'; import Typography from "@material-ui/core/Typography"; import { makeStyles } from '@material-ui/core/styles'; -import exampleJson from './exampleJson.json'; +import { observer } from 'mobx-react'; +import { AppState } from './State/AppState'; const { JSONPath } = require('jsonpath-plus'); const useStyles = makeStyles((theme) => ({ @@ -25,11 +26,6 @@ const useStyles = makeStyles((theme) => ({ })); function App() { - const [jsonToParse, setJsonToParse] = useState<{} | any>(exampleJson); - const [jsonPathExpression, setJsonPathExpression] = useState(''); - const [fullJson, setFullJson] = useState<{}>(exampleJson); - const [isFiltering, setFiltering] = useState(false); - function onDrop(acceptedFiles: File[]): void { const fileReader = new FileReader(); fileReader.readAsText(acceptedFiles[0]) @@ -37,11 +33,11 @@ function App() { const fileContent: any = fileReader.result; try { const jsonObject = JSON.parse(fileContent); - setJsonToParse(jsonObject); - setFullJson(jsonObject); - setJsonPathExpression(''); + AppState.setJsonObjectToParse(jsonObject) + AppState.setFullJsonObject(jsonObject) + AppState.resetJsonPathExpresion(); } catch (error) { - alert('Oh no, it seems that your file does not contain proper json structure. Please check your file and try again'); + alert('Oh no, it seems that your file does not contain a proper JSON structure. Please check your file and try again'); } } } @@ -49,20 +45,20 @@ function App() { const { getRootProps, getInputProps } = useDropzone({ onDrop, accept: '.json' }); function filterJson(inputEvent: ChangeEvent): void { - setJsonPathExpression(inputEvent.target.value); + AppState.setJsonPathExpression(inputEvent.target.value); let jsonPath = inputEvent.target.value; if (jsonPath) { - setFiltering(true); + AppState.setIsFiltering(true); const filteredJson = JSONPath({ - json: fullJson, + json: AppState.fullJsonObject, path: jsonPath, }); - setJsonToParse(filteredJson); - setFiltering(false); + AppState.setJsonObjectToParse(filteredJson); + AppState.setIsFiltering(false); return; } - setJsonToParse(fullJson); + AppState.setJsonObjectToParse(AppState.fullJsonObject); } const classes = useStyles(); @@ -79,16 +75,16 @@ function App() {
- {isFiltering ? + {AppState.isFiltering ? : ( <> Use this example or upload your JSON file - + ) @@ -98,4 +94,4 @@ function App() { ); } -export default App; +export default observer(App) diff --git a/src/State/AppState.ts b/src/State/AppState.ts new file mode 100644 index 0000000..e1f93eb --- /dev/null +++ b/src/State/AppState.ts @@ -0,0 +1,45 @@ +import { observable, action, computed } from 'mobx'; +import exampleJson from '../exampleJson.json'; + + +class ApplicationState { + + @observable + jsonObjectToParse: Object = exampleJson; + + @observable + fullJsonObject: Object = exampleJson; + + @observable + isFiltering: boolean = false; + + @observable + jsonPathExpression: string = ''; + + @action + setJsonObjectToParse(newJsonObject: Object): void { + this.jsonObjectToParse = newJsonObject; + } + + @action + setFullJsonObject(newJsonObject: Object): void { + this.fullJsonObject = newJsonObject; + } + + @action + setIsFiltering(isFiltering: boolean): void { + this.isFiltering = isFiltering; + } + + @action + setJsonPathExpression(expression: string): void { + this.jsonPathExpression = expression; + } + + @action + resetJsonPathExpresion(): void { + this.jsonPathExpression = ''; + } +} + +export const AppState = new ApplicationState(); \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index f6c9e81..7d162d4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,6 +18,7 @@ "isolatedModules": true, "noEmit": true, "jsx": "react", + "experimentalDecorators": true, "plugins": [ { "name": "typescript-tslint-plugin", diff --git a/yarn.lock b/yarn.lock index 3e364a1..c4a4746 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7066,6 +7066,23 @@ mkdirp@^0.5.5: dependencies: minimist "^1.2.5" +mobx-react-lite@>=2.0.6: + version "2.0.7" + resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-2.0.7.tgz#1bfb3b4272668e288047cf0c7940b14e91cba284" + integrity sha512-YKAh2gThC6WooPnVZCoC+rV1bODAKFwkhxikzgH18wpBjkgTkkR9Sb0IesQAH5QrAEH/JQVmy47jcpQkf2Au3Q== + +mobx-react@^6.2.5: + version "6.2.5" + resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-6.2.5.tgz#9020a17b79cc6dc3d124ad89ab36eb9ea540a45b" + integrity sha512-LxtXXW0GkOAO6VOIg2m/6WL6ZuKlzOWwESIFdrWelI0ZMIvtKCMZVUuulcO5GAWSDsH0ApaMkGLoaPqKjzyziQ== + dependencies: + mobx-react-lite ">=2.0.6" + +mobx@^5.15.6: + version "5.15.6" + resolved "https://registry.yarnpkg.com/mobx/-/mobx-5.15.6.tgz#24750af56f87bcf9c3cf82ece4c79eb91bb71968" + integrity sha512-U5nnx3UNdRkUjntpwzO060VWifGVx/JZeu/aMw4y28dTjDNjoY3vNKs6tFNm7z1qIfcPInsd9L9HIm8H0zTDqg== + mock-require@^3.0.3: version "3.0.3" resolved "https://registry.yarnpkg.com/mock-require/-/mock-require-3.0.3.tgz#ccd544d9eae81dd576b3f219f69ec867318a1946" From 09facb95d81c8cb2ee4e259a1736f16469ed107e Mon Sep 17 00:00:00 2001 From: toncic Date: Sun, 23 Aug 2020 22:00:09 +0300 Subject: [PATCH 2/2] Fixing CS issues. --- src/App.tsx | 2 +- src/State/AppState.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 105f327..82514e9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useState, ChangeEvent } from 'react'; +import React, { ChangeEvent } from 'react'; import JSONTree from 'react-json-tree'; import { useDropzone } from 'react-dropzone'; import PrimaryButton from './Components/PrimaryButton'; diff --git a/src/State/AppState.ts b/src/State/AppState.ts index e1f93eb..9ca05f5 100644 --- a/src/State/AppState.ts +++ b/src/State/AppState.ts @@ -1,4 +1,4 @@ -import { observable, action, computed } from 'mobx'; +import { observable, action } from 'mobx'; import exampleJson from '../exampleJson.json';