Break stuff but add useReducer for settings

plugins/circleci/src/components/Store/Store.tsx

@@ -13,28 +13,77 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { FC } from 'react';
-import { Provider, useDispatch } from 'react-redux';
+import React, { FC, useReducer, Dispatch } from 'react';
+// import { Provider, useDispatch } from 'react-redux';
 
-import store, { Dispatch } from '../../state/store';
+// import store from '../../state/store';
+import { circleCIApiRef } from '../../api';
 
-const RehydrateSettings = () => {
-  const dispatch: Dispatch = useDispatch();
+// const RehydrateSettings = () => {
+//   const dispatch: Dispatch = useDispatch();
 
-  React.useEffect(() => {
-    dispatch.settings.rehydrate();
-  }, []);
-  return null;
+//   React.useEffect(() => {
+//     dispatch.settings.rehydrate();
+//   }, []);
+//   return null;
+// };
+
+export const SettingsContext = React.createContext<
+  [RootState, Dispatch<Action>]
+>([] as any);
+
+type SettingsState = {
+  owner: string;
+  repo: string;
+  token: string;
+};
+
+export const STORAGE_KEY = `${circleCIApiRef.id}.settings`;
+
+type RootState = {
+  settings: SettingsState;
+};
+
+const initialState = {
+  settings: {
+    owner: '',
+    repo: '',
+    token: '',
+  },
+};
+
+type Action = {
+  type: 'setCredentials';
+  payload: {
+    repo: string;
+    owner: string;
+    token: string;
+  };
+};
+
+const reducer = (state: RootState, action: Action): RootState => {
+  switch (action.type) {
+    case 'setCredentials':
+      return {
+        ...state,
+        settings: { ...state.settings, ...action.payload },
+      };
+    default:
+      return state;
+  }
 };
 
 export const Store: FC = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
   return (
-    <Provider store={store}>
+    <SettingsContext.Provider value={[state, dispatch]}>
+      {/* <Provider store={store}> */}
       <div>
-        <RehydrateSettings />
+        {/* <RehydrateSettings /> */}
         {children}
       </div>
-    </Provider>
+      {/* </Provider> */}
+    </SettingsContext.Provider>
   );
 };
 

plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx

@@ -13,8 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import React, { useState, useContext, useEffect } from 'react';
 import {
   Button,
   TextField,
@@ -28,22 +27,68 @@ import { Alert } from '@material-ui/lab';
 import { InfoCard, Content } from '@backstage/core';
 import { Layout } from '../../components/Layout';
 import { PluginHeader } from '../../components/PluginHeader';
-import { SettingsState } from '../../state/models/settings';
-import { iRootState, Dispatch } from '../../state/store';
-import { withStore } from '../../components/Store';
+// import { SettingsState } from '../../state/models/settings';
+// import { iRootState, Dispatch } from '../../state/store';
+import {
+  withStore,
+  SettingsContext,
+  STORAGE_KEY,
+} from '../../components/Store';
 
 const SettingsPage = () => {
-  const {
-    token: tokenFromStore,
-    owner: ownerFromStore,
-    repo: repoFromStore,
-  } = useSelector((state: iRootState): SettingsState => state.settings);
+  // const {
+  //   token: tokenFromStore,
+  //   owner: ownerFromStore,
+  //   repo: repoFromStore,
+  // } = useSelector((state: iRootState): SettingsState => state.settings);
+
+  const [
+    {
+      settings: {
+        repo: repoFromStore,
+        owner: ownerFromStore,
+        token: tokenFromStore,
+      },
+      settings,
+    },
+    dispatch,
+  ] = useContext(SettingsContext);
+
+  const rehydrate = () => {
+    try {
+      const stateFromStorage = JSON.parse(sessionStorage.getItem(STORAGE_KEY)!);
+      if (
+        stateFromStorage &&
+        Object.keys(stateFromStorage).some(
+          (k) => (settings as any)[k] !== stateFromStorage[k],
+        )
+      )
+        dispatch({
+          type: 'setCredentials',
+          payload: stateFromStorage,
+        });
+    } catch (e) {}
+  };
+  useEffect(() => {
+    rehydrate();
+  }, []);
 
   const [token, setToken] = React.useState(() => tokenFromStore);
   const [owner, setOwner] = React.useState(() => ownerFromStore);
   const [repo, setRepo] = React.useState(() => repoFromStore);
 
-  const dispatch: Dispatch = useDispatch();
+  const persist = () => {
+    sessionStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({
+        repo,
+        owner,
+        token,
+      }),
+    );
+  };
+
+  // const dispatch: Dispatch = useDispatch();
 
   React.useEffect(() => {
     if (tokenFromStore !== token) {
@@ -126,10 +171,14 @@ const SettingsPage = () => {
                       color="primary"
                       onClick={() => {
                         setSaved(true);
-                        dispatch.settings.setCredentials({
-                          owner,
-                          repo,
-                          token,
+                        persist();
+                        dispatch({
+                          type: 'setCredentials',
+                          payload: {
+                            repo: repo,
+                            owner: owner,
+                            token: token,
+                          },
                         });
                       }}
                     >