From 4e77096a44c1d61065cb12a5f9e9b49810add93f Mon Sep 17 00:00:00 2001 From: Hege Aalvik Date: Fri, 13 Oct 2023 13:13:47 +0200 Subject: [PATCH 1/3] feat: add sorting to requests page --- src/api/community-api/search.ts | 16 +++++---- .../with-community/redux/actions.ts | 8 +++-- src/components/with-community/redux/saga.ts | 5 +-- src/l10n/en.json | 5 ++- src/l10n/nb.json | 5 ++- src/l10n/nn.json | 5 ++- src/pages/requests/index.tsx | 35 ++++++++++++++----- src/pages/requests/styled.ts | 11 ++++-- 8 files changed, 65 insertions(+), 25 deletions(-) diff --git a/src/api/community-api/search.ts b/src/api/community-api/search.ts index 05d8b52fb..2a448818b 100644 --- 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 index 3a387b974..e92c0ec61 100644 --- 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 index f1dba2b22..5a97a9cf7 100644 --- 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) { 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 index 081dc6e3d..ceb630447 100644 --- 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 index 4fd67a1ff..2555a2b39 100644 --- 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 index 248480f65..38ef18fdb 100644 --- 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 index db37730c0..66b6a1efb 100644 --- a/src/pages/requests/index.tsx +++ b/src/pages/requests/index.tsx @@ -31,7 +31,7 @@ const RequestsPage: FC = ({ <>
- +

{localization.formatString(localization.requestsPage.ingress, { @@ -52,14 +52,31 @@ const RequestsPage: FC = ({ {localization.requestsPage.createRequest} - - - setSearch(event.target.value)} - > - - + + + + + + + + + setSearch(event.target.value)} + /> + + + {localization.requestsPage.requests} diff --git a/src/pages/requests/styled.ts b/src/pages/requests/styled.ts index d614dd1ab..892096e03 100755 --- 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 }; From 9090403901c77be61a9c36d28cece9be1898b26d Mon Sep 17 00:00:00 2001 From: Hege Aalvik Date: Wed, 18 Oct 2023 15:38:30 +0200 Subject: [PATCH 2/3] fix: rename type --- src/components/filter-box/filter-box.component.tsx | 4 ++-- src/pages/search-page/filter-tree/filter-tree.component.tsx | 6 +++--- src/types/domain.d.ts | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/filter-box/filter-box.component.tsx b/src/components/filter-box/filter-box.component.tsx index 13efe3e1e..c33930c78 100644 --- a/src/components/filter-box/filter-box.component.tsx +++ b/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 { label: label || localization.facet.formatType.UNKNOWN }; }) - .sort((a: FilterSearchOption, b: FilterSearchOption) => + .sort((a: SelectOption, b: SelectOption) => a.label.localeCompare(b.label) ); diff --git a/src/pages/search-page/filter-tree/filter-tree.component.tsx b/src/pages/search-page/filter-tree/filter-tree.component.tsx index 45d7d7e01..9e870f6a8 100644 --- a/src/pages/search-page/filter-tree/filter-tree.component.tsx +++ b/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 = ({ 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)]; diff --git a/src/types/domain.d.ts b/src/types/domain.d.ts index 9b87387c0..24f25c140 100644 --- a/src/types/domain.d.ts +++ b/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; } From fb3458fe96f77619fa5b8a93113a03575893086f Mon Sep 17 00:00:00 2001 From: Hege Aalvik Date: Wed, 18 Oct 2023 15:39:46 +0200 Subject: [PATCH 3/3] feat: replace button with select --- package-lock.json | 46 ++++++++++++++--------------- src/l10n/en.json | 3 +- src/l10n/nb.json | 3 +- src/l10n/nn.json | 3 +- src/pages/requests/index.tsx | 57 +++++++++++++++++++++++------------- 5 files changed, 65 insertions(+), 47 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3aaa92503..ec0f5b60d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -488,11 +488,11 @@ } }, "node_modules/@babel/generator": { - "version": "7.22.15", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.15.tgz", - "integrity": "sha512-Zu9oWARBqeVOW0dZOjXc3JObrzuqothQ3y/n1kUtrjCoCPLkXUwMvOo/F/TCfoHMbWIFlWwpZtkZVb9ga4U2pA==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz", + "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==", "dependencies": { - "@babel/types": "^7.22.15", + "@babel/types": "^7.23.0", "@jridgewell/gen-mapping": "^0.3.2", "@jridgewell/trace-mapping": "^0.3.17", "jsesc": "^2.5.1" @@ -631,12 +631,12 @@ } }, "node_modules/@babel/helper-function-name": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz", - "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz", + "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==", "dependencies": { - "@babel/template": "^7.22.5", - "@babel/types": "^7.22.5" + "@babel/template": "^7.22.15", + "@babel/types": "^7.23.0" }, "engines": { "node": ">=6.9.0" @@ -853,9 +853,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.22.16", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.16.tgz", - "integrity": "sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz", + "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==", "bin": { "parser": "bin/babel-parser.js" }, @@ -2201,18 +2201,18 @@ } }, "node_modules/@babel/traverse": { - "version": "7.22.20", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.20.tgz", - "integrity": "sha512-eU260mPZbU7mZ0N+X10pxXhQFMGTeLb9eFS0mxehS8HZp9o1uSnFeWQuG1UPrlxgA7QoUzFhOnilHDp0AXCyHw==", + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz", + "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==", "dependencies": { "@babel/code-frame": "^7.22.13", - "@babel/generator": "^7.22.15", + "@babel/generator": "^7.23.0", "@babel/helper-environment-visitor": "^7.22.20", - "@babel/helper-function-name": "^7.22.5", + "@babel/helper-function-name": "^7.23.0", "@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.22.16", - "@babel/types": "^7.22.19", + "@babel/parser": "^7.23.0", + "@babel/types": "^7.23.0", "debug": "^4.1.0", "globals": "^11.1.0" }, @@ -2221,12 +2221,12 @@ } }, "node_modules/@babel/types": { - "version": "7.22.19", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.19.tgz", - "integrity": "sha512-P7LAw/LbojPzkgp5oznjE6tQEIWbp4PkkfrZDINTro9zgBRtI324/EYsiSI7lhPbpIQ+DCeR2NNmMWANGGfZsg==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz", + "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==", "dependencies": { "@babel/helper-string-parser": "^7.22.5", - "@babel/helper-validator-identifier": "^7.22.19", + "@babel/helper-validator-identifier": "^7.22.20", "to-fast-properties": "^2.0.0" }, "engines": { diff --git a/src/l10n/en.json b/src/l10n/en.json index ceb630447..58fe8f47f 100644 --- 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 index 2555a2b39..4dcd9da21 100644 --- 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 index 38ef18fdb..f42a1c93e 100644 --- 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 index 66b6a1efb..51e45a96d 100644 --- 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 = ({ 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 ( <> @@ -54,28 +71,26 @@ const RequestsPage: FC = ({ - - - - - - - setSearch(event.target.value)} +

+

{localization.requestsPage.view}

+ setSearch(event.target.value)} + /> + + +