feat: replace button with select

Informasjonsforvaltning · Oct 18, 2023 · db52db2 · db52db2
1 parent ac6f777
commit db52db2
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/l10n/en.json b/src/l10n/en.json
@@ -1185,6 +1185,7 @@
     "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"
+    "mostViews": "Most Views",
+    "view": "View"
   }
 }
diff --git a/src/l10n/nb.json b/src/l10n/nb.json
@@ -1185,6 +1185,7 @@
     "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"
+    "mostViews": "Flest visninger",
+    "view": "Visning"
   }
 }
diff --git a/src/l10n/nn.json b/src/l10n/nn.json
@@ -1185,6 +1185,7 @@
     "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"
+    "mostViews": "Flest visningar",
+    "view": "Visning"
   }
 }
diff --git a/src/pages/requests/index.tsx b/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,6 +29,21 @@ 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} />
@@ -54,28 +71,26 @@ const RequestsPage: FC<Props> = ({
           </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)}
+          <div>
+            <p>{localization.requestsPage.view}</p>
+            <Select
+              options={sortOptions}
+              onChange={value => searchRequestsRequested(search, value?.value)}
+              defaultValue={sortOptions[0]}
             />
-            <Button onClick={() => searchRequestsRequested(search)}>Søk</Button>
-          </SC.Row>
+          </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>