diff --git a/apps/charterafrica/src/assets/icons/Property 1=Pin, Property 2=24, Property 3=Black.svg b/apps/charterafrica/src/assets/icons/Property 1=Pin, Property 2=24, Property 3=Black.svg new file mode 100644 index 000000000..0f8857a54 --- /dev/null +++ b/apps/charterafrica/src/assets/icons/Property 1=Pin, Property 2=24, Property 3=Black.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/charterafrica/src/components/DocumentCard/DocumentCard.js b/apps/charterafrica/src/components/DocumentCard/DocumentCard.js index 9282807c8..d6f2ff808 100644 --- a/apps/charterafrica/src/components/DocumentCard/DocumentCard.js +++ b/apps/charterafrica/src/components/DocumentCard/DocumentCard.js @@ -1,10 +1,11 @@ import { RichTypography } from "@commons-ui/core"; -import { Card, CardMedia, CardActionArea, Grid } from "@mui/material"; +import { Card, CardMedia, CardActionArea, Grid, SvgIcon } from "@mui/material"; import Link from "next/link"; import React from "react"; import Separator from "./Separator"; +import PinIcon from "@/charterafrica/assets/icons/Property 1=Pin, Property 2=24, Property 3=Black.svg"; import LineClampedRichTypography from "@/charterafrica/components/LineClampedRichTypography"; import formatDateTime from "@/charterafrica/utils/formatDate"; @@ -17,6 +18,7 @@ const DocumentCard = React.forwardRef(function DocumentCard(props, ref) { sx, title, href, + pinned = false, } = props; return ( @@ -51,91 +53,110 @@ const DocumentCard = React.forwardRef(function DocumentCard(props, ref) { /> - - - {title} - - - + + {title} + + + - {`${pages} Pages`} - - - - {`Contributed by: ${contributor}`} - + + {`${pages} Pages`} + + + + {`Contributed by: ${contributor}`} + + + + + {formatDateTime(publishDated, { includeTime: false })} + + - - - {formatDateTime(publishDated, { includeTime: false })} - + + {pinned && ( + + )} diff --git a/apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js b/apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js index faeb144b7..431514afc 100644 --- a/apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js +++ b/apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js @@ -15,45 +15,52 @@ exports[` renders unchanged 1`] = ` src="/images/hero-slide-1.jpg" />
- Document Title +
+ Document Title +
-
-
- 10 Pages +
+ 10 Pages +
+ + . + +
+ Contributed by: Contributor +
- - . -
- Contributed by: Contributor +
+ September 1, 2021 +
-
- September 1, 2021 -
-
+ class="MuiGrid-root css-vj1n65-MuiGrid-root" + />
", () => { diff --git a/apps/charterafrica/src/components/Documents/Documents.js b/apps/charterafrica/src/components/Documents/Documents.js index 60698f455..25d36b3f2 100644 --- a/apps/charterafrica/src/components/Documents/Documents.js +++ b/apps/charterafrica/src/components/Documents/Documents.js @@ -1,5 +1,5 @@ import { RichTypography, Section } from "@commons-ui/core"; -import { Box, LinearProgress } from "@mui/material"; +import { Box, LinearProgress, Divider } from "@mui/material"; import React, { useState, useEffect, useRef } from "react"; import DocumentFilterBar from "./DocumentFilterBar"; @@ -24,8 +24,14 @@ const Documents = React.forwardRef(function Documents(props, ref) { labels, pathname, showFilterBar, + pinnedDocuments: originalPinnedDocuments, + showPinnedDocuments, } = props; + const [documents, setDocuments] = useState(originalDocuments); + const [pinnedDocuments, setPinnedDocuments] = useState( + originalPinnedDocuments + ); const [totalPages, setTotalPages] = useState(0); const [page, setPage] = useState(1); const [filtering, setFiltering] = useState(false); @@ -63,7 +69,8 @@ const Documents = React.forwardRef(function Documents(props, ref) { search, ...documentOptions, }, - pathname + pathname, + showPinnedDocuments ); useEffect(() => { if (!res?.isLoading) { @@ -73,8 +80,10 @@ const Documents = React.forwardRef(function Documents(props, ref) { total, per_page: pageSize, page: currentPage, + pinnedDocuments: newPinnedDocuments, } = data || {}; setDocuments(foundDocuments); + setPinnedDocuments(newPinnedDocuments); setPage(currentPage); setTotalPages(Math.ceil(total / pageSize)); } @@ -123,6 +132,23 @@ const Documents = React.forwardRef(function Documents(props, ref) { /> ) : null} {res.isLoading ? : null} + + {pinnedDocuments?.map((document) => ( + + ))} + {documents?.map((document) => ( renders unchanged 1`] = ` +
diff --git a/apps/charterafrica/src/components/Documents/Documents.test.js b/apps/charterafrica/src/components/Documents/Documents.test.js index cd6dd6e47..a1a95d0e4 100644 --- a/apps/charterafrica/src/components/Documents/Documents.test.js +++ b/apps/charterafrica/src/components/Documents/Documents.test.js @@ -10,18 +10,26 @@ const render = createRender({ theme }); const defaultProps = { q: "group:ADF", - documents: [ - { - contributor: "Contributor", - createdAt: "2021-09-01", - description: "Document Description", - image: "/images/hero-slide-1.jpg", - pages: 10, - title: "Document Title", - url: "https://dc.sourceafrica.net/documents/120991-Case-Study-Drones-and-the-2017-Sierra-Leone.html", - href: "/documents/120991-Case-Study-Drones-and-the-2017-Sierra-Leone.html", - }, - ], + documents: Array.from({ length: 10 }, (_, i) => ({ + contributor: `Contributor ${i}`, + createdAt: "2021-09-01", + description: `Description ${i}`, + image: "/images/hero-slide-1.jpg", + pages: 10, + title: `Title ${i}`, + url: "https://dc.sourceafrica.net/documents/120991-Case-Study-Drones-and-the-2017-Sierra-Leone.html", + href: "/documents/120991-Case-Study-Drones-and-the-2017-Sierra-Leone.html", + })), + pinned: Array.from({ length: 3 }, (_, i) => ({ + contributor: `Contributor ${i}`, + createdAt: "2021-09-01", + description: `Description ${i}`, + image: "/images/hero-slide-1.jpg", + pages: 10, + title: `Title ${i}`, + url: "https://dc.sourceafrica.net/documents/120991-Case-Study-Drones-and-the-2017-Sierra-Leone.html", + href: "/documents/120991-Case-Study-Drones-and-the-2017-Sierra-Leone.html", + })), documentOptions: { url: "https://dc.sourceafrica.net/documents/120991-Case-Study-Drones-and-the-2017-Sierra-Leone.html", showNotes: true, diff --git a/apps/charterafrica/src/components/Documents/useDocuments.js b/apps/charterafrica/src/components/Documents/useDocuments.js index 9b4533554..363f45cd9 100644 --- a/apps/charterafrica/src/components/Documents/useDocuments.js +++ b/apps/charterafrica/src/components/Documents/useDocuments.js @@ -4,8 +4,8 @@ import queryString from "@/charterafrica/utils/documents/queryString"; const fetcher = (url) => fetch(url).then((res) => res.json()); -function useDocuments(q, options, pathname) { - const qs = queryString({ ...options, q, pathname }); +function useDocuments(q, options, pathname, showPinnedDocuments) { + const qs = queryString({ ...options, q, pathname, showPinnedDocuments }); const separator = qs ? "?" : ""; const { data, error } = useSWR( `/api/v1/resources/documents${separator}${qs}`, diff --git a/apps/charterafrica/src/lib/data/common/processPageConsultation.js b/apps/charterafrica/src/lib/data/common/processPageConsultation.js index 309213f28..b709d788e 100644 --- a/apps/charterafrica/src/lib/data/common/processPageConsultation.js +++ b/apps/charterafrica/src/lib/data/common/processPageConsultation.js @@ -105,7 +105,7 @@ async function processPageConsultation(page, api, context) { if (documentsIndex > -1) { const { description: documentsDescription, - group: { groupId, options }, + group: { groupId, options, showPinnedDocuments }, title: documentsTitle, } = blocks[documentsIndex]; const documentsQuery = getDocumentsQuery(page, context, options); @@ -115,7 +115,8 @@ async function processPageConsultation(page, api, context) { const documents = await fetchDocuments( `group:${groupId} lang:${locale}`, documentsPathname, - query + query, + showPinnedDocuments ); blocks[documentsIndex] = { ...blocks[documentsIndex], @@ -125,6 +126,7 @@ async function processPageConsultation(page, api, context) { pathname: documentsPathname, slug: "documents", title: documentsTitle ?? null, + showPinnedDocuments, }; let swrKey = `/api/v1/resources/documents`; diff --git a/apps/charterafrica/src/lib/data/common/processPageDocuments.js b/apps/charterafrica/src/lib/data/common/processPageDocuments.js index b603663b6..0b0a752f0 100644 --- a/apps/charterafrica/src/lib/data/common/processPageDocuments.js +++ b/apps/charterafrica/src/lib/data/common/processPageDocuments.js @@ -61,7 +61,7 @@ export default async function processPageDocuments(page, api, context) { datasets, filterBar, labels, - organization: { groupId, options }, + organization: { groupId, options, showPinnedDocuments }, showDatasets, showFilterBar, } = blocks[documentsIndex]; @@ -70,7 +70,8 @@ export default async function processPageDocuments(page, api, context) { const documents = await fetchDocuments( `group:${groupId} lang:${locale}`, pathname, - query + query, + showPinnedDocuments ); const { labels: commonLabels } = await api.findGlobal("common-labels", { @@ -89,6 +90,7 @@ export default async function processPageDocuments(page, api, context) { showDatasets, datasets, pathname: pageUrl, + showPinnedDocuments, }; let swrKey = `/api/v1/resources/documents`; diff --git a/apps/charterafrica/src/lib/sourceAfrica.js b/apps/charterafrica/src/lib/sourceAfrica.js index 2888ba3c8..7338152fc 100644 --- a/apps/charterafrica/src/lib/sourceAfrica.js +++ b/apps/charterafrica/src/lib/sourceAfrica.js @@ -37,11 +37,16 @@ function formatDocuments(data, pathname) { return { ...rest, - documents: formattedDocuments, + documents: formattedDocuments || [], }; } -export async function fetchDocuments(q, pathname, options = {}) { +export async function fetchDocuments( + q, + pathname, + options = {}, + showPinnedDocuments = false +) { const params = { ...options, q, @@ -50,7 +55,33 @@ export async function fetchDocuments(q, pathname, options = {}) { const data = await fetchJson.get(`${BASE_DOCUMENTS_URL}search.json`, { params, }); - return formatDocuments(data, pathname, options); + const formattedData = formatDocuments(data, pathname); + + if (!showPinnedDocuments) { + return formattedData; + } + + const pinnedDocuments = await fetchJson.get( + `${BASE_DOCUMENTS_URL}search.json`, + { + params: { + ...params, + q: `${q} pinned:true`, + }, + } + ); + const formattedPinnedDocuments = formatDocuments(pinnedDocuments, pathname); + + formattedData.pinnedDocuments = formattedPinnedDocuments.documents; + + formattedData.documents = formattedData.documents.filter( + (document) => + !formattedData.pinnedDocuments.find( + (pinnedDocument) => pinnedDocument.id === document.id + ) + ); + + return formattedData; } catch (err) { Sentry.captureException(err); } diff --git a/apps/charterafrica/src/pages/api/v1/resources/[type].page.js b/apps/charterafrica/src/pages/api/v1/resources/[type].page.js index f3902e043..9737862cb 100644 --- a/apps/charterafrica/src/pages/api/v1/resources/[type].page.js +++ b/apps/charterafrica/src/pages/api/v1/resources/[type].page.js @@ -27,9 +27,8 @@ async function datasets(req, res) { } async function documents(req, res) { - const { q, pathname, ...rest } = req.query; - - const data = await fetchDocuments(q, pathname, rest); + const { q, pathname, showPinnedDocuments, ...rest } = req.query; + const data = await fetchDocuments(q, pathname, rest, showPinnedDocuments); return res.status(200).json(data); } diff --git a/apps/charterafrica/src/payload/fields/documentCloudSource.js b/apps/charterafrica/src/payload/fields/documentCloudSource.js index de0e6dcc8..082dec297 100644 --- a/apps/charterafrica/src/payload/fields/documentCloudSource.js +++ b/apps/charterafrica/src/payload/fields/documentCloudSource.js @@ -86,6 +86,17 @@ function documentCloudSource({ overrides } = {}) { hideGutter: true, }, }, + { + name: "showPinnedDocuments", + type: "checkbox", + label: { + en: "Show Pinned Documents", + fr: "Afficher les documents épinglés", + pt: "Mostrar documentos fixados", + }, + defaultValue: false, + required: true, + }, ], }; diff --git a/apps/charterafrica/src/utils/documents/queryString.js b/apps/charterafrica/src/utils/documents/queryString.js index b2f65eec6..2abc62d9b 100644 --- a/apps/charterafrica/src/utils/documents/queryString.js +++ b/apps/charterafrica/src/utils/documents/queryString.js @@ -10,6 +10,7 @@ function queryString(query = {}) { const { contributor = true, pathname, + showPinnedDocuments, per_page: pageSize = 8, q, sort, @@ -42,6 +43,10 @@ function queryString(query = {}) { searchParams.append("pathname", pathname); } + if (showPinnedDocuments) { + searchParams.append("showPinnedDocuments", showPinnedDocuments); + } + return searchParams.toString() || ""; }