113/hotfix homepage

src/background/index.ts

@@ -19,7 +19,7 @@ if (process.env.NODE_ENV === "production") {
 
 Browser.runtime.onInstalled.addListener(async () => {
   const storage = newStorage()
-  storage.set("arebyte-public-index", 0)
+  await storage.set("arebyte-public-index", 0)
 
   const currentProject =
     await fetchStrapiContent<CurrentProjectData>(

src/background/messages/selectNewActiveProject.ts

@@ -3,7 +3,6 @@ import type { PlasmoMessaging } from "@plasmohq/messaging"
 import { User, UserSession } from "~types/userTypes"
 import { fetchStrapiContent } from "~utils/fetchStrapiContent"
 import newStorage from "~utils/newStorage"
-import updateStorage from "~utils/updateStorage"
 
 const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
   const storage = newStorage()
@@ -28,12 +27,10 @@ const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
     res.send(false)
   }
 
-  const newSession = updateStorage(userSession, {
+  res.send({
     project_id: data.project_id,
     current_index: data.current_index
   })
-  await storage.set("arebyte-audience-session", newSession)
-  res.send(true)
 }
 
 export default handler

src/background/messages/updateUserDetails.ts

@@ -28,9 +28,6 @@ const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
 
   const newSession = updateStorage(userSession, {
     id: response.data.id,
-    event_time: response.data.event_time,
-    project_id: response.data.project_id,
-    current_index: response.data.current_index
   })
   await storage.set("arebyte-audience-session", newSession)
   res.send(response)

src/components/HomePage/HomePage.tsx

@@ -24,7 +24,7 @@ export default function HomePage() {
   const { showBoundary } = useErrorBoundary()
 
   useEffect(() => {
-    const getUserSession = async () => {
+    const fetchProjectData = async () => {
       if (project_id === 0) {
         const {
           data,
@@ -48,7 +48,7 @@ export default function HomePage() {
         updateCurrentProject(data)
       }
     }
-    getUserSession()
+    fetchProjectData()
   }, [project_id, current_index])
 
   return (
@@ -75,7 +75,7 @@ export default function HomePage() {
                       <td>{event_time.slice(0, -4)}</td>
                     </tr>
                     <tr>
-                      <td>Day:</td>
+                      <td>Sequence:</td>
                       <td>
                         {current_index + 1} of{" "}
                         {currentProject.sequence.length}

src/components/SelectProjectButton/SelectProjectButton.tsx

@@ -10,6 +10,7 @@ export default function SelectProjectButton() {
   const { project_id: currentProjectId } = useStore.use.user()
   const isLoggedIn = useStore.use.isLoggedIn()
   const navigateTo = useStore.use.navigateTo()
+  const updateUser = useStore.use.updateUser()
   const exploreProjectId = useStore.use.exploreProjectId()
   const [isShowingAlarm, setIsShowingAlarm] = useState<boolean>(false)
   const [isLoading, setIsLoading] = useState<boolean>(false)
@@ -22,7 +23,7 @@ export default function SelectProjectButton() {
       name: "selectNewActiveProject",
       body: { selectedProjectId: exploreProjectId }
     })
-
+    updateUser({ ...result})
     if (result) setIsLoading(false)
   }
 

src/components/page-components/LoginPage/LoginPage.tsx

@@ -19,6 +19,7 @@ import { AuthData, UserSession } from "~types/userTypes"
 
 export default function LoginPage() {
   const navigateTo = useStore.use.navigateTo()
+  const logInUser = useStore.use.logInUser()
   const [errorMessage, setErrorMessage] = useState("")
   const [isLoading, setIsLoading] = useState(false)
   const [, setUserSession] = useStorage("arebyte-audience-session")
@@ -59,12 +60,10 @@ export default function LoginPage() {
 
             const userSession: UserSession = {
               id: data.user.id,
-              project_id: data.user.project_id,
-              event_time: data.user.event_time,
-              current_index: data.user.current_index,
               jwt: data.jwt
             }
             setUserSession(userSession)
+            logInUser()
             navigateTo("home")
             return actions.setSubmitting(false)
           }}

src/components/page-components/ProfilePage/ProfilePage.tsx

@@ -21,6 +21,7 @@ export default function ProfilePage() {
   const navigateTo = useStore.use.navigateTo()
   const resetStore = useStore.use.resetStore()
   const userInfo = useStore.use.user()
+  const updateUser = useStore.use.updateUser()
   const { is_paused: isPaused } = useStore.use.user()
   const updatedIsPaused = useStore.use.updateIsPaused()
   const [isOpen, setIsOpen] = useState<boolean>(false)
@@ -128,7 +129,13 @@ export default function ProfilePage() {
                     })
                   if (alarmError) setErrorMessage(alarmError)
                 }
-
+                updateUser({
+                  username: data.username,
+                  email: data.email,
+                  birth_date: data.birth_date,
+                  location: data.location,
+                  event_time: data.event_time
+                })
                 setIsLoading(false)
                 setIsOpen(false)
                 return actions.setSubmitting(false)

src/components/page-components/SignUpPage/SignUpPage.tsx

@@ -18,6 +18,7 @@ import { AuthData, UserSession } from "~types/userTypes"
 
 const SignUpPage = () => {
   const navigateTo = useStore.use.navigateTo()
+  const logInUser = useStore.use.logInUser()
   const [errorMessage, setErrorMessage] = useState("")
   const [isLoading, setIsLoading] = useState(false)
   const [, setUserSession] = useStorage("arebyte-audience-session")
@@ -91,14 +92,12 @@ const SignUpPage = () => {
 
             const userSession: UserSession = {
               id: data.user.id,
-              project_id: data.user.project_id,
-              event_time: data.user.event_time,
-              current_index: data.user.current_index,
               jwt: data.jwt
             }
 
             setUserSession(userSession)
             actions.setSubmitting(false)
+            logInUser()
             setIsLoading(false)
             navigateTo("home")
           }}

src/popup.tsx

@@ -1,7 +1,7 @@
 import "./components/normalize.css"
 import "~components/globals.css"
 
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 import { ErrorBoundary } from "react-error-boundary"
 import { CSSTransition } from "react-transition-group"
 
@@ -25,34 +25,44 @@ import newStorage from "~utils/newStorage"
 
 function IndexPopup() {
   const currentPage = useStore.use.currentPage()
+  const logInUser = useStore.use.logInUser()
   const isLoggedIn = useStore.use.isLoggedIn()
   const updateUser = useStore.use.updateUser()
-  const updateCurrentIndex = useStore.use.updateCurrentIndex()
-
-  const [userSession] = useStorage<UserSession>({
-    key: "arebyte-audience-session",
-    instance: newStorage()
-  })
-  const [publicIndex] = useStorage<number>({
-    key: "arebyte-public-index",
-    instance: newStorage()
-  })
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const storage = newStorage()
 
   useEffect(() => {
     const fetchUserProfile = async () => {
-      if (userSession) {
-        const { data, error }: { data: User; error: string | null } =
-          await sendToBackground({
-            name: "fetchUserProfile",
-            body: { jwt: userSession.jwt, id: userSession.id }
-          })
-        if (error) console.error(error)
-        updateUser(data)
+      setIsLoading(true)
+      const userSession: UserSession = await storage.get(
+        "arebyte-audience-session"
+      )
+
+      if (!userSession) {
+        const publicIndex: number = await storage.get(
+          "arebyte-public-index"
+        )
+        updateUser({
+          current_index: publicIndex,
+          project_id: 0
+        })
+        return setIsLoading(false)
       }
+
+      const { data, error }: { data: User; error: string | null } =
+        await sendToBackground({
+          name: "fetchUserProfile",
+          body: { jwt: userSession.jwt, id: userSession.id }
+        })
+      if (error) console.error(error)
+      updateUser(data)
+      logInUser()
+      setIsLoading(false)
     }
     fetchUserProfile()
-  }, [userSession, publicIndex])
+  }, [isLoggedIn])
 
+  if (isLoading) return
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       <Layout theme={isLoggedIn ? "logged-in" : "logged-out"}>

src/store/store.ts

@@ -31,6 +31,7 @@ interface Actions {
   updateExploreProjectId: (id: number) => void
   updateIsPaused: (newStatus: boolean) => void
   updateCurrentIndex: (newIndex: number) => void
+  logInUser: () => void
 }
 
 const initialState: State = {
@@ -41,7 +42,7 @@ const initialState: State = {
     birth_date: undefined,
     location: undefined,
     is_paused: false,
-    project_id: 0,
+    project_id: undefined,
     current_index: 0,
     event_time: "12:00:00.000"
   },
@@ -75,8 +76,7 @@ const baseStore = create<State & Actions>(set => {
         user: {
           ...state.user,
           ...newUser
-        },
-        isLoggedIn: true
+        }
       }))
     },
     resetStore: () =>
@@ -104,6 +104,11 @@ const baseStore = create<State & Actions>(set => {
           ...state.user,
           current_index: newIndex
         }
+      })),
+    logInUser: () =>
+      set(state => ({
+        ...state,
+        isLoggedIn: true
       }))
   }
 })

src/types/userTypes.ts

@@ -47,11 +47,7 @@ export interface AuthData {
   jwt: string
 }
 
-export interface UserSession
-  extends Pick<
-    User,
-    "event_time" | "project_id" | "current_index" | "id"
-  > {
+export interface UserSession extends Pick<User, "id"> {
   jwt: string
 }
 

src/utils/eventAlarmListener.ts

@@ -1,11 +1,12 @@
-import type { UserSession } from "~types/userTypes"
+import { userQueryString } from "~queries/userQuery"
+import type { User, UserSession } from "~types/userTypes"
 
+import { fetchStrapiContent } from "./fetchStrapiContent"
 import getCurrentProjectPopups from "./getCurrentProjectPopups"
 import getProjectPopups from "./getProjectPopups"
 import iterateIndex from "./iterateIndex"
 import newStorage from "./newStorage"
 import backgroundPopupCreate from "./popup-utils/backgroundPopCreate"
-import updateStorage from "./updateStorage"
 
 export default async function eventAlarmListener(alarm) {
   if (alarm.name !== "sequence-alarm") return
@@ -15,21 +16,31 @@ export default async function eventAlarmListener(alarm) {
   )
 
   if (userSession) {
-    const projectId = userSession.project_id
-    const currentIndex = userSession.current_index
+    const { data: user, error } = await fetchStrapiContent<User>(
+      `api/users/${userSession.id}?${userQueryString}`,
+      "GET",
+      userSession.jwt
+    )
+    if (error) console.error(error)
 
     const { pop_ups, numberOfEvents } =
-      projectId === 0
-        ? await getCurrentProjectPopups(currentIndex)
-        : await getProjectPopups(projectId, currentIndex)
+      user.project_id === 0
+        ? await getCurrentProjectPopups(user.current_index)
+        : await getProjectPopups(user.project_id, user.current_index)
 
     await backgroundPopupCreate(pop_ups)
-    const newIndex = iterateIndex(numberOfEvents, currentIndex)
-    const updatedSession = updateStorage(userSession, {
-      current_index: newIndex,
-      ...(newIndex === 0 && { project_id: 0 })
-    })
-    await storage.set("arebyte-audience-session", updatedSession)
+    const newIndex = iterateIndex(numberOfEvents, user.current_index)
+
+    const response = await fetchStrapiContent<User>(
+      `api/users/${userSession.id}`,
+      "PUT",
+      userSession.jwt,
+      JSON.stringify({
+        current_index: newIndex,
+        ...(newIndex === 0 && { project_id: 0 })
+      })
+    )
+    if (response.error) console.error(response.error)
   } else {
     const publicIndex: number = await storage.get(
       "arebyte-public-index"

src/utils/setEventAlarm.ts

@@ -15,13 +15,13 @@ export default async function setEventAlarm(
   eventMinute: number
 ) {
   await browser.alarms.clear("sequence-alarm")
-  await browser.alarms.onAlarm.removeListener(eventAlarmListener)
+  browser.alarms.onAlarm.removeListener(eventAlarmListener)
 
-  await browser.alarms.create("sequence-alarm", {
+  browser.alarms.create("sequence-alarm", {
     periodInMinutes: 1440,
     when: calculateCountDown(eventHour, eventMinute)
   })
-  await browser.alarms.onAlarm.addListener(eventAlarmListener)
+  browser.alarms.onAlarm.addListener(eventAlarmListener)
   try {
     const newAlarm = await browser.alarms.get("sequence-alarm")