feat: hide non-active questions by default

karl-run · karl-run · commit 7a2c5e0b95e8 · 2025-01-31T10:18:50.000+01:00
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
         "next-logger": "^5.0.1",
         "nextleton": "^0.6.1",
         "node-cron": "^3.0.3",
+        "nuqs": "^2.3.1",
         "pino": "^9.5.0",
         "postcss": "^8.4.49",
         "prisma": "6.1.0",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import './global.css'
 
 import { PropsWithChildren, ReactElement } from 'react'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
 
 import Header from '../components/Header'
 import Footer from '../components/Footer'
@@ -13,7 +14,9 @@ export default async function RootLayout({ children }: PropsWithChildren): Promi
         <html lang="en">
             <body className="flex flex-col min-h-screen">
                 <Header />
-                <main className="container p-4 sm:p-16 sm:pt-4 min-h-fit grow">{children}</main>
+                <main className="container p-4 sm:p-16 sm:pt-4 min-h-fit grow">
+                    <NuqsAdapter>{children}</NuqsAdapter>
+                </main>
                 <Footer />
             </body>
         </html>
diff --git a/src/app/team/[groupId]/[teamId]/graph/page.tsx b/src/app/team/[groupId]/[teamId]/graph/page.tsx
@@ -2,6 +2,7 @@ import * as R from 'remeda'
 import React, { ReactElement, Suspense } from 'react'
 import { Metadata } from 'next'
 import { BodyLong, Detail, Heading, Skeleton } from '@navikt/ds-react'
+import { SearchParams } from 'nuqs'
 
 import { TeamNotAccesible, TeamNotFound } from '../../../../../components/errors/ErrorMessages'
 import { userHasAdGroup } from '../../../../../auth/authentication'
@@ -12,6 +13,8 @@ import OverallScoreGraph from '../../../../../components/graphs/OverallScoreGrap
 import { getWeekNumber } from '../../../../../utils/date'
 import ScorePerQuestion from '../../../../../components/graphs/ScorePerQuestion'
 import { raise } from '../../../../../utils/ts-utils'
+import OnlyCurrentQuestionsToggle from '../../../../../components/graphs/OnlyCurrentQuestionsToggle'
+import { loadSearchParams } from '../../../../../components/graphs/only-current-search-params'
 
 export const metadata: Metadata = {
     title: 'Helsesjekk | Team | Graf',
@@ -23,10 +26,13 @@ type Props = {
         groupId: string
         teamId: string
     }>
+    searchParams: Promise<SearchParams>
 }
 
-async function Page({ params }: Props): Promise<ReactElement> {
+async function Page({ params, searchParams }: Props): Promise<ReactElement> {
     const pageParams = await params
+    const queryParams = await loadSearchParams(searchParams)
+
     const team = await getTeamByAdGroupAndTeamId(pageParams.groupId, pageParams.teamId)
     if (!team) {
         return (
@@ -54,7 +60,7 @@ async function Page({ params }: Props): Promise<ReactElement> {
                 <OverallGraph teamId={team.id} />
             </Suspense>
             <Suspense fallback={<Skeleton height={300} variant="rounded" />}>
-                <PerQuestionGraph teamId={team.id} />
+                <PerQuestionGraph teamId={team.id} showOld={queryParams['show-old'] ?? false} />
             </Suspense>
         </div>
     )
@@ -102,7 +108,7 @@ async function OverallGraph({ teamId }: { teamId: string }): Promise<ReactElemen
     )
 }
 
-async function PerQuestionGraph({ teamId }: { teamId: string }): Promise<ReactElement> {
+async function PerQuestionGraph({ teamId, showOld }: { teamId: string; showOld: boolean }): Promise<ReactElement> {
     const teamMetrics = await getTeamScorePerQuestion(teamId)
 
     if ('error' in teamMetrics) {
@@ -128,17 +134,24 @@ async function PerQuestionGraph({ teamId }: { teamId: string }): Promise<ReactEl
 
     return (
         <div>
-            <Heading size="medium" level="3">
-                Score per spørsmål per uke
-            </Heading>
-            <Detail>
-                {teamMetrics.length} målinger siden Uke {getWeekNumber(earliest.timestamp)},{' '}
-                {earliest.timestamp.getFullYear()}
-            </Detail>
+            <div className="flex justify-between">
+                <div>
+                    <Heading size="medium" level="3">
+                        Score per spørsmål per uke
+                    </Heading>
+                    <Detail>
+                        {teamMetrics.length} målinger siden Uke {getWeekNumber(earliest.timestamp)},{' '}
+                        {earliest.timestamp.getFullYear()}
+                    </Detail>
+                </div>
+                <OnlyCurrentQuestionsToggle />
+            </div>
             <div className="mt-4">
-                {teamMetrics.map((it) => (
-                    <ScorePerQuestion key={it.question.questionId} question={it.question} scoring={it.scoring} />
-                ))}
+                {teamMetrics
+                    .filter((it) => (showOld ? true : it.question.isCurrent))
+                    .map((it) => (
+                        <ScorePerQuestion key={it.question.questionId} question={it.question} scoring={it.scoring} />
+                    ))}
             </div>
         </div>
     )
diff --git a/src/components/graphs/OnlyCurrentQuestionsToggle.tsx b/src/components/graphs/OnlyCurrentQuestionsToggle.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import React, { ReactElement, startTransition } from 'react'
+import { Switch } from '@navikt/ds-react'
+import { useQueryState } from 'nuqs'
+
+import { showOldSearchParams } from './only-current-search-params'
+
+function OnlyCurrentQuestionsToggle(): ReactElement {
+    const [showOld, setShowOld] = useQueryState('show-old', showOldSearchParams['show-old'])
+
+    return (
+        <Switch
+            position="right"
+            checked={showOld}
+            onChange={(event) =>
+                startTransition(async () => {
+                    await setShowOld(event.target.checked)
+                })
+            }
+        >
+            Vis gamle spørsmål
+        </Switch>
+    )
+}
+
+export default OnlyCurrentQuestionsToggle
diff --git a/src/components/graphs/only-current-search-params.ts b/src/components/graphs/only-current-search-params.ts
@@ -0,0 +1,10 @@
+import { createLoader, parseAsBoolean } from 'nuqs/server'
+
+export const showOldSearchParams = {
+    'show-old': parseAsBoolean.withDefault(false).withOptions({
+        clearOnDefault: true,
+        shallow: false,
+    }),
+}
+
+export const loadSearchParams = createLoader(showOldSearchParams)
diff --git a/src/db/score.ts b/src/db/score.ts
@@ -4,6 +4,7 @@ import { getYear } from 'date-fns'
 import { scoreAsked, ScoredAsk, ScoredQuestion } from '../metrics/metrics'
 import { getWeekNumber } from '../utils/date'
 import { QuestionScorePerWeek, QuestionType } from '../safe-types'
+import { questionsFromJsonb } from '../questions/jsonb-utils'
 
 import { prisma } from './prisma'
 
@@ -85,13 +86,16 @@ export async function getTeamScorePerQuestion(teamId: string): Promise<QuestionS
         R.map(scoreAsked),
     )
 
+    const currentQuestionIds = questionsFromJsonb(team.questions).map((it) => it.questionId)
+
     const scoredQuestionToScorePerWeek = (
         scoredQuestion: ScoredQuestion & { timestamp: Date },
     ): QuestionScorePerWeek => ({
         question: {
             questionId: scoredQuestion.id,
             question: scoredQuestion.question,
             answers: scoredQuestion.answers,
+            isCurrent: currentQuestionIds.includes(scoredQuestion.id),
         },
         scoring: [
             {
diff --git a/src/safe-types.ts b/src/safe-types.ts
@@ -44,6 +44,7 @@ export type QuestionScorePerWeek = {
         questionId: string
         question: string
         answers: Record<AnswerLevel, string>
+        isCurrent: boolean
     }
     scoring: QuestionScoring[]
 }
diff --git a/yarn.lock b/yarn.lock
@@ -3692,6 +3692,7 @@ __metadata:
     next-logger: "npm:^5.0.1"
     nextleton: "npm:^0.6.1"
     node-cron: "npm:^3.0.3"
+    nuqs: "npm:^2.3.1"
     pino: "npm:^9.5.0"
     pino-pretty: "npm:^13.0.0"
     postcss: "npm:^8.4.49"
@@ -4784,6 +4785,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mitt@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "mitt@npm:3.0.1"
+  checksum: 10/287c70d8e73ffc25624261a4989c783768aed95ecb60900f051d180cf83e311e3e59865bfd6e9d029cdb149dc20ba2f128a805e9429c5c4ce33b1416c65bbd14
+  languageName: node
+  linkType: hard
+
 "mkdirp@npm:^3.0.1":
   version: 3.0.1
   resolution: "mkdirp@npm:3.0.1"
@@ -5004,6 +5012,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nuqs@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "nuqs@npm:2.3.1"
+  dependencies:
+    mitt: "npm:^3.0.1"
+  peerDependencies:
+    "@remix-run/react": ">=2"
+    next: ">=14.2.0"
+    react: ">=18.2.0 || ^19.0.0-0"
+    react-router: ^6 || ^7
+    react-router-dom: ^6 || ^7
+  peerDependenciesMeta:
+    "@remix-run/react":
+      optional: true
+    next:
+      optional: true
+    react-router:
+      optional: true
+    react-router-dom:
+      optional: true
+  checksum: 10/2abf3b7040a621273546562fe7c9d5dcb0381c439e26cedde5544920a201416ed631f21b99962033db7fc56e83f7de4be11d7bd960dba477acb670553cb84eb6
+  languageName: node
+  linkType: hard
+
 "object-assign@npm:^4.0.1, object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"

Original file line number	Diff line number	Diff line change
`@@ -44,6 +44,7 @@ export type QuestionScorePerWeek = {`
`44`	`44`	`questionId: string`
`45`	`45`	`question: string`
`46`	`46`	`answers: Record<AnswerLevel, string>`
	`47`	`+ isCurrent: boolean`
`47`	`48`	`}`
`48`	`49`	`scoring: QuestionScoring[]`
`49`	`50`	`}`