feat: add sorting to requests page

Informasjonsforvaltning · Oct 19, 2023 · d6286b2 · d6286b2
1 parent 3915569
commit d6286b2
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 25 deletions.
diff --git a/src/api/community-api/search.ts b/src/api/community-api/search.ts
@@ -40,18 +40,22 @@ export const extractTopicsFromSearch = (
   return uniqueTopics;
 };
 
-export const searchCommunityRequests = (queryTerm: string) => {
+export const searchCommunityRequests = (
+  queryTerm: string,
+  sortOption?: string
+) => {
   if (queryTerm.length > 0) {
     return axios
       .get(
-        `${FDK_COMMUNITY_BASE_URI}/api/search?term=${queryTerm}&in=titles&matchWords=all&category=6`
+        `${FDK_COMMUNITY_BASE_URI}/api/search?term=${queryTerm}&in=titles&matchWords=all&categories[]=6&sortBy=${sortOption}&sortDirection=desc`
       )
       .then(({ data }) => data);
-  } else {
-    return axios
-      .get(`${FDK_COMMUNITY_BASE_URI}/api/search?&category=6`)
-      .then(({ data }) => data);
   }
+  return axios
+    .get(
+      `${FDK_COMMUNITY_BASE_URI}/api/search?&categories[]=6&sortBy=${sortOption}&sortDirection=desc`
+    )
+    .then(({ data }) => data);
 };
 
 export const pruneNodebbTemplateTags = (raw_text: string) =>

diff --git a/src/components/with-community/redux/actions.ts b/src/components/with-community/redux/actions.ts
@@ -46,11 +46,15 @@ export function searchTopicsFailed(message: string) {
   };
 }
 
-export function searchRequestsRequested(queryTerm: string) {
+export function searchRequestsRequested(
+  queryTerm: string,
+  sortOption?: string
+) {
   return {
     type: SEARCH_REQUESTS_REQUESTED,
     payload: {
-      queryTerm
+      queryTerm,
+      sortOption
     }
   };
 }

diff --git a/src/components/with-community/redux/saga.ts b/src/components/with-community/redux/saga.ts
@@ -43,12 +43,13 @@ function* searchTopicsRequested({
 }
 
 function* searchRequestsRequested({
-  payload: { queryTerm }
+  payload: { queryTerm, sortOption }
 }: ReturnType<typeof actions.searchRequestsRequested>) {
   try {
     const postHits: CommunityPost = yield call(
       searchCommunityRequests,
-      queryTerm
+      queryTerm,
+      sortOption
     );
     const { multiplePages } = postHits;
     const topics: CommunityTopic[] = (

diff --git a/src/l10n/en.json b/src/l10n/en.json
@@ -1182,6 +1182,9 @@
     "views": "Number of Views",
     "createRequest": "Create request",
     "requestData": "Request data",
-    "requestDataInfo": "Do you want to request data, APIs, or anything else you can do it here. You will be redirected to datalandsbyen.no."
+    "requestDataInfo": "Do you want to request data, APIs, or anything else you can do it here. You will be redirected to datalandsbyen.no.",
+    "newestToOldest": "Newest to Oldest",
+    "mostVotes": "Most Votes",
+    "mostViews": "Most Views"
   }
 }
diff --git a/src/l10n/nb.json b/src/l10n/nb.json
@@ -1182,6 +1182,9 @@
     "views": "Antall visninger",
     "createRequest": "Lag etterspørsel",
     "requestData": "Etterspør data",
-    "requestDataInfo": "Ønsker du å etterspørre data, APIer eller annet du kan gjøre det her. Du blir sendt til datalandsbyen.no."
+    "requestDataInfo": "Ønsker du å etterspørre data, APIer eller annet du kan gjøre det her. Du blir sendt til datalandsbyen.no.",
+    "newestToOldest": "Nyeste til eldste",
+    "mostVotes": "Flest stemmer",
+    "mostViews": "Flest visninger"
   }
 }
diff --git a/src/l10n/nn.json b/src/l10n/nn.json
@@ -1182,6 +1182,9 @@
     "views": "Antall visningar",
     "createRequest": "Lag etterspurnad",
     "requestData": "Etterspør data",
-    "requestDataInfo": "Ynskjer du å etterspørre data, APIer eller anna kan du gjere det her. Du blir sendt til datalandsbyen.no."
+    "requestDataInfo": "Ynskjer du å etterspørre data, APIer eller anna kan du gjere det her. Du blir sendt til datalandsbyen.no.",
+    "newestToOldest": "Nyeste til eldste",
+    "mostVotes": "Flest stemmer",
+    "mostViews": "Flest visningar"
   }
 }
diff --git a/src/pages/requests/index.tsx b/src/pages/requests/index.tsx
@@ -31,7 +31,7 @@ const RequestsPage: FC<Props> = ({
     <>
       <Banner title={localization.requestsPage.title} />
       <main id='content' className='container'>
-        <SC.Row>
+        <SC.FirstRow>
           <SC.InfoText>
             <p>
               {localization.formatString(localization.requestsPage.ingress, {
@@ -52,14 +52,31 @@ const RequestsPage: FC<Props> = ({
               {localization.requestsPage.createRequest}
             </Button>
           </SC.Button>
-        </SC.Row>
-        <SC.Button>
-          <input
-            type='text'
-            onChange={event => setSearch(event.target.value)}
-          ></input>
-          <Button onClick={() => searchRequestsRequested(search)}>Søk</Button>
-        </SC.Button>
+        </SC.FirstRow>
+        <SC.FirstRow>
+          <SC.Row>
+            <Button
+              onClick={() => searchRequestsRequested(search, 'timestamp')}
+            >
+              {localization.requestsPage.newestToOldest}
+            </Button>
+            <Button onClick={() => searchRequestsRequested(search, 'upvotes')}>
+              {localization.requestsPage.mostVotes}
+            </Button>
+            <Button
+              onClick={() => searchRequestsRequested(search, 'topic.viewcount')}
+            >
+              {localization.requestsPage.mostViews}
+            </Button>
+          </SC.Row>
+          <SC.Row>
+            <input
+              type='text'
+              onChange={event => setSearch(event.target.value)}
+            />
+            <Button onClick={() => searchRequestsRequested(search)}>Søk</Button>
+          </SC.Row>
+        </SC.FirstRow>
         <SC.RequestsTitleRow>
           <SC.RequestTitle>
             {localization.requestsPage.requests}

diff --git a/src/pages/requests/styled.ts b/src/pages/requests/styled.ts
@@ -50,15 +50,19 @@ const InfoText = styled.div`
   margin-bottom: 50px;
 `;
 
-const Row = styled.div`
+const FirstRow = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding-bottom: 17px;
+`;
+
+const Row = styled.div`
+  display: flex;
 `;
 
 const Button = styled.div`
   height: fit-content;
-  display: flex;
 `;
 
 const InfoBox = styled.div`
@@ -83,5 +87,6 @@ export default {
   Row,
   Button,
   InfoBox,
-  Text
+  Text,
+  FirstRow
 };