diff --git a/src/background/index.ts b/src/background/index.ts index baa0f18..d43a83f 100644 --- a/src/background/index.ts +++ b/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( diff --git a/src/background/messages/selectNewActiveProject.ts b/src/background/messages/selectNewActiveProject.ts index b41401f..a675b8b 100644 --- a/src/background/messages/selectNewActiveProject.ts +++ b/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 diff --git a/src/background/messages/updateUserDetails.ts b/src/background/messages/updateUserDetails.ts index 97f6a99..0cdf972 100644 --- a/src/background/messages/updateUserDetails.ts +++ b/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) diff --git a/src/components/HomePage/HomePage.tsx b/src/components/HomePage/HomePage.tsx index 2f62886..658b6d1 100644 --- a/src/components/HomePage/HomePage.tsx +++ b/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() { {event_time.slice(0, -4)} - Day: + Sequence: {current_index + 1} of{" "} {currentProject.sequence.length} diff --git a/src/components/SelectProjectButton/SelectProjectButton.tsx b/src/components/SelectProjectButton/SelectProjectButton.tsx index f1f4da9..40f0b0f 100644 --- a/src/components/SelectProjectButton/SelectProjectButton.tsx +++ b/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(false) const [isLoading, setIsLoading] = useState(false) @@ -22,7 +23,7 @@ export default function SelectProjectButton() { name: "selectNewActiveProject", body: { selectedProjectId: exploreProjectId } }) - + updateUser({ ...result}) if (result) setIsLoading(false) } diff --git a/src/components/page-components/LoginPage/LoginPage.tsx b/src/components/page-components/LoginPage/LoginPage.tsx index 3adbac9..3936f97 100644 --- a/src/components/page-components/LoginPage/LoginPage.tsx +++ b/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) }} diff --git a/src/components/page-components/ProfilePage/ProfilePage.tsx b/src/components/page-components/ProfilePage/ProfilePage.tsx index 0b6cc12..2149aff 100644 --- a/src/components/page-components/ProfilePage/ProfilePage.tsx +++ b/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(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) diff --git a/src/components/page-components/SignUpPage/SignUpPage.tsx b/src/components/page-components/SignUpPage/SignUpPage.tsx index c71fb4e..f6ae242 100644 --- a/src/components/page-components/SignUpPage/SignUpPage.tsx +++ b/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") }} diff --git a/src/popup.tsx b/src/popup.tsx index f4a82bf..f01fe2a 100644 --- a/src/popup.tsx +++ b/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({ - key: "arebyte-audience-session", - instance: newStorage() - }) - const [publicIndex] = useStorage({ - key: "arebyte-public-index", - instance: newStorage() - }) + const [isLoading, setIsLoading] = useState(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 ( diff --git a/src/store/store.ts b/src/store/store.ts index cf68cdf..ebf300f 100644 --- a/src/store/store.ts +++ b/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(set => { user: { ...state.user, ...newUser - }, - isLoggedIn: true + } })) }, resetStore: () => @@ -104,6 +104,11 @@ const baseStore = create(set => { ...state.user, current_index: newIndex } + })), + logInUser: () => + set(state => ({ + ...state, + isLoggedIn: true })) } }) diff --git a/src/types/userTypes.ts b/src/types/userTypes.ts index eab73d6..11ddff6 100644 --- a/src/types/userTypes.ts +++ b/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 { jwt: string } diff --git a/src/utils/eventAlarmListener.ts b/src/utils/eventAlarmListener.ts index d2a9fa8..8b130f3 100644 --- a/src/utils/eventAlarmListener.ts +++ b/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( + `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( + `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" diff --git a/src/utils/setEventAlarm.ts b/src/utils/setEventAlarm.ts index 572c52c..a93d69d 100644 --- a/src/utils/setEventAlarm.ts +++ b/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")