Merge pull request #365 from ChildMindInstitute/feature-2.5/auto-comp…

…letion-preparation

AutoCompletion feature preparation

src/abstract/lib/getProgressId.ts

@@ -1,3 +1,9 @@
 export const getProgressId = (entityId: string, eventId: string): string => {
   return `${entityId}/${eventId}`
 }
+
+export const getDataFromProgressId = (progressId: string): { entityId: string; eventId: string } => {
+  const [entityId, eventId] = progressId.split("/")
+
+  return { entityId, eventId }
+}

src/entities/event/api/index.ts

@@ -1 +1,2 @@
 export * from "./useEventsByAppletIdQuery"
+export * from "./useUserEventsMutation"

src/entities/event/api/useUserEventsMutation.ts

@@ -0,0 +1,7 @@
+import { MutationOptions, eventsService, useBaseMutation } from "~/shared/api"
+
+type Options = MutationOptions<typeof eventsService.getUserEvents>
+
+export const useUserEventsMutation = (options?: Options) => {
+  return useBaseMutation(["getUserEvents"], eventsService.getUserEvents, { ...options })
+}

src/shared/api/services/events.service.ts

@@ -1,13 +1,18 @@
 import axiosService from "./axios"
-import { GetEventsByAppletIdPayload, GetEventsByPublicAppletKey, SuccessEventsByAppletIdResponse } from "../types"
+import {
+  GetEventsByAppletIdPayload,
+  GetEventsByPublicAppletKey,
+  SuccessAllUserEventsResponse,
+  SuccessEventsByAppletIdResponse,
+} from "../types"
 
 function eventService() {
   return {
     getEventsByAppletId(payload: GetEventsByAppletIdPayload) {
       return axiosService.get<SuccessEventsByAppletIdResponse>(`/users/me/events/${payload.appletId}`)
     },
     getUserEvents() {
-      return axiosService.get<SuccessEventsByAppletIdResponse>("/users/me/events")
+      return axiosService.get<SuccessAllUserEventsResponse>("/users/me/events")
     },
     getEventsByPublicAppletKey(payload: GetEventsByPublicAppletKey) {
       return axiosService.get<SuccessEventsByAppletIdResponse>(`/public/applets/${payload.publicAppletKey}/events`)

src/shared/api/types/applet.ts

@@ -125,6 +125,11 @@ export type AppletEventsResponse = {
   events: ScheduleEventDto[]
 }
 
+export type AllUserEventsDTO = {
+  appletId: string
+  events: ScheduleEventDto[]
+}
+
 export type AppletEncryptionDTO = {
   accountId: string
   base: string // Contains number[]

src/shared/api/types/events.ts

@@ -1,4 +1,4 @@
-import { AppletEventsResponse } from "./applet"
+import { AllUserEventsDTO, AppletEventsResponse } from "./applet"
 import { BaseSuccessResponse } from "./base"
 import { HourMinute } from "../../utils"
 
@@ -14,6 +14,7 @@ export type GetEventsByPublicAppletKey = {
 }
 
 export type SuccessEventsByAppletIdResponse = BaseSuccessResponse<AppletEventsResponse>
+export type SuccessAllUserEventsResponse = BaseSuccessResponse<AllUserEventsDTO[]>
 
 export type EventsByAppletIdResponseDTO = {
   appletId: string

src/shared/utils/index.ts

@@ -13,3 +13,5 @@ export * from "./helpers"
 export * from "./eventEmitter"
 export * from "./dictionary.map"
 export * from "./mixpanel"
+export * from "./useTimer"
+export * from "./matchPaths"

src/shared/utils/matchPaths.ts

@@ -0,0 +1,22 @@
+import { matchPath } from "react-router-dom"
+
+type Params = {
+  end?: boolean
+  caseSensitive?: boolean
+}
+
+export const matchPaths = (
+  patterns: string[],
+  pathname: string,
+  params: Params = { end: false, caseSensitive: false },
+) => {
+  return patterns.map(path =>
+    matchPath(
+      {
+        path,
+        ...params,
+      },
+      pathname,
+    ),
+  )
+}

src/shared/utils/useTimer.ts

@@ -0,0 +1,29 @@
+import { useCallback, useRef } from "react"
+
+type SetTimerProps = {
+  callback: () => void
+  delay: number
+}
+
+export const useTimer = () => {
+  const timerRef = useRef<number | undefined>(undefined)
+
+  // this resets the timer if it exists.
+  const resetTimer = useCallback(() => {
+    if (timerRef) window.clearTimeout(timerRef.current)
+  }, [timerRef])
+
+  const setTimer = useCallback(
+    (props: SetTimerProps) => {
+      timerRef.current = window.setTimeout(() => {
+        // clears any pending timer.
+        resetTimer()
+
+        props.callback()
+      }, props.delay)
+    },
+    [resetTimer],
+  )
+
+  return { setTimer, resetTimer }
+}

src/widgets/ProtectedRoute/InactivityTracker.tsx

@@ -1,43 +1,34 @@
-import { PropsWithChildren, useCallback, useEffect, useRef } from "react"
+import { PropsWithChildren, useCallback, useEffect } from "react"
 
 import { useLogout } from "~/features/Logout"
+import { useTimer } from "~/shared/utils"
 
 export type InactivityTrackerProps = PropsWithChildren<unknown>
 
-const events = ["load", "click", "scroll", "keypress"]
+const events = ["load", "click", "scroll", "keypress", "mousemove"]
 
 const ONE_SEC = 1000
 const ONE_MIN = 60 * ONE_SEC
 const LOGOUT_TIME_LIMIT = 15 * ONE_MIN // 15 min
 
 export const InactivityTracker = ({ children }: InactivityTrackerProps) => {
-  const timerRef = useRef<number | undefined>(undefined)
   const { logout } = useLogout()
+  const { resetTimer, setTimer } = useTimer()
 
-  // this resets the timer if it exists.
-  const resetTimer = useCallback(() => {
-    if (timerRef) window.clearTimeout(timerRef.current)
-  }, [timerRef])
-
-  const logoutTimer = useCallback(() => {
-    timerRef.current = window.setTimeout(() => {
-      // clears any pending timer.
-      resetTimer()
-
-      // Listener clean up. Removes the existing event listener from the window
-      Object.values(events).forEach(item => {
-        window.removeEventListener(item, resetTimer)
-      })
+  const onLogoutTimerExpire = useCallback(() => {
+    // Listener clean up. Removes the existing event listener from the window
+    Object.values(events).forEach(item => {
+      window.removeEventListener(item, resetTimer)
+    })
 
-      // logs out user
-      logout()
-    }, LOGOUT_TIME_LIMIT)
-  }, [resetTimer, logout])
+    // logs out user
+    logout()
+  }, [logout, resetTimer])
 
   const onActivityEventHandler = useCallback(() => {
     resetTimer()
-    logoutTimer()
-  }, [resetTimer, logoutTimer])
+    setTimer({ delay: LOGOUT_TIME_LIMIT, callback: onLogoutTimerExpire })
+  }, [resetTimer, setTimer, onLogoutTimerExpire])
 
   useEffect(() => {
     Object.values(events).forEach(item => {