Move settings effects into a hook

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

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState } from 'react';
 import {
   Button,
   TextField,
@@ -27,69 +27,19 @@ 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,
-  SettingsContext,
-  STORAGE_KEY,
-} from '../../components/Store';
+import { withStore } from '../../components/Store';
+import { useSettings } from './settings';
 
 const SettingsPage = () => {
-  // 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();
-  }, []);
+    { repo: repoFromStore, owner: ownerFromStore, token: tokenFromStore },
+    { saveSettings },
+  ] = useSettings();
 
   const [token, setToken] = React.useState(() => tokenFromStore);
   const [owner, setOwner] = React.useState(() => ownerFromStore);
   const [repo, setRepo] = React.useState(() => repoFromStore);
 
-  const persist = () => {
-    sessionStorage.setItem(
-      STORAGE_KEY,
-      JSON.stringify({
-        repo,
-        owner,
-        token,
-      }),
-    );
-  };
-
-  // const dispatch: Dispatch = useDispatch();
-
   React.useEffect(() => {
     if (tokenFromStore !== token) {
       setToken(tokenFromStore);
@@ -171,15 +121,7 @@ const SettingsPage = () => {
                       color="primary"
                       onClick={() => {
                         setSaved(true);
-                        persist();
-                        dispatch({
-                          type: 'setCredentials',
-                          payload: {
-                            repo: repo,
-                            owner: owner,
-                            token: token,
-                          },
-                        });
+                        saveSettings({ repo, owner, token });
                       }}
                     >
                       Save credentials

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

@@ -0,0 +1,72 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useContext, useEffect } from 'react';
+import { SettingsContext, STORAGE_KEY } from '../../components/Store';
+import { useApi, errorApiRef } from '@backstage/core';
+
+export type SettingsDispatch = {
+  saveSettings: (settings: SettingsState) => void;
+};
+
+export type SettingsState = {
+  token: string;
+  owner: string;
+  repo: string;
+};
+
+export function useSettings(): [SettingsState, SettingsDispatch] {
+  const [{ settings }, dispatch] = useContext(SettingsContext);
+
+  const errorApi = useApi(errorApiRef);
+
+  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 (error) {
+      errorApi.post(error);
+    }
+  };
+  useEffect(() => {
+    rehydrate();
+  }, []);
+
+  const persist = (state: SettingsState) => {
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  };
+
+  return [
+    settings,
+    {
+      saveSettings: (state: SettingsState) => {
+        persist(state);
+        dispatch({
+          type: 'setCredentials',
+          payload: state,
+        });
+      },
+    },
+  ];
+}

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

@@ -18,12 +18,6 @@ import { circleCIApiRef } from '../../api';
 
 const STORAGE_KEY = `${circleCIApiRef.id}.settings`;
 
-export type SettingsState = {
-  token: string;
-  owner: string;
-  repo: string;
-};
-
 export const settings = {
   state: {
     token: '',