From 00efbfe87ef481b66b4e8b4570344b77cb5c77f5 Mon Sep 17 00:00:00 2001
From: Ivan Shmidt <bahoc47@gmail.com>
Date: Thu, 30 Apr 2020 16:37:07 +0200
Subject: [PATCH] feat: save token to session storage and read from it

---
 .../src/components/LoginCard/LoginCard.tsx    | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/plugins/circleci/src/components/LoginCard/LoginCard.tsx b/plugins/circleci/src/components/LoginCard/LoginCard.tsx
index 09c0514064..806f218cf9 100644
--- a/plugins/circleci/src/components/LoginCard/LoginCard.tsx
+++ b/plugins/circleci/src/components/LoginCard/LoginCard.tsx
@@ -10,10 +10,36 @@ import { Person as PersonIcon } from '@material-ui/icons';
 import { InfoCard, useApi } from '@backstage/core';
 import { circleCIApiRef } from 'api';
 
+const useSessionStorage = (key: string): [string, (value: string) => void] => {
+  const [value, setter] = React.useState(sessionStorage.getItem(key) ?? '');
+  const setValue = (newValue: string) => {
+    sessionStorage.setItem(key, newValue);
+    setter(sessionStorage.getItem(key) ?? '');
+  };
+
+  React.useEffect(() => {
+    const storageChangeHandle = (e: StorageEvent) => {
+      if (e.storageArea !== sessionStorage) return;
+      if (e.key !== key) return;
+      if (e.newValue !== e.oldValue) {
+        setter(e.newValue ?? '');
+      }
+    };
+    window.addEventListener('storage', storageChangeHandle);
+    return () => window.removeEventListener('storage', storageChangeHandle);
+  }, [key, setter]);
+
+  return [value, setValue];
+};
 export const LoginCard = () => {
-  const [token, setToken] = React.useState('');
+  const [token, setToken] = useSessionStorage(circleCIApiRef.id);
   const api = useApi(circleCIApiRef);
 
+  React.useEffect(() => {
+    if (token && token !== '') {
+      api.authenticate(token);
+    }
+  }, []);
   return (
     <InfoCard>
       <Typography variant="h6">