Feat/add sorting to requests

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) =>

src/components/filter-box/filter-box.component.tsx

@@ -10,7 +10,7 @@ import localization from '../../lib/localization';
 import { FilterOption } from '../filter-option/filter-option.component';
 import './filter-box.scss';
 
-import { FilterSearchOption } from '../../types';
+import { SelectOption } from '../../types';
 
 interface Props {
   htmlKey?: number;
@@ -197,7 +197,7 @@ export class FilterBox extends React.Component<Props, State> {
           label: label || localization.facet.formatType.UNKNOWN
         };
       })
-      .sort((a: FilterSearchOption, b: FilterSearchOption) =>
+      .sort((a: SelectOption, b: SelectOption) =>
         a.label.localeCompare(b.label)
       );
 

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
     }
   };
 }

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[] = (

src/l10n/en.json

@@ -1182,6 +1182,10 @@
     "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",
+    "view": "View"
   }
 }

src/l10n/nb.json

@@ -1182,6 +1182,10 @@
     "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",
+    "view": "Visning"
   }
 }

src/l10n/nn.json

@@ -1182,6 +1182,10 @@
     "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",
+    "view": "Visning"
   }
 }

src/pages/requests/index.tsx

@@ -2,6 +2,7 @@ import React, { FC, useEffect, useState } from 'react';
 import { compose } from 'redux';
 import Link from '@fellesdatakatalog/link';
 import Button from '@fellesdatakatalog/button';
+import Select from 'react-select';
 import withCommunity, {
   Props as CommunityProps
 } from '../../components/with-community';
@@ -12,6 +13,7 @@ import { formatDate } from '../../lib/date-utils';
 import Banner from '../../components/banner';
 import localization from '../../lib/localization';
 import env from '../../env';
+import { SelectOption } from '../../types';
 
 const { FDK_COMMUNITY_BASE_URI } = env;
 interface Props extends CommunityProps {}
@@ -27,11 +29,26 @@ const RequestsPage: FC<Props> = ({
   const notDeletedRequests = topics?.filter(topic => topic.deleted === 0);
   const [search, setSearch] = useState('');
 
+  const sortOptions: SelectOption[] = [
+    {
+      value: 'timestamp',
+      label: localization.requestsPage.newestToOldest
+    },
+    {
+      value: 'upvotes',
+      label: localization.requestsPage.mostVotes
+    },
+    {
+      value: 'topic.viewcount',
+      label: localization.requestsPage.mostViews
+    }
+  ];
+
   return (
     <>
       <Banner title={localization.requestsPage.title} />
       <main id='content' className='container'>
-        <SC.Row>
+        <SC.FirstRow>
           <SC.InfoText>
             <p>
               {localization.formatString(localization.requestsPage.ingress, {
@@ -52,14 +69,29 @@ 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>
+          <div>
+            <p>{localization.requestsPage.view}</p>
+            <Select
+              options={sortOptions}
+              onChange={value => searchRequestsRequested(search, value?.value)}
+              defaultValue={sortOptions[0]}
+            />
+          </div>
+          <div>
+            <p>Fritekssøk i titler</p>
+            <SC.Row>
+              <input
+                type='text'
+                onChange={event => setSearch(event.target.value)}
+              />
+              <Button onClick={() => searchRequestsRequested(search)}>
+                Søk
+              </Button>
+            </SC.Row>
+          </div>
+        </SC.FirstRow>
         <SC.RequestsTitleRow>
           <SC.RequestTitle>
             {localization.requestsPage.requests}

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
 };

src/pages/search-page/filter-tree/filter-tree.component.tsx

@@ -12,7 +12,7 @@ import localization from '../../../lib/localization';
 import { getTranslateText } from '../../../lib/translateText';
 import './filter-tree.scss';
 
-import type { FilterSearchOption } from '../../../types';
+import type { SelectOption } from '../../../types';
 import type { FilterChange } from '../../../components/filter-box/filter-box.component';
 import TreeView from '../../../components/treeview';
 
@@ -271,13 +271,13 @@ export const FilterTree: FC<Props> = ({
     label: `${getNameFromNode(node, referenceDataItems)}`
   });
 
-  const mapNodeToFilterSearchOptions = (node: any): FilterSearchOption[] =>
+  const mapNodeToFilterSearchOptions = (node: any): SelectOption[] =>
     node.children
       ? [
           getFilterSearchOption(node),
           ...(node.children.flatMap(
             mapNodeToFilterSearchOptions
-          ) as FilterSearchOption[])
+          ) as SelectOption[])
         ]
       : [getFilterSearchOption(node)];
 

src/types/domain.d.ts

@@ -1117,7 +1117,7 @@ export interface CommentThread {
   timestamp: string;
   content: string;
 }
-export interface FilterSearchOption {
+export interface SelectOption {
   value: string;
   label: string;
 }