Fix/details not syncing with startDetails and dup. entries

eslint.config.ts

@@ -357,6 +357,7 @@ const eslintConfig = defineConfig([
             'no-sequences': 'error',
             // disallow usage of expressions in statement position
             'no-unused-expressions': 'error',
+            '@typescript-eslint/no-unused-vars': 'error',
             // disallow unused labels
             'no-unused-labels': 'error',
             // disallow usage of configurable warning terms in comments: e.g. todo

src/app/_components/Company/CompanyListRenderer.tsx

@@ -1,7 +1,6 @@
 import Company from './Company'
 import type { SessionMaybeUser } from '@/auth/session/Session'
 import type { CompanyExpanded } from '@/services/career/companies/types'
-import { v4 } from 'uuid'
 
 /**
  * Used to render schools server side and client side in consistent way
@@ -19,4 +18,4 @@ export const companyListRenderer = ({
     disableEditing?: boolean
 // eslint-disable-next-line react/display-name
 }) => (company: CompanyExpanded) =>
-    <Company disableEdit={disableEditing} session={session} key={v4()} company={company} asClient={asClient} />
+    <Company disableEdit={disableEditing} session={session} key={company.id} company={company} asClient={asClient} />

src/app/_components/NavBar/navDef.ts

@@ -4,8 +4,6 @@
 import {
     faGamepad,
     faBook,
-    faPoo,
-    faShoppingCart,
     faComment,
     faCamera,
     faCircleInfo,
@@ -17,7 +15,6 @@ import {
     faBriefcase,
     faGraduationCap,
     faTools,
-    faChartLine,
     faSignature,
     faSchool,
     faHouseChimneyWindow,

src/app/_components/PagingWrappers/EndlessScroll.tsx

@@ -28,19 +28,21 @@ export default function EndlessScroll<Data, Cursor, const PageSize extends numbe
 
     //This component must be rendered inside ContextProvider
     if (!context) throw new Error('No context')
+
+    const { loading, state, loadMore } = context
+
     const [ref, inView] = useInView({
         threshold: 0,
     })
 
-    const loadMore = useCallback(async () => {
-        if (context.state.allLoaded) return
+    const loadMoreCallback = useCallback(async () => {
         if (!inView) return
-        await context.loadMore()
-    }, [context, inView])
+        await loadMore()
+    }, [loadMore, inView])
 
     useEffect(() => {
-        loadMore()
-    }, [inView, loadMore])
+        loadMoreCallback()
+    }, [inView, loadMoreCallback])
 
 
     const renderedPageData = useMemo(() => context.state.data.map((dataEntry, i) => {
@@ -67,14 +69,26 @@ export default function EndlessScroll<Data, Cursor, const PageSize extends numbe
         return () => {
             if (timerRef.current) clearTimeout(timerRef.current)
         }
-    }, [context.state.allLoaded])
+    }, [state])
 
     return (
         <>
             {renderedPageData}
             <span ref={ref} className={`${styles.loadingControl} ${loadingInfoClassName}`}>
-                <i style={{ opacity: showButton ? 0 : 1 }}>Ingen flere å laste inn</i>
-                <Button style={{ opacity: showButton ? 1 : 0 }} onClick={loadMore}>Last inn flere</Button>
+                {
+                    loading ? (
+                        <i>Laster inn flere...</i>
+                    ) : (
+                        <>
+                            <i style={{ opacity: showButton ? 0 : 1 }}>
+                                Ingen flere å laste inn
+                            </i>
+                            <Button style={{ opacity: showButton ? 1 : 0 }} onClick={loadMoreCallback}>
+                                Last inn flere
+                            </Button>
+                        </>
+                    )
+                }
             </span>
         </>
     )

src/app/_components/User/UserList/UserList.tsx

@@ -10,7 +10,6 @@ import { UserSelectionContext } from '@/contexts/UserSelection'
 import { readGroupsForPageFilteringAction } from '@/services/users/actions'
 import { useContext, useEffect, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { v4 } from 'uuid'
 import { faCheck } from '@fortawesome/free-solid-svg-icons'
 import type { UserPagingReturn } from '@/services/users/types'
 import type { ChangeEvent, ReactNode } from 'react'
@@ -265,7 +264,7 @@ export default function UserList({
                 </span>
 
                 <EndlessScroll pagingContext={UserPagingContext} renderer={user => (
-                    <span className={styles.row} key={v4()}>
+                    <span className={styles.row} key={user.id}>
                         { usersSelection &&
                             <button
                                 className={usersSelection.includes(user) ? styles.selected : ''}

src/app/applications/[periodName]/countdown/CommitteeLogoRoll.tsx

@@ -99,7 +99,7 @@ export default function CommitteeLogoRoll({ committees, periodName }: PropTypes)
 
     return (
         <div className={styles.CommitteeLogoRoll}>
-            {dispays.map((displayKey, i) => {
+            {dispays.map((displayKey) => {
                 const idx = currentCommitteeIndexes[displayKey]
                 if (idx === null) return null
 

src/contexts/paging/PagingGenerator.tsx

@@ -111,10 +111,15 @@ export function generatePaging<Data, Cursor, PageSize extends number = number, F
 
         useEffect(() => {
             handleDetailsChange()
-        }, [details, startDetails])
+        }, [details])
+
+        useEffect(() => {
+            setDetails(startDetails)
+        }, [startDetails])
 
         const loadMore = useCallback(async () => {
             if (state.allLoaded) return []
+            if (loading) return []
             setLoading(true)
             const data = await fetcher({
                 paging: {
@@ -141,7 +146,7 @@ export function generatePaging<Data, Cursor, PageSize extends number = number, F
                 allLoaded: newData.length < prevState.page.pageSize,
             }))
             return newData
-        }, [details, state])
+        }, [details, state, loading])
 
         const refetch = useCallback(async () => {
             const toPage = state.page.page

src/hooks/useDebounce.ts

@@ -1,15 +1,23 @@
+import { useRef, useCallback, useEffect } from 'react'
+
 /**
  * This hook debounces a function. It takes a function and returns a function that can be called
  * but it will only call the original function after a certain amount of time has passed since the last call.
  * @param func
  */
 export function useDebounce<T>(func: (param: T) => void, timeout: number): (param: T) => void {
-    let timer: ReturnType<typeof setTimeout> | null = null
-    return (param: T) => {
-        if (timer) clearTimeout(timer)
-        timer = setTimeout(() => {
-            func(param)
-            timer = null
+    const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+    const latestFunc = useRef(func)
+
+    useEffect(() => {
+        latestFunc.current = func
+    }, [func])
+
+    return useCallback((param: T) => {
+        if (timer.current) clearTimeout(timer.current)
+        timer.current = setTimeout(() => {
+            latestFunc.current(param)
+            timer.current = null
         }, timeout)
-    }
+    }, [timeout])
 }

src/prisma/seeder/src/seedNotificationsChannels.ts

@@ -1,8 +1,7 @@
 import { allNotificationMethodsOff, allNotificationMethodsOn } from '@/services/notifications/constants'
+import { SpecialNotificationChannel } from '@/prisma-generated-pn-types'
 import type { PrismaClient } from '@/prisma-generated-pn-client'
 import type { NotificationMethod } from '@/prisma-generated-pn-types'
-import { SpecialNotificationChannel } from '@/prisma-generated-pn-types'
-import { connect } from 'http2'
 
 type ChannelInfo = {
     special?: SpecialNotificationChannel

src/services/shop/shop/operations.ts

@@ -1,9 +1,9 @@
-import { defineOperation } from '@/services/serviceOperation'
 import '@pn-server-only'
-import { z } from 'zod'
-import type { ExtendedShop } from './types'
 import { shopSchemas } from './schema'
 import { shopAuth } from './auth'
+import { defineOperation } from '@/services/serviceOperation'
+import { z } from 'zod'
+import type { ExtendedShop } from './types'
 
 export const shopOperations = {
     create: defineOperation({