Merge pull request #125 from enBloc-org/#104/event-interval

#104/event interval

Author: camelPhonso

src/background/messages/triggerPopup.ts

@@ -9,7 +9,7 @@ const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
   const { data } = await fetchStrapiContent<EventData>(
     `api/events/${req.body.id}?${eventPopupQueryString}`
   )
-  backgroundPopupCreate(data.pop_ups)
+  backgroundPopupCreate(data.pop_ups, data.time_delay)
   res.send("success!")
 }
 

src/types/eventTypes.ts

@@ -7,6 +7,7 @@ export interface EventData {
   title: string
   createdAt: string
   updatedAt: string
+  time_delay: number
   pop_ups: Popup[]
 }
 

src/utils/eventAlarmListener.ts

@@ -23,12 +23,12 @@ export default async function eventAlarmListener(alarm) {
     )
     if (error) console.error(error)
 
-    const { pop_ups, numberOfEvents } =
+    const { popUps, numberOfEvents, timeDelay } =
       user.project_id === 0
         ? await getCurrentProjectPopups(user.current_index)
         : await getProjectPopups(user.project_id, user.current_index)
 
-    await backgroundPopupCreate(pop_ups)
+    await backgroundPopupCreate(popUps, timeDelay)
     const newIndex = iterateIndex(numberOfEvents, user.current_index)
 
     const response = await fetchStrapiContent<User>(
@@ -46,9 +46,9 @@ export default async function eventAlarmListener(alarm) {
       "arebyte-public-index"
     )
 
-    const { pop_ups, numberOfEvents } =
+    const { popUps, numberOfEvents, timeDelay } =
       await getCurrentProjectPopups(publicIndex)
-    await backgroundPopupCreate(pop_ups)
+    await backgroundPopupCreate(popUps, timeDelay)
 
     const newPublicIndex = iterateIndex(numberOfEvents, publicIndex)
     await storage.set("arebyte-public-index", newPublicIndex)

src/utils/getCurrentProjectPopups.ts

@@ -8,6 +8,8 @@ import { fetchStrapiContent } from "./fetchStrapiContent"
 /**
  *
  * @description fetches an array of pop ups from the unique type Current_Project
+ * @returns an object with the array of pop_ups, the total number of events in the project and the time_delay value set for the event
+ * @example const { popUps, numberOfEvents, timeDelay } = getCurrentProjectPopups(currentIndex)
  */
 export default async function getCurrentProjectPopups(
   currentIndex: number
@@ -17,13 +19,12 @@ export default async function getCurrentProjectPopups(
   )
   const currentEventId =
     currentProject.data.project.sequence[currentIndex].id
-  const {
-    data: { pop_ups }
-  } = await fetchStrapiContent<EventData>(
+  const { data } = await fetchStrapiContent<EventData>(
     `api/events/${currentEventId}?${eventPopupQueryString}`
   )
   return {
-    pop_ups: pop_ups,
-    numberOfEvents: currentProject.data.project.sequence.length
+    popUps: data.pop_ups,
+    numberOfEvents: currentProject.data.project.sequence.length,
+    timeDelay: data.time_delay
   }
 }

src/utils/getProjectPopups.ts

@@ -8,6 +8,8 @@ import { fetchStrapiContent } from "./fetchStrapiContent"
 /**
  *
  * @description fetches an array of popups from the project with the given Id
+ * @returns an object with the full array of popups, the total number of events in the project and the time_delay set for the event
+ * @example const { popUps, numberOfEvents, timeDelay } = getProjectPopups(projectId, currentIndex)
  */
 export default async function getProjectPopups(
   projectId: number,
@@ -17,14 +19,13 @@ export default async function getProjectPopups(
     `api/projects/${projectId}?${projectQueryString}`
   )
   const currentEventId = currentProject.data.sequence[currentIndex].id
-  const {
-    data: { pop_ups }
-  } = await fetchStrapiContent<EventData>(
+  const { data } = await fetchStrapiContent<EventData>(
     `api/events/${currentEventId}?${eventPopupQueryString}`
   )
 
   return {
-    pop_ups: pop_ups,
-    numberOfEvents: currentProject.data.sequence.length
+    popUps: data.pop_ups,
+    numberOfEvents: currentProject.data.sequence.length,
+    timeDelay: data.time_delay
   }
 }

src/utils/popup-utils/backgroundPopCreate.ts

@@ -12,7 +12,10 @@ import determineFormat from "./determineFormat"
 import parseImageSize from "./parseImageSize"
 import parseWindowSize from "./parseWindowSize"
 
-const backgroundPopupCreate = async (popups: Popup[]) => {
+const backgroundPopupCreate = async (
+  popups: Popup[],
+  timeDelay: number
+) => {
   // Get system widow size
   const screenDimensions = await Browser.tabs
     .query({ active: true, currentWindow: true })
@@ -145,15 +148,20 @@ const backgroundPopupCreate = async (popups: Popup[]) => {
   await Browser.storage.session.set({ arebytePopups: slimPopups })
 
   // Create windows
-  slimPopups.forEach(async popup => {
-    await createWindow(
-      popup.index,
-      popup.width,
-      popup.height,
-      popup.top,
-      popup.left
-    )
-  })
+  for (const popup of slimPopups) {
+    await new Promise(resolve => {
+      setTimeout(async () => {
+        const window = await createWindow(
+          popup.index,
+          popup.width,
+          popup.height,
+          popup.top,
+          popup.left
+        )
+        resolve(window)
+      }, timeDelay * 100)
+    })
+  }
 }
 
 export default backgroundPopupCreate