separate functionality between refreshing answer and warning

kartverket · Dec 16, 2024 · 78d92a1 · 78d92a1
1 parent cb1a4a7
commit 78d92a1
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 105 deletions.
diff --git a/frontend/beCompliant/src/components/answers/CheckboxAnswer.tsx b/frontend/beCompliant/src/components/answers/CheckboxAnswer.tsx
@@ -1,7 +1,5 @@
 import { Checkbox, Stack } from '@kvib/react';
 import { LastUpdated } from '../table/LastUpdated';
-import { LastUpdatedQuestionPage } from '../questionPage/LastUpdatedQuestionPage';
-import { RefreshAnswer } from '../table/RefreshAnswer';
 
 type Props = {
   value: string | undefined;
@@ -44,17 +42,13 @@ export function CheckboxAnswer({
             : choices[1]
           : ''}
       </Checkbox>
-      <RefreshAnswer
+      <LastUpdated
         updated={updated}
         answerExpiry={answerExpiry}
         submitAnswer={submitAnswer}
         value={value}
+        isActivityPageView={isActivityPageView}
       />
-      {isActivityPageView ? (
-        <LastUpdated updated={updated} />
-      ) : (
-        <LastUpdatedQuestionPage lastUpdated={updated} />
-      )}
     </Stack>
   );
 }
diff --git a/frontend/beCompliant/src/components/answers/PercentAnswer.tsx b/frontend/beCompliant/src/components/answers/PercentAnswer.tsx
@@ -7,8 +7,6 @@ import {
 } from '@kvib/react';
 import { LastUpdated } from '../table/LastUpdated';
 import { useRef } from 'react';
-import { LastUpdatedQuestionPage } from '../questionPage/LastUpdatedQuestionPage';
-import { RefreshAnswer } from '../table/RefreshAnswer';
 
 type Props = {
   value: string | undefined;
@@ -73,17 +71,13 @@ export function PercentAnswer({
           />
         </InputGroup>
       </Stack>
-      <RefreshAnswer
+      <LastUpdated
         updated={updated}
         answerExpiry={answerExpiry}
         submitAnswer={submitAnswer}
         value={value}
+        isActivityPageView={isActivityPageView}
       />
-      {isActivityPageView ? (
-        <LastUpdated updated={updated} />
-      ) : (
-        <LastUpdatedQuestionPage lastUpdated={updated} />
-      )}
     </Stack>
   );
 }
diff --git a/frontend/beCompliant/src/components/answers/SingleSelectAnswer.tsx b/frontend/beCompliant/src/components/answers/SingleSelectAnswer.tsx
@@ -2,7 +2,6 @@ import { Option } from '../../api/types';
 import { Select, Stack } from '@kvib/react';
 import { LastUpdated } from '../table/LastUpdated';
 import colorUtils from '../../utils/colorUtils';
-import { RefreshAnswer } from '../table/RefreshAnswer';
 
 type Props = {
   value: string | undefined;
@@ -56,13 +55,13 @@ export function SingleSelectAnswer({
           </option>
         ))}
       </Select>
-      <RefreshAnswer
+      <LastUpdated
         updated={updated}
-        answerExpiry={answerExpiry}
         submitAnswer={submitAnswer}
         value={value}
+        answerExpiry={answerExpiry}
+        isActivityPageView
       />
-      <LastUpdated updated={updated} />
     </Stack>
   );
 }
diff --git a/frontend/beCompliant/src/components/answers/TextAnswer.tsx b/frontend/beCompliant/src/components/answers/TextAnswer.tsx
@@ -1,7 +1,6 @@
 import { Input, Stack, Textarea } from '@kvib/react';
 import { LastUpdated } from '../table/LastUpdated';
 import { useRef } from 'react';
-import { RefreshAnswer } from '../table/RefreshAnswer';
 
 type Props = {
   value: string | undefined;
@@ -47,13 +46,13 @@ export function TextAnswer({
           <Input value={value} onChange={handleTextAnswer} background="white" />
         )}
       </Stack>
-      <RefreshAnswer
+      <LastUpdated
         updated={updated}
         answerExpiry={answerExpiry}
         submitAnswer={submitAnswer}
         value={value}
+        isActivityPageView
       />
-      <LastUpdated updated={updated} />
     </Stack>
   );
 }
diff --git a/frontend/beCompliant/src/components/answers/TimeAnswer.tsx b/frontend/beCompliant/src/components/answers/TimeAnswer.tsx
@@ -8,8 +8,6 @@ import {
 } from '@kvib/react';
 import { LastUpdated } from '../table/LastUpdated';
 import { useEffect, useRef } from 'react';
-import { LastUpdatedQuestionPage } from '../questionPage/LastUpdatedQuestionPage';
-import { RefreshAnswer } from '../table/RefreshAnswer';
 
 type Props = {
   value: string | undefined;
@@ -92,18 +90,14 @@ export function TimeAnswer({
           </NumberInput>
         </InputGroup>
       </Stack>
-      <RefreshAnswer
+      <LastUpdated
         updated={updated}
         answerExpiry={answerExpiry}
         submitAnswer={submitAnswer}
         value={value}
         unitAnswer={unit}
+        isActivityPageView={isActivityPageView}
       />
-      {isActivityPageView ? (
-        <LastUpdated updated={updated} />
-      ) : (
-        <LastUpdatedQuestionPage lastUpdated={updated} />
-      )}
     </Stack>
   );
 }
diff --git a/frontend/beCompliant/src/components/questionPage/LastUpdatedQuestionPage.tsx b/frontend/beCompliant/src/components/questionPage/LastUpdatedQuestionPage.tsx
diff --git a/frontend/beCompliant/src/components/questionPage/RadioAnswer.tsx b/frontend/beCompliant/src/components/questionPage/RadioAnswer.tsx
@@ -1,8 +1,7 @@
 import { Text, RadioGroup, Radio, Stack, Flex } from '@kvib/react';
 import { useSubmitAnswers } from '../../hooks/useSubmitAnswers';
 import { Question, User } from '../../api/types';
-import { LastUpdatedQuestionPage } from './LastUpdatedQuestionPage';
-import { RefreshAnswer } from '../table/RefreshAnswer';
+import { LastUpdated } from '../table/LastUpdated';
 
 type Props = {
   question: Question;
@@ -61,13 +60,12 @@ export function RadioAnswer({
           ))}
         </Stack>
       </RadioGroup>
-      <RefreshAnswer
+      <LastUpdated
         updated={lastUpdated}
         answerExpiry={answerExpiry}
         submitAnswer={submitRadioAnswer}
         value={latestAnswer}
       />
-      <LastUpdatedQuestionPage lastUpdated={lastUpdated} />
     </Flex>
   );
 }
diff --git a/frontend/beCompliant/src/components/questionPage/TextAreaAnswer.tsx b/frontend/beCompliant/src/components/questionPage/TextAreaAnswer.tsx
@@ -2,8 +2,7 @@ import { Text, Textarea, Stack, Flex } from '@kvib/react';
 import { useSubmitAnswers } from '../../hooks/useSubmitAnswers';
 import { Question, User } from '../../api/types';
 import { useEffect, useState } from 'react';
-import { LastUpdatedQuestionPage } from './LastUpdatedQuestionPage';
-import { RefreshAnswer } from '../table/RefreshAnswer';
+import { LastUpdated } from '../table/LastUpdated';
 
 type Props = {
   question: Question;
@@ -67,13 +66,12 @@ export function TextAreaAnswer({
           }}
         />
       </Stack>
-      <RefreshAnswer
+      <LastUpdated
         updated={lastUpdated}
         answerExpiry={answerExpiry}
         submitAnswer={submitTextAnswer}
         value={latestAnswer}
       />
-      <LastUpdatedQuestionPage lastUpdated={lastUpdated} />
     </Flex>
   );
 }
diff --git a/frontend/beCompliant/src/components/table/Comment.tsx b/frontend/beCompliant/src/components/table/Comment.tsx
@@ -185,7 +185,7 @@ export function Comment({
           />
         </Flex>
       </Flex>
-      <LastUpdated updated={updated} />
+      <LastUpdated updated={updated} isComment isActivityPageView />
       <DeleteCommentModal
         onOpen={onDeleteOpen}
         onClose={onDeleteClose}

diff --git a/frontend/beCompliant/src/components/table/LastUpdated.tsx b/frontend/beCompliant/src/components/table/LastUpdated.tsx
@@ -1,17 +1,83 @@
-import { Stack, Text } from '@kvib/react';
+import { Stack, Text, IconButton, Tooltip, Icon, Box } from '@kvib/react';
 import { formatDateTime } from '../../utils/formatTime';
 
 type Props = {
   updated?: Date;
+  submitAnswer?: (newAnswer: string, unit?: string) => void;
+  value?: string | undefined;
+  unitAnswer?: string;
+  answerExpiry?: number | null;
+  isComment?: boolean;
+  isActivityPageView?: boolean;
 };
 
-export function LastUpdated({ updated }: Props) {
+export function LastUpdated({
+  updated,
+  submitAnswer,
+  value,
+  unitAnswer,
+  answerExpiry,
+  isComment,
+  isActivityPageView,
+}: Props) {
   if (!updated) return null;
 
+  const isOlderThan = (updated: Date, weeks?: number | null): boolean => {
+    const currentDate = new Date();
+    const millisecondsInAWeek = 7 * 24 * 60 * 60 * 1000; // One week in milliseconds
+    const threshold = weeks
+      ? weeks * millisecondsInAWeek
+      : 30 * 24 * 60 * 60 * 1000; // Use weeks or default to 30 days
+    return currentDate.getTime() - updated.getTime() > threshold;
+  };
+
   return (
-    <Stack color="gray" fontSize="xs" spacing={1} direction="row">
-      <Text fontWeight="bold">Sist endret:</Text>
-      <Text fontWeight="medium">{formatDateTime(updated)}</Text>
+    <Stack
+      color="gray"
+      fontSize={isActivityPageView ? 'xs' : 'md'}
+      spacing={1}
+      direction="row"
+      alignItems="center"
+    >
+      <Text
+        fontWeight={isActivityPageView ? 'bold' : 'semibold'}
+        color={isActivityPageView ? 'gray' : 'black'}
+      >
+        Sist endret:
+      </Text>
+      {!isComment && isOlderThan(updated, answerExpiry) && (
+        <Tooltip label="Svaret må oppdateres" aria-label="Svaret må oppdateres">
+          <Box as="span">
+            <Icon icon="warning" color="red" size={28} />
+          </Box>
+        </Tooltip>
+      )}
+      <Text
+        fontWeight={isActivityPageView ? 'medium' : 'semibold'}
+        color={
+          isOlderThan(updated, answerExpiry) && !isComment
+            ? 'red'
+            : isActivityPageView
+              ? 'gray'
+              : 'black'
+        }
+      >
+        {formatDateTime(updated)}
+      </Text>
+      {!isComment && submitAnswer && (
+        <Tooltip label="Forny svaret" aria-label="Forny svaret">
+          <IconButton
+            aria-label="Forny svaret"
+            icon="autorenew"
+            color="black"
+            variant="tertiary"
+            size="md"
+            onClick={() => {
+              submitAnswer(value ?? '', unitAnswer);
+            }}
+          />
+        </Tooltip>
+      )}
     </Stack>
   );
 }
diff --git a/frontend/beCompliant/src/components/table/RefreshAnswer.tsx b/frontend/beCompliant/src/components/table/RefreshAnswer.tsx