From 6a80195b39f4e1e20b68cd8b9f802f46c6865520 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B3n=20Bjarni=20=C3=93lafsson?=
 <dev.jonbjarni@gmail.com>
Date: Thu, 17 Oct 2024 10:19:42 +0000
Subject: [PATCH 1/3] Updated graphql layer for comments and fixed editor css.

---
 .../src/lib/mappers.ts                        |  11 ++
 .../src/lib/ojoiApplication.resolver.ts       |   4 +-
 .../src/lib/ojoiApplication.service.ts        |  37 +++-
 .../src/models/getComments.input.ts           |   2 +-
 .../src/models/getComments.response.ts        |  55 ++----
 .../src/models/postComment.input.ts           |   2 +-
 .../src/components/comments/Comment.tsx       |  73 +++-----
 .../src/components/comments/CommentList.tsx   |   6 +-
 .../components/htmlEditor/HTMLEditor.css.ts   | 172 ++++++++---------
 .../components/input/OJOIHtmlController.tsx   |   1 -
 .../src/fields/Comments.tsx                   |  12 +-
 .../src/graphql/queries.ts                    |  36 ++--
 .../src/hooks/useComments.ts                  |  13 +-
 .../src/hooks/useTypes.ts                     |  24 ++-
 .../src/lib/utils.ts                          |  13 +-
 .../src/screens/AdvertScreen.tsx              |   2 +-
 .../application/src/clientConfig.json         | 176 +++++-------------
 17 files changed, 277 insertions(+), 362 deletions(-)

diff --git a/libs/api/domains/official-journal-of-iceland-application/src/lib/mappers.ts b/libs/api/domains/official-journal-of-iceland-application/src/lib/mappers.ts
index e88a77424d14..96ed537978c9 100644
--- a/libs/api/domains/official-journal-of-iceland-application/src/lib/mappers.ts
+++ b/libs/api/domains/official-journal-of-iceland-application/src/lib/mappers.ts
@@ -42,3 +42,14 @@ export const mapGetAttachmentType = (
       return GetApplicationAttachmentsTypeEnum.Fylgiskjol
   }
 }
+
+type EnumType = { [s: string | number]: string }
+
+export const safeEnumMapper = <T extends EnumType>(
+  val: unknown,
+  enumType: T,
+): T[keyof T] | null => {
+  const found = Object.values(enumType).find((enumVal) => enumVal === val)
+
+  return found ? (found as T[keyof T]) : null
+}
diff --git a/libs/api/domains/official-journal-of-iceland-application/src/lib/ojoiApplication.resolver.ts b/libs/api/domains/official-journal-of-iceland-application/src/lib/ojoiApplication.resolver.ts
index 24806165906d..60c33adf68f3 100644
--- a/libs/api/domains/official-journal-of-iceland-application/src/lib/ojoiApplication.resolver.ts
+++ b/libs/api/domains/official-journal-of-iceland-application/src/lib/ojoiApplication.resolver.ts
@@ -36,7 +36,7 @@ export class OfficialJournalOfIcelandApplicationResolver {
   ) {}
 
   @Query(() => GetCommentsResponse, {
-    name: 'officialJournalOfIcelandApplicationGetComments',
+    name: 'OJOIAGetComments',
   })
   getComments(
     @Args('input') input: GetCommentsInput,
@@ -46,7 +46,7 @@ export class OfficialJournalOfIcelandApplicationResolver {
   }
 
   @Mutation(() => PostCommentResponse, {
-    name: 'officialJournalOfIcelandApplicationPostComment',
+    name: 'OJOIAPostComment',
   })
   postComment(
     @Args('input') input: PostCommentInput,
diff --git a/libs/api/domains/official-journal-of-iceland-application/src/lib/ojoiApplication.service.ts b/libs/api/domains/official-journal-of-iceland-application/src/lib/ojoiApplication.service.ts
index 3e445003a633..16ae03302b89 100644
--- a/libs/api/domains/official-journal-of-iceland-application/src/lib/ojoiApplication.service.ts
+++ b/libs/api/domains/official-journal-of-iceland-application/src/lib/ojoiApplication.service.ts
@@ -10,6 +10,7 @@ import {
   mapAttachmentType,
   mapGetAttachmentType,
   mapPresignedUrlType,
+  safeEnumMapper,
 } from './mappers'
 import { AddApplicationAttachmentResponse } from '../models/addApplicationAttachment.response'
 import { GetApplicationAttachmentInput } from '../models/getApplicationAttachment.input'
@@ -18,6 +19,10 @@ import { LOGGER_PROVIDER } from '@island.is/logging'
 import type { Logger } from '@island.is/logging'
 import { User } from '@island.is/auth-nest-tools'
 import { GetUserInvolvedPartiesInput } from '../models/getUserInvolvedParties.input'
+import {
+  CommentDirection,
+  GetCommentsResponse,
+} from '../models/getComments.response'
 
 const LOG_CATEGORY = 'official-journal-of-iceland-application'
 
@@ -29,12 +34,38 @@ export class OfficialJournalOfIcelandApplicationService {
     private readonly ojoiApplicationService: OfficialJournalOfIcelandApplicationClientService,
   ) {}
 
-  async getComments(input: GetCommentsInput, user: User) {
-    return this.ojoiApplicationService.getComments(input, user)
+  async getComments(
+    input: GetCommentsInput,
+    user: User,
+  ): Promise<GetCommentsResponse> {
+    const incomingComments = await this.ojoiApplicationService.getComments(
+      input,
+      user,
+    )
+
+    const mapped = incomingComments.comments.map((c) => {
+      const directonEnum =
+        safeEnumMapper(c.direction, CommentDirection) ??
+        CommentDirection.RECEIVED
+
+      return {
+        id: c.id,
+        age: c.age,
+        direction: directonEnum,
+        title: c.title,
+        comment: c.comment,
+        creator: c.creator,
+        receiver: c.receiver,
+      }
+    })
+
+    return {
+      comments: mapped,
+    }
   }
 
   async postComment(input: PostCommentInput, user: User) {
-    const success = this.ojoiApplicationService.postComment(
+    const success = await this.ojoiApplicationService.postComment(
       {
         id: input.id,
         postApplicationComment: {
diff --git a/libs/api/domains/official-journal-of-iceland-application/src/models/getComments.input.ts b/libs/api/domains/official-journal-of-iceland-application/src/models/getComments.input.ts
index e7280e28e484..813a6809cfa9 100644
--- a/libs/api/domains/official-journal-of-iceland-application/src/models/getComments.input.ts
+++ b/libs/api/domains/official-journal-of-iceland-application/src/models/getComments.input.ts
@@ -1,6 +1,6 @@
 import { Field, ID, InputType } from '@nestjs/graphql'
 
-@InputType('OfficialJournalOfIcelandApplicationGetCommentsInput')
+@InputType('OJOIAGetCommentsInput')
 export class GetCommentsInput {
   @Field(() => ID)
   id!: string
diff --git a/libs/api/domains/official-journal-of-iceland-application/src/models/getComments.response.ts b/libs/api/domains/official-journal-of-iceland-application/src/models/getComments.response.ts
index fac5a5b5a0c0..6dfb8ae78006 100644
--- a/libs/api/domains/official-journal-of-iceland-application/src/models/getComments.response.ts
+++ b/libs/api/domains/official-journal-of-iceland-application/src/models/getComments.response.ts
@@ -1,56 +1,39 @@
-import { Field, ID, ObjectType } from '@nestjs/graphql'
+import { Field, ID, ObjectType, registerEnumType } from '@nestjs/graphql'
 
-@ObjectType('OfficialJournalOfIcelandApplicationEntity')
-export class CaseCommentEntity {
-  @Field(() => ID)
-  id!: string
-
-  @Field()
-  title!: string
-
-  @Field()
-  slug!: string
+export enum CommentDirection {
+  SENT = 'sent',
+  RECEIVED = 'received',
 }
-@ObjectType('OfficialJournalOfIcelandApplicationCommentTask')
-export class CaseCommentTask {
-  @Field(() => String, { nullable: true })
-  from!: string | null
-
-  @Field(() => String, { nullable: true })
-  to!: string | null
 
-  @Field(() => CaseCommentEntity)
-  title!: CaseCommentEntity
+registerEnumType(CommentDirection, {
+  name: 'OJOICommentDirection',
+})
 
-  @Field(() => String, { nullable: true })
-  comment!: string | null
-}
-
-@ObjectType('OfficialJournalOfIcelandApplicationComment')
+@ObjectType('OJOIAComment')
 export class CaseComment {
   @Field(() => ID)
   id!: string
 
   @Field()
-  createdAt!: string
+  age!: string
 
-  @Field()
-  internal!: boolean
+  @Field(() => CommentDirection)
+  direction!: CommentDirection
 
-  @Field(() => CaseCommentEntity)
-  type!: CaseCommentEntity
+  @Field()
+  title!: string
 
-  @Field(() => CaseCommentEntity)
-  status!: CaseCommentEntity
+  @Field(() => String, { nullable: true })
+  comment!: string | null
 
   @Field(() => String, { nullable: true })
-  state!: string | null
+  creator!: string | null
 
-  @Field(() => CaseCommentTask)
-  task!: CaseCommentTask
+  @Field(() => String, { nullable: true })
+  receiver!: string | null
 }
 
-@ObjectType('OfficialJournalOfIcelandApplicationGetCommentsResponse')
+@ObjectType('OJOIAGetCommentsResponse')
 export class GetCommentsResponse {
   @Field(() => [CaseComment])
   comments!: CaseComment[]
diff --git a/libs/api/domains/official-journal-of-iceland-application/src/models/postComment.input.ts b/libs/api/domains/official-journal-of-iceland-application/src/models/postComment.input.ts
index a226457cad5a..b8a543e2220b 100644
--- a/libs/api/domains/official-journal-of-iceland-application/src/models/postComment.input.ts
+++ b/libs/api/domains/official-journal-of-iceland-application/src/models/postComment.input.ts
@@ -1,6 +1,6 @@
 import { Field, ID, InputType } from '@nestjs/graphql'
 
-@InputType('OfficialJournalOfIcelandApplicationPostCommentInput')
+@InputType('OJOIAPostCommentInput')
 export class PostCommentInput {
   @Field(() => ID)
   id!: string
diff --git a/libs/application/templates/official-journal-of-iceland/src/components/comments/Comment.tsx b/libs/application/templates/official-journal-of-iceland/src/components/comments/Comment.tsx
index 571f29e2b32c..4907bba13d81 100644
--- a/libs/application/templates/official-journal-of-iceland/src/components/comments/Comment.tsx
+++ b/libs/application/templates/official-journal-of-iceland/src/components/comments/Comment.tsx
@@ -2,64 +2,45 @@ import { Box, Icon, Text } from '@island.is/island-ui/core'
 import * as styles from './Comments.css'
 import { useLocale } from '@island.is/localization'
 import { comments } from '../../lib/messages/comments'
-import { countDaysAgo } from '../../lib/utils'
-import { Maybe } from 'graphql/jsutils/Maybe'
-export type Props = {
-  as?: 'div' | 'li'
-  date?: string
-  from?: string
-  task?: string
-  comment?: Maybe<string>
-  type?: 'sent' | 'received'
-}
+import { OjoiCommentDirection, OjoiaComment } from '@island.is/api/schema'
+export type Props = OjoiaComment
 
 export const Comment = ({
-  as = 'li',
-  date,
-  from,
-  task,
+  id,
+  age,
+  title,
+  direction,
+  creator,
+  receiver,
   comment,
-  type,
-}: Props) => {
-  const Wrapper = as
-
+}: OjoiaComment) => {
   const { formatMessage: f } = useLocale()
 
-  const daysAgo = date ? countDaysAgo(new Date(date)) : null
-
-  const many = f(comments.dates.xDaysAgo, {
-    days: daysAgo,
-  })
-
-  const yesterDay = f(comments.dates.yesterday)
-  const today = f(comments.dates.today)
-
-  const msg = daysAgo === 0 ? today : daysAgo === 1 ? yesterDay : many
-
   return (
-    <Wrapper className={styles.comment}>
+    <li key={id} className={styles.comment}>
       <Box className={styles.iconColumn}>
-        {type && (
-          <Box className={styles.iconWrapper}>
-            <Icon
-              useStroke={true}
-              icon={type === 'received' ? 'arrowForward' : 'arrowBack'}
-              type="filled"
-              color="white"
-            />
-          </Box>
-        )}
+        <Box className={styles.iconWrapper}>
+          <Icon
+            useStroke={true}
+            icon={
+              direction === OjoiCommentDirection.RECEIVED
+                ? 'arrowBack'
+                : 'arrowForward'
+            }
+            type="filled"
+            color="white"
+          />
+        </Box>
       </Box>
       <Box className={styles.contentColumn}>
         <Text>
-          <strong>{from ? from : f(comments.unknownUser.name)}</strong>{' '}
-          {task && `${task}`}
+          <strong>{creator ? creator : f(comments.unknownUser.name)}</strong>{' '}
+          {title && `${title}`}
+          {receiver && ` ${receiver}`}
         </Text>
         <Text>{comment}</Text>
       </Box>
-      <Box className={styles.dateColumn}>
-        {daysAgo !== null && <Text truncate>{msg}</Text>}
-      </Box>
-    </Wrapper>
+      <Box className={styles.dateColumn}>{age}</Box>
+    </li>
   )
 }
diff --git a/libs/application/templates/official-journal-of-iceland/src/components/comments/CommentList.tsx b/libs/application/templates/official-journal-of-iceland/src/components/comments/CommentList.tsx
index 7da90fa08760..29ab554f1770 100644
--- a/libs/application/templates/official-journal-of-iceland/src/components/comments/CommentList.tsx
+++ b/libs/application/templates/official-journal-of-iceland/src/components/comments/CommentList.tsx
@@ -1,11 +1,11 @@
 import { SkeletonLoader } from '@island.is/island-ui/core'
-import type { Props as CommentProps } from './Comment'
 import { Comment } from './Comment'
 import * as styles from './Comments.css'
 import { OJOI_INPUT_HEIGHT } from '../../lib/constants'
+import { OjoiaComment } from '@island.is/api/schema'
 
 type Props = {
-  comments?: CommentProps[]
+  comments?: Array<OjoiaComment>
   loading?: boolean
 }
 
@@ -24,7 +24,7 @@ export const CommentsList = ({ comments, loading }: Props) => {
   return (
     <ul className={styles.commentsList}>
       {comments?.map((comment, index) => (
-        <Comment key={index} {...comment} as="li" />
+        <Comment key={index} {...comment} />
       ))}
     </ul>
   )
diff --git a/libs/application/templates/official-journal-of-iceland/src/components/htmlEditor/HTMLEditor.css.ts b/libs/application/templates/official-journal-of-iceland/src/components/htmlEditor/HTMLEditor.css.ts
index e2b56a691069..948cc49e19b7 100644
--- a/libs/application/templates/official-journal-of-iceland/src/components/htmlEditor/HTMLEditor.css.ts
+++ b/libs/application/templates/official-journal-of-iceland/src/components/htmlEditor/HTMLEditor.css.ts
@@ -526,92 +526,92 @@ globalStyle(`${classes.warnings__item_high}::marker`, {
     pointerEvents: 'none', // hax to prevent link clicks :/
   })
 
-  global('.signatures', {
-    display: 'grid',
-    gap: '1ch',
-    gridTemplateColumns: '1fr 1fr',
-  })
-
-  global('.signature__group + .signature__group', {
-    marginTop: '3ch',
-  })
-
-  global('.signatures.single', {
-    gridTemplateColumns: '1fr',
-  })
-
-  global('.signatures.double', {
-    gridTemplateColumns: '1fr 1fr',
-  })
-
-  global('.signatures.triple', {
-    gridTemplateColumns: '1fr 1fr 1fr',
-  })
-
-  global('.signatures.chairman', {
-    marginBottom: '2ch',
-  })
-
-  global('.signature', {
-    marginTop: '0',
-    fontSize: 16,
-    fontWeight: typography.semiBold,
-    textAlign: 'center',
-  })
-
-  global('.signature__title', {
-    marginTop: '0',
-    marginBottom: '1ch',
-    fontSize: 14,
-    fontStyle: 'italic',
-    fontWeight: typography.regular,
-    textAlign: 'center',
-  })
-
-  global('.signature__above', {
-    marginTop: 0,
-    marginBottom: 0,
-    fontSize: 14,
-    fontStyle: 'normal',
-    fontWeight: typography.regular,
-    textAlign: 'center',
-  })
-
-  global('.signature__nameWrapper', {
-    lineHeight: 1.2,
-    textAlign: 'center',
-    fontSize: 14,
-  })
-
-  global('.signature__name', {
-    fontWeight: typography.semiBold,
-    marginBottom: '0',
-  })
-
-  global('.signature__textAfter', {
-    fontSize: 14,
-    fontWeight: typography.regular,
-  })
-
-  global('.signature__textBelow', {
-    fontSize: 14,
-    textAlign: 'center',
-    fontWeight: typography.regular,
-  })
-
-  global('.signature__footer', {
-    marginTop: '2ch',
-    fontSize: 14,
-    textAlign: 'center',
-    fontWeight: typography.semiBold,
-  })
-
-  global('.signature__additional', {
-    marginTop: '2ch',
-    fontStyle: 'italic',
-    fontSize: 14,
-    textAlign: 'right',
-  })
+  // global('.signatures', {
+  //   display: 'grid',
+  //   gap: '1ch',
+  //   gridTemplateColumns: '1fr 1fr',
+  // })
+
+  // global('.signature__group + .signature__group', {
+  //   marginTop: '3ch',
+  // })
+
+  // global('.signatures.single', {
+  //   gridTemplateColumns: '1fr',
+  // })
+
+  // global('.signatures.double', {
+  //   gridTemplateColumns: '1fr 1fr',
+  // })
+
+  // global('.signatures.triple', {
+  //   gridTemplateColumns: '1fr 1fr 1fr',
+  // })
+
+  // global('.signatures.chairman', {
+  //   marginBottom: '2ch',
+  // })
+
+  // global('.signature', {
+  //   marginTop: '0',
+  //   // fontSize: 16,
+  //   fontWeight: typography.semiBold,
+  //   textAlign: 'center',
+  // })
+
+  // global('.signature__title', {
+  //   marginTop: '0',
+  //   marginBottom: '1ch',
+  //   // fontSize: 14,
+  //   fontStyle: 'italic',
+  //   fontWeight: typography.regular,
+  //   textAlign: 'center',
+  // })
+
+  // global('.signature__above', {
+  //   marginTop: 0,
+  //   marginBottom: 0,
+  //   // fontSize: 14,
+  //   fontStyle: 'normal',
+  //   fontWeight: typography.regular,
+  //   textAlign: 'center',
+  // })
+
+  // global('.signature__nameWrapper', {
+  //   lineHeight: 1.2,
+  //   textAlign: 'center',
+  //   fontSize: 14,
+  // })
+
+  // global('.signature__name', {
+  //   fontWeight: typography.semiBold,
+  //   marginBottom: '0',
+  // })
+
+  // global('.signature__textAfter', {
+  //   fontSize: 14,
+  //   fontWeight: typography.regular,
+  // })
+
+  // global('.signature__textBelow', {
+  //   fontSize: 14,
+  //   textAlign: 'center',
+  //   fontWeight: typography.regular,
+  // })
+
+  // global('.signature__footer', {
+  //   marginTop: '2ch',
+  //   fontSize: 14,
+  //   textAlign: 'center',
+  //   fontWeight: typography.semiBold,
+  // })
+
+  // global('.signature__additional', {
+  //   marginTop: '2ch',
+  //   fontStyle: 'italic',
+  //   fontSize: 14,
+  //   textAlign: 'right',
+  // })
 
   global('.document-content', {
     marginBottom: '2ch',
diff --git a/libs/application/templates/official-journal-of-iceland/src/components/input/OJOIHtmlController.tsx b/libs/application/templates/official-journal-of-iceland/src/components/input/OJOIHtmlController.tsx
index d3426936f725..9eb509949f6c 100644
--- a/libs/application/templates/official-journal-of-iceland/src/components/input/OJOIHtmlController.tsx
+++ b/libs/application/templates/official-journal-of-iceland/src/components/input/OJOIHtmlController.tsx
@@ -54,7 +54,6 @@ export const OJOIHtmlController = ({
     >
       <Editor
         key={editorKey}
-        config={baseConfig}
         classes={classes}
         fileUploader={fileUploader}
         valueRef={valueRef}
diff --git a/libs/application/templates/official-journal-of-iceland/src/fields/Comments.tsx b/libs/application/templates/official-journal-of-iceland/src/fields/Comments.tsx
index fce2af1b6dab..74d076a805ac 100644
--- a/libs/application/templates/official-journal-of-iceland/src/fields/Comments.tsx
+++ b/libs/application/templates/official-journal-of-iceland/src/fields/Comments.tsx
@@ -70,17 +70,7 @@ export const Comments = ({ application }: OJOIFieldBaseProps) => {
             paddingBottom={5}
             background="blue100"
           >
-            <CommentsList
-              comments={comments?.map((comment) => {
-                return {
-                  task: comment.task.title.title,
-                  comment: comment.task.comment,
-                  from: comment.task.from ?? undefined,
-                  date: comment.createdAt,
-                  type: 'received', // TODO: Implement sent comments
-                }
-              })}
-            />
+            <CommentsList comments={comments} />
           </Box>
         )}
         <AddComment
diff --git a/libs/application/templates/official-journal-of-iceland/src/graphql/queries.ts b/libs/application/templates/official-journal-of-iceland/src/graphql/queries.ts
index 983c447c0cef..04745ba9f3c3 100644
--- a/libs/application/templates/official-journal-of-iceland/src/graphql/queries.ts
+++ b/libs/application/templates/official-journal-of-iceland/src/graphql/queries.ts
@@ -281,38 +281,24 @@ export const DELETE_APPLICATION_ATTACHMENT_MUTATION = gql`
 `
 
 export const GET_COMMENTS_QUERY = gql`
-  query GetComments(
-    $input: OfficialJournalOfIcelandApplicationGetCommentsInput!
-  ) {
-    officialJournalOfIcelandApplicationGetComments(input: $input) {
+  query GetComments($input: OJOIAGetCommentsInput!) {
+    OJOIAGetComments(input: $input) {
       comments {
-        createdAt
-        type {
-          title
-        }
-        task {
-          from
-          to
-          title {
-            title
-          }
-          comment
-        }
-        status {
-          id
-          title
-          slug
-        }
+        id
+        age
+        title
+        direction
+        comment
+        creator
+        receiver
       }
     }
   }
 `
 
 export const POST_COMMENT_MUTATION = gql`
-  mutation AddComment(
-    $input: OfficialJournalOfIcelandApplicationPostCommentInput!
-  ) {
-    officialJournalOfIcelandApplicationPostComment(input: $input) {
+  mutation AddComment($input: OJOIAPostCommentInput!) {
+    OJOIAPostComment(input: $input) {
       success
     }
   }
diff --git a/libs/application/templates/official-journal-of-iceland/src/hooks/useComments.ts b/libs/application/templates/official-journal-of-iceland/src/hooks/useComments.ts
index aa09fb08b847..8f4788030e05 100644
--- a/libs/application/templates/official-journal-of-iceland/src/hooks/useComments.ts
+++ b/libs/application/templates/official-journal-of-iceland/src/hooks/useComments.ts
@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from '@apollo/client'
-import { OfficialJournalOfIcelandApplicationGetCommentsResponse } from '@island.is/api/schema'
+import { OjoiaGetCommentsResponse } from '@island.is/api/schema'
 import { POST_COMMENT_MUTATION, GET_COMMENTS_QUERY } from '../graphql/queries'
 
 type Props = {
@@ -7,7 +7,7 @@ type Props = {
 }
 
 type CommentsResponse = {
-  officialJournalOfIcelandApplicationGetComments: OfficialJournalOfIcelandApplicationGetCommentsResponse
+  OJOIAGetComments: OjoiaGetCommentsResponse
 }
 
 export type AddCommentVariables = {
@@ -15,7 +15,7 @@ export type AddCommentVariables = {
 }
 
 type PostCommentResponse = {
-  officialJournalOfIcelandApplicationPostComment: {
+  OJOIAPostComment: {
     success: boolean
   }
 }
@@ -46,6 +46,8 @@ export const useComments = ({ applicationId }: Props) => {
     },
   })
 
+  console.log('data', data)
+
   const addComment = (variables: AddCommentVariables, cb?: () => void) => {
     addCommentMutation({
       variables: {
@@ -60,14 +62,13 @@ export const useComments = ({ applicationId }: Props) => {
   }
 
   return {
-    comments: data?.officialJournalOfIcelandApplicationGetComments.comments,
+    comments: data?.OJOIAGetComments.comments,
     loading,
     error,
     refetchComments: refetch,
     addComment,
     addCommentLoading,
     addCommentError,
-    addCommentSuccess:
-      addCommentSuccess?.officialJournalOfIcelandApplicationPostComment.success,
+    addCommentSuccess: addCommentSuccess?.OJOIAPostComment.success,
   }
 }
diff --git a/libs/application/templates/official-journal-of-iceland/src/hooks/useTypes.ts b/libs/application/templates/official-journal-of-iceland/src/hooks/useTypes.ts
index 61d05bb9a6c7..26e1ec4cf53f 100644
--- a/libs/application/templates/official-journal-of-iceland/src/hooks/useTypes.ts
+++ b/libs/application/templates/official-journal-of-iceland/src/hooks/useTypes.ts
@@ -5,6 +5,8 @@ import { TYPES_QUERY } from '../graphql/queries'
 
 type UseTypesParams = {
   initalDepartmentId?: string
+  pageSize?: number
+  page?: number
 }
 
 type TypesResponse = {
@@ -13,7 +15,7 @@ type TypesResponse = {
 
 type TypesVariables = {
   params: {
-    department: string
+    department?: string
     page?: number
     pageSize?: number
   }
@@ -22,16 +24,26 @@ type TypesVariables = {
 export const useTypes = ({
   initalDepartmentId: departmentId,
 }: UseTypesParams) => {
+  const params: TypesVariables['params'] = {}
+
+  if (departmentId) {
+    params.department = departmentId
+  }
+
+  if (!params.page) {
+    params.page = 1
+  }
+
+  if (!params.pageSize) {
+    params.pageSize = 1000
+  }
+
   const { data, loading, error, refetch, networkStatus } = useQuery<
     TypesResponse,
     TypesVariables
   >(TYPES_QUERY, {
     variables: {
-      params: {
-        department: departmentId ?? '',
-        page: 1,
-        pageSize: 1000,
-      },
+      params: params,
     },
     notifyOnNetworkStatusChange: true,
   })
diff --git a/libs/application/templates/official-journal-of-iceland/src/lib/utils.ts b/libs/application/templates/official-journal-of-iceland/src/lib/utils.ts
index 01104ff2486c..65084060246f 100644
--- a/libs/application/templates/official-journal-of-iceland/src/lib/utils.ts
+++ b/libs/application/templates/official-journal-of-iceland/src/lib/utils.ts
@@ -176,7 +176,7 @@ const getMembersMarkup = (member: z.infer<typeof memberItemSchema>) => {
   }
 
   const aboveMarkup = member.above
-    ? `<p style="margin-bottom: ${styleObject.marginBottom}" margins align="center">${member.above}</p>`
+    ? `<p style="margin-bottom: 0;" align="center">${member.above}</p>`
     : ''
   const afterMarkup = member.after ? ` ${member.after}` : ''
   const belowMarkup = member.below
@@ -184,7 +184,7 @@ const getMembersMarkup = (member: z.infer<typeof memberItemSchema>) => {
     : ''
 
   return `
-    <div class="signature__member">
+    <div class="signature__member" style="margin-bottom: 1.5em;">
       ${aboveMarkup}
       <p style="margin-bottom: ${styleObject.marginBottom}" align="center"><strong>${member.name}</strong>${afterMarkup}</p>
       ${belowMarkup}
@@ -199,15 +199,16 @@ const signatureTemplate = (
 ) => {
   const markup = signatures
     ?.map((signature) => {
-      const membersCount = Math.min(signature.members?.length ?? 1, 3)
+      const membersCount = signature?.members?.length || 0
+
       const styleObject = {
         display: membersCount > 1 ? 'grid' : 'block',
         gridTemplateColumns:
           membersCount === 1
             ? '1fr'
-            : membersCount === 2 || membersCount === 4
-            ? '1fr 1fr'
-            : '1fr 1fr 1fr',
+            : membersCount === 3
+            ? '1fr 1fr 1fr'
+            : '1fr 1fr',
       }
 
       const date = signature.date
diff --git a/libs/application/templates/official-journal-of-iceland/src/screens/AdvertScreen.tsx b/libs/application/templates/official-journal-of-iceland/src/screens/AdvertScreen.tsx
index faf9108c8961..faee6dee3f07 100644
--- a/libs/application/templates/official-journal-of-iceland/src/screens/AdvertScreen.tsx
+++ b/libs/application/templates/official-journal-of-iceland/src/screens/AdvertScreen.tsx
@@ -7,7 +7,7 @@ import { Button } from '@island.is/island-ui/core'
 import { Advert } from '../fields/Advert'
 import { Signatures } from '../fields/Signatures'
 import { AdvertModal } from '../fields/AdvertModal'
-
+import { Comments } from '../fields/Comments'
 export const AdvertScreen = (props: OJOIFieldBaseProps) => {
   const { formatMessage: f } = useLocale()
   const [modalVisible, setModalVisability] = useState(false)
diff --git a/libs/clients/official-journal-of-iceland/application/src/clientConfig.json b/libs/clients/official-journal-of-iceland/application/src/clientConfig.json
index c46142918e35..238cd916d020 100644
--- a/libs/clients/official-journal-of-iceland/application/src/clientConfig.json
+++ b/libs/clients/official-journal-of-iceland/application/src/clientConfig.json
@@ -433,6 +433,11 @@
       "ApplicationAdvert": {
         "type": "object",
         "properties": {
+          "involvedPartyId": {
+            "type": "string",
+            "example": "a12c3d4e-5f67-8h90-1i23-j45k6l7m8n9o0",
+            "description": "Id of the involved party"
+          },
           "departmentId": {
             "type": "string",
             "example": "a12c3d4e-5f67-8h90-1i23-j45k6l7m8n9o0",
@@ -473,6 +478,7 @@
           }
         },
         "required": [
+          "involvedPartyId",
           "departmentId",
           "typeId",
           "title",
@@ -734,39 +740,35 @@
         "required": ["application"]
       },
       "CaseCommentType": {
-        "type": "object",
-        "properties": {
-          "id": {
-            "type": "string",
-            "description": "The title of the case comment type"
-          },
-          "title": {
-            "type": "string",
-            "enum": [
-              "submit",
-              "assign",
-              "assign-self",
-              "update",
-              "comment",
-              "message"
-            ],
-            "description": "The title of the case comment type"
-          },
-          "slug": {
-            "type": "string",
-            "description": "The slug of the case comment type"
-          }
-        },
-        "required": ["id", "title", "slug"]
+        "type": "string",
+        "description": "Title of the comment",
+        "enum": [
+          "Innsent af:",
+          "færir mál á",
+          "merkir sér málið.",
+          "færir mál í stöðuna:",
+          "gerir athugasemd.",
+          "skráir skilaboð"
+        ]
       },
-      "CaseStatus": {
+      "CaseCommentDirection": {
+        "type": "string",
+        "description": "Was the comment sent or received.",
+        "enum": ["sent", "received"]
+      },
+      "CaseComment": {
         "type": "object",
         "properties": {
           "id": {
             "type": "string",
-            "example": "d290f1ee-6c54-4b01-90e6-d701748f0851"
+            "example": "d290f1ee-6c54-4b01-90e6-d701748f0851",
+            "description": "Id of the case comment."
           },
           "title": {
+            "example": "f. 2 dögum",
+            "$ref": "#/components/schemas/CaseCommentType"
+          },
+          "caseStatus": {
             "type": "string",
             "enum": [
               "Innsent",
@@ -777,120 +779,38 @@
               "Tekið úr birtingu",
               "Birtingu hafnað"
             ],
-            "example": "Innsent",
-            "description": "Status of the case"
+            "description": "Case status of when the comment was created."
           },
-          "slug": {
+          "age": {
             "type": "string",
-            "example": "innsent",
-            "description": "Slug of the case staus"
-          }
-        },
-        "required": ["id", "title", "slug"]
-      },
-      "CaseCommentTitle": {
-        "type": "object",
-        "properties": {
-          "id": {
-            "type": "string",
-            "description": "The title of the case comment type"
+            "example": "f. 2 dögum",
+            "description": "String representation of the age of the case comment."
           },
-          "title": {
+          "ageIso": {
             "type": "string",
-            "enum": [
-              "Innsent af:",
-              "færir mál á",
-              "merkir sér málið.",
-              "færir mál í stöðuna:",
-              "gerir athugasemd.",
-              "skráir skilaboð"
-            ],
-            "description": "The title of the case comment type"
+            "description": "ISO date format representation of the age of the case comment."
           },
-          "slug": {
+          "direction": { "$ref": "#/components/schemas/CaseCommentDirection" },
+          "creator": {
             "type": "string",
-            "description": "The slug of the case comment type"
-          }
-        },
-        "required": ["id", "title", "slug"]
-      },
-      "CaseCommentTask": {
-        "type": "object",
-        "properties": {
-          "from": {
-            "type": "string",
-            "description": "From who or what initied the task, used by client to show who inited the task.",
-            "example": "Ármann",
-            "nullable": true
+            "description": "Who created the comment "
           },
-          "to": {
+          "receiver": {
             "type": "string",
-            "description": "To whom or what the task is assigned to.",
-            "example": "Pálina J",
-            "nullable": true
-          },
-          "title": {
-            "description": "Title for the task action",
-            "allOf": [{ "$ref": "#/components/schemas/CaseCommentTitle" }]
+            "description": "Who received the comment"
           },
-          "comment": {
-            "type": "string",
-            "description": "The comment itself",
-            "example": "Pálína, getur þú tekið við og staðfest að upplýsingarnar séu réttar?",
-            "nullable": true
-          }
-        },
-        "required": ["from", "to", "title", "comment"]
-      },
-      "CaseComment": {
-        "type": "object",
-        "properties": {
-          "id": {
-            "type": "string",
-            "example": "d290f1ee-6c54-4b01-90e6-d701748f0851",
-            "description": "Id of the case comment."
-          },
-          "createdAt": {
-            "type": "string",
-            "description": "Date and time of the comment, ISO 8601 format, UTC time format.",
-            "example": "2024-01-01T09:00:00Z"
-          },
-          "internal": {
-            "type": "boolean",
-            "description": "Is the comment internal or external.",
-            "example": false
-          },
-          "type": {
-            "description": "Type of the case task.",
-            "allOf": [{ "$ref": "#/components/schemas/CaseCommentType" }]
-          },
-          "status": {
-            "description": "Status of case when comment was added.",
-            "allOf": [{ "$ref": "#/components/schemas/CaseStatus" }]
-          },
-          "state": {
-            "type": "string",
-            "description": "JSON state of the application"
-          },
-          "task": {
-            "example": {
-              "from": "Ármann",
-              "to": null,
-              "title": "gerir athugasemd",
-              "comment": "Pálína, getur\n      þú tekið við og staðfest að upplýsingarnar séu réttar?"
-            },
-            "description": "The task itself",
-            "allOf": [{ "$ref": "#/components/schemas/CaseCommentTask" }]
-          }
+          "comment": { "type": "string", "description": "The comment itself" }
         },
         "required": [
           "id",
-          "createdAt",
-          "internal",
-          "type",
-          "status",
-          "state",
-          "task"
+          "title",
+          "caseStatus",
+          "age",
+          "ageIso",
+          "direction",
+          "creator",
+          "receiver",
+          "comment"
         ]
       },
       "GetCaseCommentsResponse": {

From 8e24e3a29fa804b155f774dbca028339c563336f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B3n=20Bjarni=20=C3=93lafsson?=
 <dev.jonbjarni@gmail.com>
Date: Fri, 18 Oct 2024 14:48:36 +0000
Subject: [PATCH 2/3] Search now working properly.

---
 .../OfficialJournalOfIceland/OJOIUtils.ts     |   4 +-
 .../OfficialJournalOfIceland/OJOIHome.tsx     |   2 -
 .../OfficialJournalOfIceland/OJOISearch.tsx   | 468 ++++++++++++------
 .../OfficialJournalOfIceland/hooks/index.ts   |   1 +
 .../hooks/useAdverts.ts                       |  55 ++
 .../lib/advert-params.mapper.ts               |  43 ++
 6 files changed, 431 insertions(+), 142 deletions(-)
 create mode 100644 apps/web/screens/OfficialJournalOfIceland/hooks/index.ts
 create mode 100644 apps/web/screens/OfficialJournalOfIceland/hooks/useAdverts.ts
 create mode 100644 apps/web/screens/OfficialJournalOfIceland/lib/advert-params.mapper.ts

diff --git a/apps/web/components/OfficialJournalOfIceland/OJOIUtils.ts b/apps/web/components/OfficialJournalOfIceland/OJOIUtils.ts
index 0c60d31b0225..e731a8059ea3 100644
--- a/apps/web/components/OfficialJournalOfIceland/OJOIUtils.ts
+++ b/apps/web/components/OfficialJournalOfIceland/OJOIUtils.ts
@@ -17,7 +17,9 @@ export const splitArrayIntoGroups = <T>(array: Array<T>, groupSize: number) => {
   )
 }
 
-export const removeEmptyFromObject = (obj: Record<string, string>) => {
+export const removeEmptyFromObject = (
+  obj: Record<string, string | number | Date | undefined>,
+) => {
   return Object.entries(obj)
     .filter(([_, v]) => !!v)
     .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
diff --git a/apps/web/screens/OfficialJournalOfIceland/OJOIHome.tsx b/apps/web/screens/OfficialJournalOfIceland/OJOIHome.tsx
index 83418431d798..6af57b49482b 100644
--- a/apps/web/screens/OfficialJournalOfIceland/OJOIHome.tsx
+++ b/apps/web/screens/OfficialJournalOfIceland/OJOIHome.tsx
@@ -32,10 +32,8 @@ import { withMainLayout } from '@island.is/web/layouts/main'
 import { CustomNextError } from '@island.is/web/units/errors'
 
 import {
-  OJOIAdvertCard,
   OJOIAdvertCards,
   OJOIHomeIntro,
-  OJOISearchListView,
   OJOIWrapper,
 } from '../../components/OfficialJournalOfIceland'
 import {
diff --git a/apps/web/screens/OfficialJournalOfIceland/OJOISearch.tsx b/apps/web/screens/OfficialJournalOfIceland/OJOISearch.tsx
index c253999cd919..4a03a4afde86 100644
--- a/apps/web/screens/OfficialJournalOfIceland/OJOISearch.tsx
+++ b/apps/web/screens/OfficialJournalOfIceland/OJOISearch.tsx
@@ -1,16 +1,17 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useIntl } from 'react-intl'
 import debounce from 'lodash/debounce'
 import { useRouter } from 'next/router'
-import { useLazyQuery } from '@apollo/client'
 
 import {
+  AlertMessage,
   Box,
   Button,
   DatePicker,
   Divider,
   Input,
   Select,
+  SkeletonLoader,
   Stack,
   Text,
 } from '@island.is/island-ui/core'
@@ -22,7 +23,6 @@ import {
   OfficialJournalOfIcelandAdvert,
   OfficialJournalOfIcelandAdvertCategory,
   OfficialJournalOfIcelandAdvertEntity,
-  OfficialJournalOfIcelandAdvertsResponse,
   OfficialJournalOfIcelandAdvertType,
   Query,
   QueryGetOrganizationArgs,
@@ -57,104 +57,178 @@ import {
   INSTITUTIONS_QUERY,
   TYPES_QUERY,
 } from '../queries/OfficialJournalOfIceland'
+import { useAdverts } from './hooks'
 import { m } from './messages'
 
-const initialState = {
-  sida: '',
-  q: '',
-  deild: '', // department
-  tegund: '', // type
-  timabil: '', // dateFrom - dateTo
-  malaflokkur: '', // category
-  stofnun: '', // involvedParty
-  dagsFra: '',
-  dagsTil: '',
+type OJOISearchParams = {
+  q: string
+  deild: string
+  tegund: string
+  timabil: string
+  malaflokkur: string
+  stofnun: string
+  dagsFra?: string // DATE STRING
+  dagsTil?: string // DATE STRING
+  sida?: number
+  staerd?: number
 }
 
 const OJOISearchPage: CustomScreen<OJOISearchProps> = ({
   initialAdverts,
   categories,
   departments,
+  defaultSearchParams,
   types,
   institutions,
   organization,
   locale,
 }) => {
   const { formatMessage } = useIntl()
-  const router = useRouter()
   const { linkResolver } = useLinkResolver()
+  const router = useRouter()
 
-  const [adverts, setAdverts] = useState(initialAdverts)
-
-  const [searchState, setSearchState] = useState(initialState)
   const [listView, setListView] = useState(false)
 
   const baseUrl = linkResolver('ojoihome', [], locale).href
   const searchUrl = linkResolver('ojoisearch', [], locale).href
 
-  const [getAdverts] = useLazyQuery<
-    {
-      officialJournalOfIcelandAdverts: OfficialJournalOfIcelandAdvertsResponse
+  const getTimestamp = () => new Date().getTime()
+  const [resetTimestamp, setResetTimestamp] = useState<number>(0)
+
+  const [localSearchValue, setLocalSearchValue] = useState(
+    defaultSearchParams.q,
+  )
+
+  const { adverts, loading, error, refetch } = useAdverts({
+    vars: {
+      department: [defaultSearchParams.deild],
+      category: [defaultSearchParams.malaflokkur],
+      involvedParty: [defaultSearchParams.stofnun],
+      type: [defaultSearchParams.tegund],
+      dateFrom: defaultSearchParams.dagsFra
+        ? new Date(defaultSearchParams.dagsFra)
+        : undefined,
+      dateTo: defaultSearchParams.dagsTil
+        ? new Date(defaultSearchParams.dagsTil)
+        : undefined,
+      search: defaultSearchParams.q,
+      page: defaultSearchParams.sida,
+      pageSize: defaultSearchParams.staerd,
     },
-    QueryOfficialJournalOfIcelandAdvertsArgs
-  >(ADVERTS_QUERY, { fetchPolicy: 'no-cache' })
+    fallbackData: initialAdverts,
+  })
+
+  const [searchState, setSearchState] = useState({
+    q: defaultSearchParams.q,
+    deild: defaultSearchParams.deild,
+    tegund: defaultSearchParams.tegund,
+    timabil: defaultSearchParams.timabil,
+    malaflokkur: defaultSearchParams.malaflokkur,
+    stofnun: defaultSearchParams.stofnun,
+    dagsFra: defaultSearchParams.dagsFra,
+    dagsTil: defaultSearchParams.dagsTil,
+    sida: defaultSearchParams.sida,
+    staerd: defaultSearchParams.staerd,
+  })
+
+  const updateSearchStateHandler = useCallback(
+    (
+      key: keyof typeof searchState,
+      value: string | number | Date | undefined,
+    ) => {
+      const parsed =
+        typeof value === 'string'
+          ? value.trim()
+          : typeof value === 'number'
+          ? value
+          : value instanceof Date
+          ? value
+          : undefined
+
+      setSearchState((prev) => ({
+        ...prev,
+        [key]: parsed,
+      }))
+
+      const searchValues = {
+        ...searchState,
+        [key]: parsed,
+      }
 
-  useEffect(() => {
-    const searchParams = new URLSearchParams(document.location.search)
-    setSearchState({
-      sida: searchParams.get('sida') ?? '',
-      q: searchParams.get('q') ?? '',
-      deild: searchParams.get('deild') ?? '',
-      tegund: searchParams.get('tegund') ?? '',
-      timabil: searchParams.get('timabil') ?? '',
-      malaflokkur: searchParams.get('malaflokkur') ?? '',
-      stofnun: searchParams.get('stofnun') ?? '',
-      dagsFra: searchParams.get('dagsFra') ?? '',
-      dagsTil: searchParams.get('dagsTil') ?? '',
-    })
-  }, [])
-
-  const fetchAdverts = useMemo(() => {
-    return debounce((state: typeof initialState) => {
-      getAdverts({
-        variables: {
-          input: {
-            search: state.q,
-            page: state.sida ? parseInt(state.sida) : undefined,
-            department: state.deild ? [state.deild] : undefined,
-            type: state.tegund ? [state.tegund] : undefined,
-            category: state.malaflokkur ? [state.malaflokkur] : undefined,
-            involvedParty: state.stofnun ? [state.stofnun] : undefined,
-            dateFrom: state.dagsFra ? new Date(state.dagsFra) : undefined,
-            dateTo: state.dagsTil ? new Date(state.dagsTil) : undefined,
-          },
+      router.replace(
+        {
+          pathname: searchUrl,
+          query: removeEmptyFromObject({
+            ...searchValues,
+            [key]:
+              parsed instanceof Date
+                ? parsed.toISOString().split('T')[0]
+                : parsed,
+          }),
+        },
+        undefined,
+        { shallow: true },
+      )
+
+      refetch({
+        input: {
+          department: [searchValues.deild],
+          category: [searchValues.malaflokkur],
+          involvedParty: [searchValues.stofnun],
+          type: [searchValues.tegund],
+          dateFrom: searchValues.dagsFra
+            ? new Date(searchValues.dagsFra)
+            : undefined,
+          dateTo: searchValues.dagsTil
+            ? new Date(searchValues.dagsTil)
+            : undefined,
+          search: searchValues.q,
+          page: searchValues.sida,
+          pageSize: searchValues.staerd,
         },
       })
-        .then((res) => {
-          if (res.data) {
-            setAdverts(res.data.officialJournalOfIcelandAdverts.adverts)
-          } else if (res.error) {
-            setAdverts([])
-            console.error('Error fetching Adverts', res.error)
-          }
-        })
-        .catch((err) => {
-          setAdverts([])
-          console.error('Error fetching Adverts', { err })
-        })
-    }, debounceTime.search)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  useEffect(() => {
-    const isEmpty = !Object.entries(searchState).filter(([_, v]) => !!v).length
-    if (isEmpty) {
-      setAdverts(initialAdverts)
-    } else {
-      fetchAdverts(searchState)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchState])
+    },
+
+    [refetch, router, searchState, searchUrl],
+  )
+
+  const resetFilter = () => {
+    router.replace(searchUrl, {}, { shallow: true })
+    setLocalSearchValue('')
+    setSearchState({
+      q: '',
+      deild: '',
+      tegund: '',
+      timabil: '',
+      malaflokkur: '',
+      stofnun: '',
+      dagsFra: undefined,
+      dagsTil: undefined,
+      sida: 1,
+      staerd: 20,
+    })
+
+    refetch({
+      input: {
+        department: [],
+        category: [],
+        involvedParty: [],
+        type: [],
+        dateFrom: undefined,
+        dateTo: undefined,
+        search: '',
+        page: undefined,
+        pageSize: undefined,
+      },
+    })
+
+    setResetTimestamp(getTimestamp())
+  }
+
+  const categoriesOptions = mapEntityToOptions(categories)
+  const departmentsOptions = mapEntityToOptions(departments)
+  const typesOptions = mapEntityToOptions(types)
+  const institutionsOptions = mapEntityToOptions(institutions)
 
   const breadcrumbItems = [
     {
@@ -170,38 +244,25 @@ const OJOISearchPage: CustomScreen<OJOISearchProps> = ({
     },
   ]
 
-  const updateSearchParams = useMemo(() => {
-    return debounce((state: Record<string, string>) => {
-      router.replace(
-        searchUrl,
-        {
-          query: removeEmptyFromObject(state),
-        },
-        { shallow: true },
-      )
-    }, debounceTime.search)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  const updateSearchState = (key: keyof typeof initialState, value: string) => {
-    const newState = {
-      ...searchState,
-      [key]: value,
-    }
-    setSearchState(newState)
-    updateSearchParams(newState)
-  }
+  const debouncedSearch = useMemo(
+    () => debounce(updateSearchStateHandler, debounceTime.search),
+    [updateSearchStateHandler],
+  )
 
-  const resetFilter = () => {
-    setSearchState(initialState)
-    updateSearchParams(initialState)
-    setAdverts(initialAdverts)
-  }
+  const debouncedSearchHandler = useCallback(
+    (search: string) => {
+      debouncedSearch.cancel()
+      debouncedSearch('q', search)
+    },
+    [debouncedSearch],
+  )
 
-  const categoriesOptions = mapEntityToOptions(categories)
-  const departmentsOptions = mapEntityToOptions(departments)
-  const typesOptions = mapEntityToOptions(types)
-  const institutionsOptions = mapEntityToOptions(institutions)
+  const defaultDepartment = departmentsOptions.find(
+    (d) => d.value === defaultSearchParams.deild,
+  )
+
+  console.log(defaultSearchParams)
+  console.log('defaultdepartment', defaultDepartment)
 
   return (
     <OJOIWrapper
@@ -222,11 +283,16 @@ const OJOISearchPage: CustomScreen<OJOISearchProps> = ({
             <Text variant="h4">Leit</Text>
 
             <Input
+              key={`search-${resetTimestamp}`}
               name="q"
               placeholder={formatMessage(m.search.inputPlaceholder)}
               size="xs"
-              value={searchState.q}
-              onChange={(e) => updateSearchState('q', e.target.value)}
+              defaultValue={searchState.q}
+              value={localSearchValue}
+              onChange={(e) => {
+                setLocalSearchValue(e.target.value)
+                debouncedSearchHandler(e.target.value)
+              }}
             />
 
             <Divider weight={'blueberry200'} />
@@ -245,6 +311,7 @@ const OJOISearchPage: CustomScreen<OJOISearchProps> = ({
             </Box>
 
             <Select
+              key={`deild-${resetTimestamp}`}
               name="deild"
               label={formatMessage(m.search.departmentLabel)}
               size="xs"
@@ -254,12 +321,17 @@ const OJOISearchPage: CustomScreen<OJOISearchProps> = ({
                 ...departmentsOptions,
               ]}
               isClearable
-              isSearchable
-              value={findValueOption(departmentsOptions, searchState.deild)}
-              onChange={(v) => updateSearchState('deild', v?.value ?? '')}
+              defaultValue={findValueOption(
+                departmentsOptions,
+                searchState.deild,
+              )}
+              onChange={(v) =>
+                updateSearchStateHandler('deild', v?.value ?? '')
+              }
             />
 
             <Select
+              key={`tegund-${resetTimestamp}`}
               name="tegund"
               label={formatMessage(m.search.typeLabel)}
               size="xs"
@@ -269,11 +341,14 @@ const OJOISearchPage: CustomScreen<OJOISearchProps> = ({
                 ...typesOptions,
               ]}
               isClearable
-              value={findValueOption(typesOptions, searchState.tegund)}
-              onChange={(v) => updateSearchState('tegund', v?.value ?? '')}
+              defaultValue={findValueOption(typesOptions, searchState.tegund)}
+              onChange={(v) =>
+                updateSearchStateHandler('tegund', v?.value ?? '')
+              }
             />
 
             <Select
+              key={`malaflokkur-${resetTimestamp}`}
               name="malaflokkur"
               label={formatMessage(m.search.categoriesLabel)}
               size="xs"
@@ -284,56 +359,55 @@ const OJOISearchPage: CustomScreen<OJOISearchProps> = ({
               ]}
               isClearable
               isSearchable
-              value={findValueOption(
+              defaultValue={findValueOption(
                 categoriesOptions,
                 searchState.malaflokkur,
               )}
-              onChange={(v) => updateSearchState('malaflokkur', v?.value ?? '')}
+              onChange={(v) =>
+                updateSearchStateHandler('malaflokkur', v?.value ?? '')
+              }
             />
 
             <DatePicker
+              key={`dagsFra-${resetTimestamp}`}
               size="xs"
               locale="is"
               name="dagsFra"
               label={formatMessage(m.search.dateFromLabel)}
               placeholderText={formatMessage(m.search.dateFromPlaceholder)}
-              selected={
-                searchState.dagsFra ? new Date(searchState.dagsFra) : undefined
-              }
               minDate={new Date('1950-01-01')}
               maxDate={
                 searchState.dagsTil ? new Date(searchState.dagsTil) : undefined
               }
-              handleChange={(date) =>
-                updateSearchState(
-                  'dagsFra',
-                  date ? date.toISOString().slice(0, 10) : '',
-                )
+              selected={
+                searchState.dagsFra ? new Date(searchState.dagsFra) : undefined
               }
+              handleChange={(date) => {
+                updateSearchStateHandler('dagsFra', date)
+              }}
             />
 
             <DatePicker
+              key={`dagsTil-${resetTimestamp}`}
               size="xs"
               locale="is"
               name="dagsTil"
               label={formatMessage(m.search.dateToLabel)}
               placeholderText={formatMessage(m.search.dateToPlaceholder)}
-              selected={
-                searchState.dagsTil ? new Date(searchState.dagsTil) : undefined
-              }
               minDate={
                 searchState.dagsFra ? new Date(searchState.dagsFra) : undefined
               }
               maxDate={new Date()}
-              handleChange={(date) =>
-                updateSearchState(
-                  'dagsTil',
-                  date ? date.toISOString().slice(0, 10) : '',
-                )
+              selected={
+                searchState.dagsTil ? new Date(searchState.dagsTil) : undefined
               }
+              handleChange={(date) => {
+                updateSearchStateHandler('dagsTil', date)
+              }}
             />
 
             <Select
+              key={`stofnun-${resetTimestamp}`}
               name="stofnun"
               label={formatMessage(m.search.institutionLabel)}
               size="xs"
@@ -344,15 +418,36 @@ const OJOISearchPage: CustomScreen<OJOISearchProps> = ({
               ]}
               isClearable
               isSearchable
-              value={findValueOption(institutionsOptions, searchState.stofnun)}
-              onChange={(v) => updateSearchState('stofnun', v?.value ?? '')}
+              defaultValue={findValueOption(
+                institutionsOptions,
+                searchState.stofnun,
+              )}
+              onChange={(v) =>
+                updateSearchStateHandler('stofnun', v?.value ?? '')
+              }
             />
           </Stack>
         </Box>
       }
       breadcrumbItems={breadcrumbItems}
     >
-      {adverts?.length ? (
+      {!!error && (
+        <Box marginBottom={3}>
+          <AlertMessage
+            title={formatMessage(m.search.errorFetchingAdvertsTitle)}
+            message={formatMessage(m.search.errorFetchingAdvertsMessage)}
+            type="error"
+          />
+        </Box>
+      )}
+      {loading ? (
+        <SkeletonLoader
+          repeat={5}
+          height={200}
+          borderRadius="large"
+          space={3}
+        />
+      ) : adverts?.length ? (
         <Stack space={3}>
           <Button
             onClick={() => setListView(!listView)}
@@ -391,6 +486,7 @@ interface OJOISearchProps {
   types?: Array<OfficialJournalOfIcelandAdvertType>
   institutions?: Array<OfficialJournalOfIcelandAdvertEntity>
   organization?: Query['getOrganization']
+  defaultSearchParams: OJOISearchParams
   locale: Locale
 }
 
@@ -403,6 +499,7 @@ const OJOISearch: CustomScreen<OJOISearchProps> = ({
   organization,
   locale,
   customPageData,
+  defaultSearchParams,
 }) => {
   return (
     <OJOISearchPage
@@ -414,13 +511,74 @@ const OJOISearch: CustomScreen<OJOISearchProps> = ({
       organization={organization}
       locale={locale}
       customPageData={customPageData}
+      defaultSearchParams={defaultSearchParams}
     />
   )
 }
 
-OJOISearch.getProps = async ({ apolloClient, locale }) => {
+OJOISearch.getProps = async ({ apolloClient, locale, query }) => {
   const organizationSlug = 'stjornartidindi'
 
+  const getStringFromQuery = (key?: string | string[]) => {
+    if (typeof key === 'string') {
+      return key
+    }
+
+    if (Array.isArray(key)) {
+      return key[0]
+    }
+
+    return ''
+  }
+
+  let dateFrom: string | undefined
+  let dateTo: string | undefined
+  let page: number | undefined
+  let pageSize: number | undefined
+
+  if (query.dagsFra && typeof query.dagsFra === 'string') {
+    const isValid = !isNaN(Date.parse(query.dagsFra))
+    if (isValid) {
+      dateFrom = new Date(query.dagsFra).toISOString().split('T')[0]
+    }
+  }
+
+  if (query.dagsTil && typeof query.dagsTil === 'string') {
+    const isValid = !isNaN(Date.parse(query.dagsTil))
+    if (isValid) {
+      dateTo = new Date(query.dagsTil).toISOString().split('T')[0]
+    }
+  }
+
+  if (query.sida && typeof query.sida === 'string') {
+    const check = !isNaN(parseInt(query.sida))
+
+    if (check) {
+      page = parseInt(query.sida)
+    }
+  }
+
+  if (query.pageSize && typeof query.pageSize === 'string') {
+    const check = !isNaN(parseInt(query.pageSize))
+
+    if (check) {
+      pageSize = parseInt(query.pageSize)
+    }
+  }
+
+  const defaultParams = {
+    deild: getStringFromQuery(query.deild),
+    dagsFra: dateFrom,
+    dagsTil: dateTo,
+    malaflokkur: getStringFromQuery(query.malaflokkur),
+    q: getStringFromQuery(query.q),
+    stofnun: getStringFromQuery(query.stofnun),
+    tegund: getStringFromQuery(query.tegund),
+    timabil: getStringFromQuery(query.timabil),
+    sida: page,
+    pageSize,
+  }
+
   const [
     {
       data: { officialJournalOfIcelandAdverts },
@@ -444,13 +602,29 @@ OJOISearch.getProps = async ({ apolloClient, locale }) => {
     apolloClient.query<Query, QueryOfficialJournalOfIcelandAdvertsArgs>({
       query: ADVERTS_QUERY,
       variables: {
-        input: {},
+        input: {
+          category: [defaultParams.malaflokkur],
+          dateFrom: defaultParams.dagsFra
+            ? new Date(defaultParams.dagsFra)
+            : undefined,
+          dateTo: defaultParams.dagsTil
+            ? new Date(defaultParams.dagsTil)
+            : undefined,
+          department: [defaultParams.deild],
+          involvedParty: [defaultParams.stofnun],
+          page: defaultParams.sida,
+          pageSize: defaultParams.pageSize,
+          search: defaultParams.q,
+          type: [defaultParams.tegund],
+        },
       },
     }),
     apolloClient.query<Query, QueryOfficialJournalOfIcelandCategoriesArgs>({
       query: CATEGORIES_QUERY,
       variables: {
-        params: {},
+        params: {
+          pageSize: 1000,
+        },
       },
     }),
     apolloClient.query<Query, QueryOfficialJournalOfIcelandDepartmentsArgs>({
@@ -462,13 +636,17 @@ OJOISearch.getProps = async ({ apolloClient, locale }) => {
     apolloClient.query<Query, QueryOfficialJournalOfIcelandTypesArgs>({
       query: TYPES_QUERY,
       variables: {
-        params: {},
+        params: {
+          pageSize: 1000,
+        },
       },
     }),
     apolloClient.query<Query, QueryOfficialJournalOfIcelandInstitutionsArgs>({
       query: INSTITUTIONS_QUERY,
       variables: {
-        params: {},
+        params: {
+          pageSize: 1000,
+        },
       },
     }),
     apolloClient.query<Query, QueryGetOrganizationArgs>({
@@ -498,6 +676,18 @@ OJOISearch.getProps = async ({ apolloClient, locale }) => {
     themeConfig: {
       footerVersion: 'organization',
     },
+    defaultSearchParams: {
+      deild: defaultParams.deild,
+      dagsFra: defaultParams.dagsFra,
+      dagsTil: defaultParams.dagsTil,
+      malaflokkur: defaultParams.malaflokkur,
+      q: defaultParams.q,
+      stofnun: defaultParams.stofnun,
+      tegund: defaultParams.tegund,
+      timabil: defaultParams.timabil,
+      sida: defaultParams.sida,
+      staerd: defaultParams.pageSize,
+    },
   }
 }
 
diff --git a/apps/web/screens/OfficialJournalOfIceland/hooks/index.ts b/apps/web/screens/OfficialJournalOfIceland/hooks/index.ts
new file mode 100644
index 000000000000..885b6f29c754
--- /dev/null
+++ b/apps/web/screens/OfficialJournalOfIceland/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useAdverts'
diff --git a/apps/web/screens/OfficialJournalOfIceland/hooks/useAdverts.ts b/apps/web/screens/OfficialJournalOfIceland/hooks/useAdverts.ts
new file mode 100644
index 000000000000..704ba2582f2c
--- /dev/null
+++ b/apps/web/screens/OfficialJournalOfIceland/hooks/useAdverts.ts
@@ -0,0 +1,55 @@
+import { useQuery } from '@apollo/client'
+
+import {
+  OfficialJournalOfIcelandAdvert,
+  OfficialJournalOfIcelandAdvertsResponse,
+} from '@island.is/api/schema'
+
+import { ADVERTS_QUERY } from '../../queries/OfficialJournalOfIceland'
+import { getAdvertParams } from '../lib/advert-params.mapper'
+
+export type UseAdvertsResponse = {
+  officialJournalOfIcelandAdverts: OfficialJournalOfIcelandAdvertsResponse
+}
+
+export type UseAdvertsVariables = {
+  search?: string
+  page?: number
+  pageSize?: number
+  department?: Array<string>
+  type?: Array<string>
+  category?: Array<string>
+  involvedParty?: Array<string>
+  dateFrom?: Date
+  dateTo?: Date
+}
+
+export type UserAdvertsInput = {
+  input: UseAdvertsVariables
+}
+
+export type UseAdvertsParams = {
+  vars?: UseAdvertsVariables
+  fallbackData?: OfficialJournalOfIcelandAdvert[]
+}
+
+export const useAdverts = ({ vars, fallbackData }: UseAdvertsParams) => {
+  const variables = getAdvertParams(vars)
+
+  const { data, loading, error, refetch } = useQuery<
+    UseAdvertsResponse,
+    UserAdvertsInput
+  >(ADVERTS_QUERY, {
+    fetchPolicy: 'no-cache',
+    nextFetchPolicy: 'no-cache',
+    variables: { input: variables },
+  })
+
+  return {
+    adverts: data?.officialJournalOfIcelandAdverts.adverts || fallbackData,
+    paging: data?.officialJournalOfIcelandAdverts.paging,
+    loading,
+    error,
+    refetch,
+  }
+}
diff --git a/apps/web/screens/OfficialJournalOfIceland/lib/advert-params.mapper.ts b/apps/web/screens/OfficialJournalOfIceland/lib/advert-params.mapper.ts
new file mode 100644
index 000000000000..397b8664a52b
--- /dev/null
+++ b/apps/web/screens/OfficialJournalOfIceland/lib/advert-params.mapper.ts
@@ -0,0 +1,43 @@
+import { UseAdvertsVariables } from '../hooks'
+
+export const getAdvertParams = (params?: UseAdvertsVariables) => {
+  const variables: UseAdvertsVariables = {}
+
+  if (params?.category) {
+    variables.category = params.category
+  }
+
+  if (params?.dateFrom) {
+    variables.dateFrom = params.dateFrom
+  }
+
+  if (params?.dateTo) {
+    variables.dateTo = params.dateTo
+  }
+
+  if (params?.department) {
+    variables.department = params.department
+  }
+
+  if (params?.involvedParty) {
+    variables.involvedParty = params.involvedParty
+  }
+
+  if (params?.page) {
+    variables.page = params.page
+  }
+
+  if (params?.pageSize) {
+    variables.pageSize = params.pageSize
+  }
+
+  if (params?.search) {
+    variables.search = params.search
+  }
+
+  if (params?.type) {
+    variables.type = params.type
+  }
+
+  return variables
+}

From ee0b9bf453813c6860560f8d56423b519e0e2029 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B3n=20Bjarni=20=C3=93lafsson?=
 <dev.jonbjarni@gmail.com>
Date: Fri, 18 Oct 2024 15:03:58 +0000
Subject: [PATCH 3/3] Fixed PR comments.

---
 .../OfficialJournalOfIceland/OJOISearch.tsx   |  9 +-
 .../hooks/useAdverts.ts                       |  4 +-
 .../components/htmlEditor/HTMLEditor.css.ts   | 87 -------------------
 .../src/hooks/useComments.ts                  |  2 -
 4 files changed, 6 insertions(+), 96 deletions(-)

diff --git a/apps/web/screens/OfficialJournalOfIceland/OJOISearch.tsx b/apps/web/screens/OfficialJournalOfIceland/OJOISearch.tsx
index 4a03a4afde86..04b64ef4d17d 100644
--- a/apps/web/screens/OfficialJournalOfIceland/OJOISearch.tsx
+++ b/apps/web/screens/OfficialJournalOfIceland/OJOISearch.tsx
@@ -287,7 +287,6 @@ const OJOISearchPage: CustomScreen<OJOISearchProps> = ({
               name="q"
               placeholder={formatMessage(m.search.inputPlaceholder)}
               size="xs"
-              defaultValue={searchState.q}
               value={localSearchValue}
               onChange={(e) => {
                 setLocalSearchValue(e.target.value)
@@ -537,21 +536,21 @@ OJOISearch.getProps = async ({ apolloClient, locale, query }) => {
   let pageSize: number | undefined
 
   if (query.dagsFra && typeof query.dagsFra === 'string') {
-    const isValid = !isNaN(Date.parse(query.dagsFra))
+    const isValid = !Number.isNaN(Date.parse(query.dagsFra))
     if (isValid) {
       dateFrom = new Date(query.dagsFra).toISOString().split('T')[0]
     }
   }
 
   if (query.dagsTil && typeof query.dagsTil === 'string') {
-    const isValid = !isNaN(Date.parse(query.dagsTil))
+    const isValid = !Number.isNaN(Date.parse(query.dagsTil))
     if (isValid) {
       dateTo = new Date(query.dagsTil).toISOString().split('T')[0]
     }
   }
 
   if (query.sida && typeof query.sida === 'string') {
-    const check = !isNaN(parseInt(query.sida))
+    const check = !Number.isNaN(parseInt(query.sida))
 
     if (check) {
       page = parseInt(query.sida)
@@ -559,7 +558,7 @@ OJOISearch.getProps = async ({ apolloClient, locale, query }) => {
   }
 
   if (query.pageSize && typeof query.pageSize === 'string') {
-    const check = !isNaN(parseInt(query.pageSize))
+    const check = !Number.isNaN(parseInt(query.pageSize))
 
     if (check) {
       pageSize = parseInt(query.pageSize)
diff --git a/apps/web/screens/OfficialJournalOfIceland/hooks/useAdverts.ts b/apps/web/screens/OfficialJournalOfIceland/hooks/useAdverts.ts
index 704ba2582f2c..0d4c3092886b 100644
--- a/apps/web/screens/OfficialJournalOfIceland/hooks/useAdverts.ts
+++ b/apps/web/screens/OfficialJournalOfIceland/hooks/useAdverts.ts
@@ -24,7 +24,7 @@ export type UseAdvertsVariables = {
   dateTo?: Date
 }
 
-export type UserAdvertsInput = {
+export type UseAdvertsInput = {
   input: UseAdvertsVariables
 }
 
@@ -38,7 +38,7 @@ export const useAdverts = ({ vars, fallbackData }: UseAdvertsParams) => {
 
   const { data, loading, error, refetch } = useQuery<
     UseAdvertsResponse,
-    UserAdvertsInput
+    UseAdvertsInput
   >(ADVERTS_QUERY, {
     fetchPolicy: 'no-cache',
     nextFetchPolicy: 'no-cache',
diff --git a/libs/application/templates/official-journal-of-iceland/src/components/htmlEditor/HTMLEditor.css.ts b/libs/application/templates/official-journal-of-iceland/src/components/htmlEditor/HTMLEditor.css.ts
index 948cc49e19b7..f343045e1c62 100644
--- a/libs/application/templates/official-journal-of-iceland/src/components/htmlEditor/HTMLEditor.css.ts
+++ b/libs/application/templates/official-journal-of-iceland/src/components/htmlEditor/HTMLEditor.css.ts
@@ -526,93 +526,6 @@ globalStyle(`${classes.warnings__item_high}::marker`, {
     pointerEvents: 'none', // hax to prevent link clicks :/
   })
 
-  // global('.signatures', {
-  //   display: 'grid',
-  //   gap: '1ch',
-  //   gridTemplateColumns: '1fr 1fr',
-  // })
-
-  // global('.signature__group + .signature__group', {
-  //   marginTop: '3ch',
-  // })
-
-  // global('.signatures.single', {
-  //   gridTemplateColumns: '1fr',
-  // })
-
-  // global('.signatures.double', {
-  //   gridTemplateColumns: '1fr 1fr',
-  // })
-
-  // global('.signatures.triple', {
-  //   gridTemplateColumns: '1fr 1fr 1fr',
-  // })
-
-  // global('.signatures.chairman', {
-  //   marginBottom: '2ch',
-  // })
-
-  // global('.signature', {
-  //   marginTop: '0',
-  //   // fontSize: 16,
-  //   fontWeight: typography.semiBold,
-  //   textAlign: 'center',
-  // })
-
-  // global('.signature__title', {
-  //   marginTop: '0',
-  //   marginBottom: '1ch',
-  //   // fontSize: 14,
-  //   fontStyle: 'italic',
-  //   fontWeight: typography.regular,
-  //   textAlign: 'center',
-  // })
-
-  // global('.signature__above', {
-  //   marginTop: 0,
-  //   marginBottom: 0,
-  //   // fontSize: 14,
-  //   fontStyle: 'normal',
-  //   fontWeight: typography.regular,
-  //   textAlign: 'center',
-  // })
-
-  // global('.signature__nameWrapper', {
-  //   lineHeight: 1.2,
-  //   textAlign: 'center',
-  //   fontSize: 14,
-  // })
-
-  // global('.signature__name', {
-  //   fontWeight: typography.semiBold,
-  //   marginBottom: '0',
-  // })
-
-  // global('.signature__textAfter', {
-  //   fontSize: 14,
-  //   fontWeight: typography.regular,
-  // })
-
-  // global('.signature__textBelow', {
-  //   fontSize: 14,
-  //   textAlign: 'center',
-  //   fontWeight: typography.regular,
-  // })
-
-  // global('.signature__footer', {
-  //   marginTop: '2ch',
-  //   fontSize: 14,
-  //   textAlign: 'center',
-  //   fontWeight: typography.semiBold,
-  // })
-
-  // global('.signature__additional', {
-  //   marginTop: '2ch',
-  //   fontStyle: 'italic',
-  //   fontSize: 14,
-  //   textAlign: 'right',
-  // })
-
   global('.document-content', {
     marginBottom: '2ch',
   })
diff --git a/libs/application/templates/official-journal-of-iceland/src/hooks/useComments.ts b/libs/application/templates/official-journal-of-iceland/src/hooks/useComments.ts
index 8f4788030e05..2ce533741475 100644
--- a/libs/application/templates/official-journal-of-iceland/src/hooks/useComments.ts
+++ b/libs/application/templates/official-journal-of-iceland/src/hooks/useComments.ts
@@ -46,8 +46,6 @@ export const useComments = ({ applicationId }: Props) => {
     },
   })
 
-  console.log('data', data)
-
   const addComment = (variables: AddCommentVariables, cb?: () => void) => {
     addCommentMutation({
       variables: {