Fix token bug, improve loading and hardcode api url

client/src/App.tsx

@@ -8,6 +8,7 @@ import Participants from "./views/Participants";
 import Auth from "./views/Auth";
 import CreateGroup from "./views/CreateGroup";
 import { flatiniAuthWebsite } from "./utils/constants";
+import Loading from "./views/Loading";
 
 function App() {
   const navigate = useNavigate();
@@ -64,7 +65,6 @@ function App() {
     ) {
       navigate("/FlatView");
     } else if (url?.includes(flatiniAuthWebsite)) {
-      console.log("check", state.getAuthenticatedUser());
       state.authenticateUser();
       // if (!state.getAuthenticatedUser()) {
       //   state.authenticateUser();
@@ -93,10 +93,23 @@ function App() {
 
   useEffect(() => {
     addChromeEvents();
-    state.getGroup();
-  }, []);
 
-  if (!state.getAuthenticatedUser()) {
+    if (state.userAuthToken) {
+      state.getGroup();
+    } else {
+      const existingLocalStorage = localStorage.getItem("flatini-auth");
+
+      if (existingLocalStorage) {
+        state.setUserAuthToken(existingLocalStorage);
+      } else {
+        state.authenticateUser();
+      }
+    }
+
+    // state.getGroup();
+  }, [state.userAuthToken]);
+
+  if (!state.userAuthToken) {
     return (
       <Routes>
         <Route path="/" element={<Auth />} />
@@ -105,22 +118,24 @@ function App() {
   }
 
   if (state.isGroupLoading) {
-    return <p>loading...</p>;
+    return <Loading />;
   }
 
   if (!state.userHasGroup) {
     return (
-      <Routes>
-        <Route path="/" element={<CreateGroup />} />
-      </Routes>
+      <>
+        <Routes>
+          <Route path="/" element={<CreateGroup />} />
+        </Routes>
+      </>
     );
   }
 
   return (
     <>
+      <p>userAuthToken {state.userAuthToken}</p>
       {state.activeUrl ? (
         <Routes>
-          {/* <Route path="/" element={<Landing />} /> */}
           <Route path="/" element={<Flats />} />
           <Route path="/Settings" element={<Settings />} />
           <Route path="/FlatView" element={<FlatView />} />

client/src/FlatView.tsx

@@ -126,7 +126,6 @@ const FlatView = () => {
         activeUrl.tabId,
         activeUrl.contents,
         (title, url, price) => {
-          console.log("GET FROM RIGHTMOVE", { title, url, price });
           setActiveFlatData({
             price,
             title,

client/src/SaveDataButton.tsx

@@ -18,10 +18,7 @@ function SaveDataButton({ onClickAction }: SaveDataButtonProps) {
         const url = tab?.url || "";
         const title = tab?.title || "";
 
-        console.log("Data saved:", { url, title });
-
         const activeTab = tabs[0];
-        console.log(activeTab);
         // Send a message to the content script of the active tab
         chrome.tabs.sendMessage(
           activeTab.id || 0,

client/src/context/AppProvider.tsx

@@ -26,7 +26,8 @@ interface AppContextType {
     location: string
   ) => { location: boolean; price: boolean };
   authenticateUser: any;
-  getAuthenticatedUser: any;
+  userAuthToken: any;
+  setUserAuthToken: any;
   isGroupLoading: boolean;
   userHasGroup: any;
   setUserHasGroup: any;
@@ -67,6 +68,8 @@ const FlatProvider = (props: Props) => {
       }
     | {}
   >({});
+
+  const [userAuthToken, setUserAuthToken] = useState<string | null>(null);
   // Renders dashboard screens
   const [isGroupLoading, setIsGroupLoading] = useState<boolean>(true);
 
@@ -98,69 +101,50 @@ const FlatProvider = (props: Props) => {
         const authDetails = await chrome.scripting.executeScript({
           target: { tabId: tabs[0].id as number },
           func: () => {
-            return JSON.stringify(localStorage);
+            return localStorage.getItem("flatini-auth-token");
           },
         });
-        if ((authDetails as any)[0].result !== "{}") {
-          localStorage.setItem(
-            "flatini-auth",
-            JSON.stringify((authDetails as any)[0].result)
-          );
+        if ((authDetails as any)[0].result !== "undefined") {
+          localStorage.setItem("flatini-auth", (authDetails as any)[0].result);
+          setUserAuthToken((authDetails as any)[0].result);
         } else {
           localStorage.removeItem("flatini-auth");
+          setUserAuthToken(null);
         }
       }
       getAuthenticationDetails();
     });
   };
 
-  // Gets authenticated user
-  const getAuthenticatedUser = () =>
-    (localStorage.getItem("flatini-auth") as string) || null;
-
-  const getAccessToken = (): string => {
-    console.log(
-      getObjectByKeyPart(
-        "accessToken",
-        JSON.parse(JSON.parse(getAuthenticatedUser() as string))
-      )
-    );
-    return getObjectByKeyPart(
-      "accessToken",
-      JSON.parse(JSON.parse(getAuthenticatedUser() as string))
-    );
-  };
-
   const getGroup = async () => {
-    try {
-      const group = await _getUserGroup(getAccessToken());
+    //const token = localStorage.getItem("flatini-auth") as string;
 
-      console.log("group", group);
-
-      if (group) {
-        console.log("check", group);
-        setUserHasGroup(true);
-        setGroupId(group?.groups[0].id);
+    if (userAuthToken) {
+      try {
+        const group = await _getUserGroup(userAuthToken as string);
 
-        console.log("test group", group);
+        if (group) {
+          setUserHasGroup(true);
+          setGroupId(group?.groups[0].id);
 
-        // Sets group dependencies
-        setFlats(group?.groups[0].flats);
-        setParticipants(group?.groups[0].participants);
-        setRequirements({
-          price: group?.groups[0].priceLimit,
-          locations: group?.groups[0].locations,
-          participants: group?.groups[0].participants,
-        });
+          // Sets group dependencies
+          setFlats(group?.groups[0].flats);
+          setParticipants(group?.groups[0].participants);
+          setRequirements({
+            price: group?.groups[0].priceLimit,
+            locations: group?.groups[0].locations,
+            participants: group?.groups[0].participants,
+          });
+          setIsGroupLoading(false);
+          return;
+        }
+      } catch (err) {
+        if ((err as AxiosRequestHeaders)?.response?.status === 404) {
+          console.log("err", err);
+          setUserHasGroup(false);
+        }
         setIsGroupLoading(false);
-        return;
-      }
-    } catch (err) {
-      if ((err as AxiosRequestHeaders)?.response?.status === 404) {
-        console.log("err", err);
-        setUserHasGroup(false);
       }
-      setIsGroupLoading(false);
     }
   };
 
@@ -170,7 +154,7 @@ const FlatProvider = (props: Props) => {
   ) => {
     try {
       await _updateGroup(
-        getAccessToken(),
+        userAuthToken as string,
         groupId as string,
         newPriceLimit,
         newLocations
@@ -185,7 +169,7 @@ const FlatProvider = (props: Props) => {
 
   const createGroup = async () => {
     try {
-      const data = await _createGroup(getAccessToken());
+      const data = await _createGroup(userAuthToken as string);
 
       if (data && data.group) {
         // Sets state dependencies
@@ -201,25 +185,22 @@ const FlatProvider = (props: Props) => {
         return;
       }
 
-      console.log(data);
-
       return data;
     } catch (err) {
       console.log(err);
     }
   };
 
   const getGroupShareCode = async () =>
-    (await _getGroupShareCode(getAccessToken(), groupId as string)).code;
+    (await _getGroupShareCode(userAuthToken as string, groupId as string)).code;
 
   /**
    * Flats
    */
 
   const addFlat = async (url: string, price: string, title: string) => {
-    console.log("get", price);
     await _addFlat(
-      getAccessToken(),
+      userAuthToken as string,
       groupId as string,
       url,
       extractNumberFromString(price),
@@ -239,7 +220,7 @@ const FlatProvider = (props: Props) => {
     const findFlat = flats.find((flat) => flat.url === flatUrl);
     if (findFlat) {
       await _deleteFlat(
-        getAccessToken(),
+        userAuthToken as string,
         groupId as string,
         findFlat?.id as string
       );
@@ -276,7 +257,8 @@ const FlatProvider = (props: Props) => {
         removeFlat,
         // Auth
         authenticateUser,
-        getAuthenticatedUser,
+        userAuthToken,
+        setUserAuthToken,
         // Groups
         isGroupLoading,
         userHasGroup,

client/src/utils/axios.ts

@@ -1,6 +1,8 @@
-import axios from 'axios';
+import axios from "axios";
 
 export default axios.create({
-  baseURL: process.env.REACT_APP_API_URL,
+  baseURL:
+    process.env.REACT_APP_API_URL ||
+    "https://pmer135n4j.execute-api.eu-west-2.amazonaws.com",
   timeout: 1000,
-});
+});

client/src/utils/resources.ts

@@ -13,6 +13,7 @@ export const _getUserGroup = async (token: string) => {
     },
   };
   const res = (await axios.get(`/groups`, config)) as AxiosResponse;
+  console.log("res", res);
   return res.data;
 };
 

client/src/views/Loading.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Loader = styled.div`
+  width: 48px;
+  height: 48px;
+  border: 5px solid #fff;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+const Loading = () => {
+  return (
+    <Wrapper>
+      <Loader />
+    </Wrapper>
+  );
+};
+
+export default Loading;