From 7f00512d93771ba10a653b98359b185e8d2397ec Mon Sep 17 00:00:00 2001 From: Nikita Nek Dudnik Date: Thu, 7 May 2020 14:31:21 +0200 Subject: [PATCH] Add Rematch --- plugins/circleci/package.json | 3 + plugins/circleci/src/components/App.tsx | 42 +++--------- .../src/pages/SettingsPage/SettingsPage.tsx | 67 ++++++++++--------- plugins/circleci/src/state/models/index.ts | 8 +++ plugins/circleci/src/state/models/settings.ts | 36 ++++++++++ plugins/circleci/src/state/store.ts | 12 ++++ yarn.lock | 29 +++++++- 7 files changed, 130 insertions(+), 67 deletions(-) create mode 100644 plugins/circleci/src/state/models/index.ts create mode 100644 plugins/circleci/src/state/models/settings.ts create mode 100644 plugins/circleci/src/state/store.ts diff --git a/plugins/circleci/package.json b/plugins/circleci/package.json index 12afc5e8ff..f2c94f06e1 100644 --- a/plugins/circleci/package.json +++ b/plugins/circleci/package.json @@ -28,11 +28,14 @@ "@material-ui/core": "^4.9.1", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.45", + "@rematch/core": "^1.4.0", "@types/react-lazylog": "^4.5.0", + "@types/react-redux": "^7.1.8", "circleci-api": "^4.0.0", "react": "16.13.1", "react-dom": "16.13.1", "react-lazylog": "^4.5.2", + "react-redux": "^7.2.0", "react-router": "^5.1.2", "react-use": "^13.0.0" }, diff --git a/plugins/circleci/src/components/App.tsx b/plugins/circleci/src/components/App.tsx index db826b26d3..2dc92ea574 100644 --- a/plugins/circleci/src/components/App.tsx +++ b/plugins/circleci/src/components/App.tsx @@ -1,41 +1,17 @@ import { Route } from 'react-router'; import React from 'react'; -import { BuildsPage } from 'pages/BuildsPage'; -import { DetailedViewPage } from 'pages/DetailedViewPage'; +// import { BuildsPage } from 'pages/BuildsPage'; +// import { DetailedViewPage } from 'pages/DetailedViewPage'; import { SettingsPage } from 'pages/SettingsPage'; - -type AppState = { - token: string; - owner: string; - repo: string; -}; - -type AppAction = - | { type: 'setToken'; payload: string } - | { type: 'setOwner'; payload: string } - | { type: 'setRepo'; payload: string }; - -const initialState: AppState = { token: '', owner: '', repo: '' }; - -function reducer(state: AppState, action: AppAction) { - switch (action.type) { - case 'setToken': - return { count: state.count + 1 }; - case 'decrement': - return { count: state.count - 1 }; - default: - throw new Error(); - } -} - -const Context = React.createContext(42); +import { Provider } from 'react-redux'; +import store from 'state/store'; export const App = () => { return ( - - - - - + + {/* + */} + + ); }; diff --git a/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx b/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx index 0605409ad1..b4433ec2a6 100644 --- a/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx +++ b/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx @@ -1,9 +1,8 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; +import { useSelector, useDispatch } from 'react-redux'; import { Button, TextField, List, Grid, ListItem } from '@material-ui/core'; -import { circleCIApiRef } from 'api'; import { InfoCard, - useApi, Content, ContentHeader, SupportButton, @@ -12,30 +11,35 @@ import { } from '@backstage/core'; import { Link as RouterLink } from 'react-router-dom'; import { Layout } from 'components/Layout'; +import { SettingsState } from 'state/models/settings'; +import { iRootState } from 'state/store'; +import { Dispatch } from '../../state/store'; export const SettingsPage = () => { - const api = useApi(circleCIApiRef); - const apiGitInfo = api.options.vcs; - const [authed, setAuthed] = React.useState(api.authed); - const [token, setToken] = React.useState(api.token); + const { token, owner, repo } = useSelector( + (state: iRootState): SettingsState => state.settings, + ); - React.useEffect(() => { - api - .restorePersistedSettings() - .then(() => api.validateToken()) - .then(() => setAuthed(true)) - .catch(() => setAuthed(false)); - }, []); + const dispatch: Dispatch = useDispatch(); - const [owner, setOwner] = useState(''); - const [repo, setRepo] = useState(''); + // const api = useApi(circleCIApiRef); + // const apiGitInfo = api.options.vcs; + const [authed] = React.useState(false); - useEffect(() => { - if (apiGitInfo && apiGitInfo.owner !== owner && apiGitInfo.owner) - setOwner(apiGitInfo.owner); - if (apiGitInfo && apiGitInfo.repo !== repo && apiGitInfo.repo) - setRepo(apiGitInfo.repo); - }, [apiGitInfo]); + // React.useEffect(() => { + // api + // .restorePersistedSettings() + // .then(() => api.validateToken()) + // .then(() => setAuthed(true)) + // .catch(() => setAuthed(false)); + // }, []); + + // useEffect(() => { + // if (apiGitInfo && apiGitInfo.owner !== owner && apiGitInfo.owner) + // setOwner(apiGitInfo.owner); + // if (apiGitInfo && apiGitInfo.repo !== repo && apiGitInfo.repo) + // setRepo(apiGitInfo.repo); + // }, [apiGitInfo]); return ( @@ -59,10 +63,9 @@ export const SettingsPage = () => { setToken(e.target.value)} + onChange={e => dispatch.settings.setToken(e.target.value)} /> @@ -70,7 +73,7 @@ export const SettingsPage = () => { name="circleci-owner" label="Owner" value={owner} - onChange={(e) => setOwner(e.target.value)} + // onChange={(e) => setOwner(e.target.value)} /> @@ -78,7 +81,7 @@ export const SettingsPage = () => { name="circleci-repo" label="Repo" value={repo} - onChange={(e) => setRepo(e.target.value)} + // onChange={(e) => setRepo(e.target.value)} /> @@ -87,12 +90,12 @@ export const SettingsPage = () => { variant="outlined" color="primary" onClick={async () => { - api.setVCSOptions({ owner, repo }); - api.setToken(token); - api - .validateToken() - .then(() => setAuthed(true)) - .catch(() => setAuthed(false)); + // api.setVCSOptions({ owner, repo }); + // api.setToken(token); + // api + // .validateToken() + // .then(() => setAuthed(true)) + // .catch(() => setAuthed(false)); }} > Save credentials diff --git a/plugins/circleci/src/state/models/index.ts b/plugins/circleci/src/state/models/index.ts new file mode 100644 index 0000000000..c02f31a6e1 --- /dev/null +++ b/plugins/circleci/src/state/models/index.ts @@ -0,0 +1,8 @@ +import { settings } from './settings'; + +// no need to extend from Models +export interface RootModel { + settings: typeof settings; +} + +export const models: RootModel = { settings }; diff --git a/plugins/circleci/src/state/models/settings.ts b/plugins/circleci/src/state/models/settings.ts new file mode 100644 index 0000000000..02c78d0f73 --- /dev/null +++ b/plugins/circleci/src/state/models/settings.ts @@ -0,0 +1,36 @@ +// import { Dispatch } from '../store' + +export type SettingsState = { + token: string; + owner: string; + repo: string; +}; + +export const settings = { + state: { + token: '!!!', + owner: '', + repo: '', + }, // initial state + reducers: { + // handle state changes with pure functions + setToken(state: SettingsState, payload: string) { + return { ...state, token: payload }; + }, + setOwner(state: SettingsState, payload: string) { + return { ...state, owner: payload }; + }, + setRepo(state: SettingsState, payload: string) { + return { ...state, repo: payload }; + }, + }, + // effects: + // (dispatch: Dispatch) => ({ + // // handle state changes with impure functions. + // // use async/await for async actions + // // async incrementAsync(payload, rootState) { + // // await new Promise(resolve => setTimeout(resolve, 1000)) + // // dispatch.count.increment(payload) + // // }, + // }), +}; diff --git a/plugins/circleci/src/state/store.ts b/plugins/circleci/src/state/store.ts new file mode 100644 index 0000000000..c06c44d8e6 --- /dev/null +++ b/plugins/circleci/src/state/store.ts @@ -0,0 +1,12 @@ +import { init, RematchRootState, RematchDispatch } from '@rematch/core'; +import { models, RootModel } from './models'; + +const store = init({ + models, +}); + +export type Store = typeof store; +export type Dispatch = RematchDispatch; +export type iRootState = RematchRootState; + +export default store; diff --git a/yarn.lock b/yarn.lock index e063d47f5a..e3244ea127 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2740,6 +2740,13 @@ prop-types "^15.6.1" react-lifecycles-compat "^3.0.4" +"@rematch/core@^1.4.0": + version "1.4.0" + resolved "https://registry.npmjs.org/@rematch/core/-/core-1.4.0.tgz#686ce814e1cf125029c5e9fba23ef3ab7c3eb2a7" + integrity sha512-1zy9cTYxbvDHP0PwIL1QqkwagCEnqA0uWMmPf8v2BYvLi2OsxIfX1xiV+vCP3sdJAjjZ0b9+IbSmj0DL2MEgLQ== + dependencies: + redux "^4.0.5" + "@rollup/plugin-commonjs@^11.0.2": version "11.0.2" resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.0.2.tgz#837cc6950752327cb90177b608f0928a4e60b582" @@ -4047,6 +4054,14 @@ resolved "https://registry.npmjs.org/@types/history/-/history-4.7.5.tgz#527d20ef68571a4af02ed74350164e7a67544860" integrity sha512-wLD/Aq2VggCJXSjxEwrMafIP51Z+13H78nXIX0ABEuIGhmB5sNGbR113MOKo+yfw+RDo1ZU3DM6yfnnRF/+ouw== +"@types/hoist-non-react-statics@^3.3.0": + version "3.3.1" + resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/html-minifier@*": version "3.5.3" resolved "https://registry.npmjs.org/@types/html-minifier/-/html-minifier-3.5.3.tgz#5276845138db2cebc54c789e0aaf87621a21e84f" @@ -4290,6 +4305,16 @@ "@types/react" "*" immutable ">=3.8.2" +"@types/react-redux@^7.1.8": + version "7.1.8" + resolved "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.8.tgz#3631feb559f7858d6ad9eea1d6ef41fa64fe7205" + integrity sha512-kpplH7Wg2SYU00sZVT98WBN0ou6QKrYcShRaW+5Vpe5l7bluKWJbWmAL+ieiso07OQzpcP5i1PeY3690640ZWg== + dependencies: + "@types/hoist-non-react-statics" "^3.3.0" + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + redux "^4.0.0" + "@types/react-router-dom@^5.1.3": version "5.1.3" resolved "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.3.tgz#b5d28e7850bd274d944c0fbbe5d57e6b30d71196" @@ -17510,7 +17535,7 @@ react-popper@^1.3.6: typed-styles "^0.0.7" warning "^4.0.2" -react-redux@^7.0.3: +react-redux@^7.0.3, react-redux@^7.2.0: version "7.2.0" resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d" integrity sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA== @@ -17976,7 +18001,7 @@ redeyed@~2.1.0: dependencies: esprima "~4.0.0" -redux@^4.0.1: +redux@^4.0.0, redux@^4.0.1, redux@^4.0.5: version "4.0.5" resolved "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f" integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==