feat: destroyed everything v2

Co-authored-by: Nikita Dudnik <nikdudnik@gmail.com>

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

@@ -6,8 +6,8 @@ import {
   Content,
   ContentHeader,
   SupportButton,
-  StatusOK,
-  StatusFailed,
+  // StatusOK,
+  // StatusFailed,
 } from '@backstage/core';
 import { Link as RouterLink } from 'react-router-dom';
 import { Layout } from 'components/Layout';
@@ -16,30 +16,35 @@ import { iRootState } from 'state/store';
 import { Dispatch } from '../../state/store';
 
 export const SettingsPage = () => {
-  const { token, owner, repo } = useSelector(
-    (state: iRootState): SettingsState => state.settings,
-  );
+  const {
+    token: tokenFromStore,
+    owner: ownerFromStore,
+    repo: repoFromStore,
+  } = useSelector((state: iRootState): SettingsState => state.settings);
 
   const dispatch: Dispatch = useDispatch();
-
   // const api = useApi(circleCIApiRef);
   // const apiGitInfo = api.options.vcs;
-  const [authed] = React.useState(false);
+  // const [authed] = React.useState(false);
+  const [token, setToken] = React.useState('');
+  const [owner, setOwner] = React.useState('');
+  const [repo, setRepo] = React.useState('');
 
-  // React.useEffect(() => {
-  //   api
-  //     .restorePersistedSettings()
-  //     .then(() => api.validateToken())
-  //     .then(() => setAuthed(true))
-  //     .catch(() => setAuthed(false));
-  // }, []);
+  React.useEffect(() => {
+    dispatch.settings.rehydrate();
+  }, []);
 
-  // useEffect(() => {
-  //   if (apiGitInfo && apiGitInfo.owner !== owner && apiGitInfo.owner)
-  //     setOwner(apiGitInfo.owner);
-  //   if (apiGitInfo && apiGitInfo.repo !== repo && apiGitInfo.repo)
-  //     setRepo(apiGitInfo.repo);
-  // }, [apiGitInfo]);
+  React.useEffect(() => {
+    if (tokenFromStore !== token) {
+      setToken(tokenFromStore);
+    }
+    if (ownerFromStore !== owner) {
+      setOwner(ownerFromStore);
+    }
+    if (repoFromStore !== repo) {
+      setRepo(repoFromStore);
+    }
+  }, [ownerFromStore, repoFromStore, tokenFromStore]);
 
   return (
     <Layout>
@@ -55,7 +60,8 @@ export const SettingsPage = () => {
             <InfoCard
               title={
                 <>
-                  Project Credentials{authed ? <StatusOK /> : <StatusFailed />}
+                  Project Credentials
+                  {/*{authed ? <StatusOK /> : <StatusFailed />} */}
                 </>
               }
             >
@@ -65,7 +71,7 @@ export const SettingsPage = () => {
                     name="circleci-token"
                     label="Token"
                     value={token}
-                    onChange={e => dispatch.settings.setToken(e.target.value)}
+                    onChange={(e) => setToken(e.target.value)}
                   />
                 </ListItem>
                 <ListItem>
@@ -73,7 +79,7 @@ export const SettingsPage = () => {
                     name="circleci-owner"
                     label="Owner"
                     value={owner}
-                    // onChange={(e) => setOwner(e.target.value)}
+                    onChange={(e) => setOwner(e.target.value)}
                   />
                 </ListItem>
                 <ListItem>
@@ -81,7 +87,7 @@ export const SettingsPage = () => {
                     name="circleci-repo"
                     label="Repo"
                     value={repo}
-                    // onChange={(e) => setRepo(e.target.value)}
+                    onChange={(e) => setRepo(e.target.value)}
                   />
                 </ListItem>
                 <ListItem>
@@ -89,14 +95,13 @@ export const SettingsPage = () => {
                     data-testid="github-auth-button"
                     variant="outlined"
                     color="primary"
-                    onClick={async () => {
-                      // api.setVCSOptions({ owner, repo });
-                      // api.setToken(token);
-                      // api
-                      //   .validateToken()
-                      //   .then(() => setAuthed(true))
-                      //   .catch(() => setAuthed(false));
-                    }}
+                    onClick={() =>
+                      dispatch.settings.setCredentialsEffect({
+                        owner,
+                        repo,
+                        token,
+                      })
+                    }
                   >
                     Save credentials
                   </Button>

plugins/circleci/src/state/models/settings.ts

@@ -1,4 +1,8 @@
-// import { Dispatch } from '../store'
+import { Dispatch } from '../store';
+import { circleCIApiRef } from '../../api';
+import { RootModel } from '.';
+
+const STORAGE_KEY = `${circleCIApiRef.id}.settings`;
 
 export type SettingsState = {
   token: string;
@@ -8,29 +12,57 @@ export type SettingsState = {
 
 export const settings = {
   state: {
-    token: '!!!',
+    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 };
+    setCredentials(state: SettingsState, payload: SettingsState) {
+      return { ...state, ...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)
-  //     // },
-  // }),
+  effects: (dispatch: Dispatch) => ({
+    setCredentialsEffect(
+      {
+        credentials,
+        doPersist = true,
+      }: { credentials: SettingsState; doPersist?: boolean },
+      state: RootModel,
+    ) {
+      const newState = { ...state.settings, ...credentials };
+
+      if (doPersist) dispatch.settings.persist(newState);
+      dispatch.settings.setCredentials(newState);
+    },
+    persist(payload: RootModel) {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(payload));
+    },
+    rehydrate(_: any, state: RootModel) {
+      try {
+        const stateFromStorage = JSON.parse(
+          sessionStorage.getItem(STORAGE_KEY)!,
+        );
+        console.log({ stateFromStorage, state });
+        console.log(Object.keys(stateFromStorage));
+        if (
+          stateFromStorage &&
+          Object.keys(stateFromStorage).some(
+            (k) => (state as any).settings[k] !== stateFromStorage[k],
+          )
+        )
+          dispatch.settings.setCredentialsEffect({
+            credentials: stateFromStorage,
+            doPersist: false,
+          });
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    // 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)
+    // },
+  }),
 };