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() || "";
}