Skip to content

Commit

Permalink
Merge pull request #463 from CodeForAfrica/ft/pin-documents
Browse files Browse the repository at this point in the history 
ft/pinned-documents
  • Loading branch information
@kelvinkipruto
kelvinkipruto committed Jul 5, 2023
2 parents 63e1642 + d772656 commit 80fb0ac
Show file tree
Hide file tree
Showing 14 changed files with 242 additions and 123 deletions.
3 changes: 3 additions & 0 deletions ...rterafrica/src/assets/icons/Property 1=Pin, Property 2=24, Property 3=Black.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
165 changes: 93 additions & 72 deletions apps/charterafrica/src/components/DocumentCard/DocumentCard.js
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -17,6 +18,7 @@ const DocumentCard = React.forwardRef(function DocumentCard(props, ref) {
sx,
title,
href,
pinned = false,
} = props;

return (
Expand Down Expand Up @@ -51,91 +53,110 @@ const DocumentCard = React.forwardRef(function DocumentCard(props, ref) {
/>
<Grid
container
wrap="nowrap"
justifyContent="space-between"
sx={{
ml: 5,
}}
alignItems="center"
>
<Grid item xs={12}>
<LineClampedRichTypography
color="neutral.dark"
typography={{
xs: "h6SmallSemiBold",
md: "h2SemiBold",
}}
lineClamp={{
xs: 2,
sm: 3,
md: 1,
}}
>
{title}
</LineClampedRichTypography>
</Grid>
<Grid
container
direction={{
xs: "column",
sm: "row",
}}
alignItems={{
xs: "flex-start",
sm: "center",
}}
justifyContent="flex-start"
wrap="nowrap"
justifyContent="space-between"
sx={{
mt: 2,
gap: {
xs: 1,
sm: 0,
},
ml: 5,
}}
>
<RichTypography
color="black"
typography={{
xs: "caption",
sm: "subheading",
<Grid item xs={12}>
<LineClampedRichTypography
color="neutral.dark"
typography={{
xs: "h6SmallSemiBold",
md: "h2SemiBold",
}}
lineClamp={{
xs: 2,
sm: 3,
md: 1,
}}
>
{title}
</LineClampedRichTypography>
</Grid>
<Grid
container
direction={{
xs: "column",
sm: "row",
}}
sx={{
whiteSpace: "nowrap",
alignItems={{
xs: "flex-start",
sm: "center",
}}
>
{`${pages} Pages`}
</RichTypography>
<Separator
justifyContent="flex-start"
wrap="nowrap"
sx={{
display: {
xs: "none",
sm: "block",
mt: 2,
gap: {
xs: 1,
sm: 0,
},
}}
/>
<LineClampedRichTypography
color="black"
typography={{
xs: "caption",
sm: "subheading",
}}
lineClamp={{
xs: 3,
sm: 1,
}}
>
{`Contributed by: ${contributor}`}
</LineClampedRichTypography>
<RichTypography
color="black"
typography={{
xs: "caption",
sm: "subheading",
}}
sx={{
whiteSpace: "nowrap",
}}
>
{`${pages} Pages`}
</RichTypography>
<Separator
sx={{
display: {
xs: "none",
sm: "block",
},
}}
/>
<LineClampedRichTypography
color="black"
typography={{
xs: "caption",
sm: "subheading",
}}
lineClamp={{
xs: 3,
sm: 1,
}}
>
{`Contributed by: ${contributor}`}
</LineClampedRichTypography>
</Grid>
<Grid item xs={12}>
<RichTypography
color="black"
typography={{ xs: "caption", sm: "subheading" }}
sx={{
my: 2,
}}
>
{formatDateTime(publishDated, { includeTime: false })}
</RichTypography>
</Grid>
</Grid>
<Grid item xs={12}>
<RichTypography
color="black"
typography={{ xs: "caption", sm: "subheading" }}
sx={{
my: 2,
}}
>
{formatDateTime(publishDated, { includeTime: false })}
</RichTypography>
<Grid>
{pinned && (
<SvgIcon
component={PinIcon}
sx={{
color: "inherit",
display: "inline-flex",
fill: "none",
}}
/>
)}
</Grid>
</Grid>
</CardActionArea>
Expand Down
57 changes: 32 additions & 25 deletions apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,45 +15,52 @@ exports[`<DocumentCard /> renders unchanged 1`] = `
src="/images/hero-slide-1.jpg"
/>
<div
class="MuiGrid-root MuiGrid-container css-1d9j9dw-MuiGrid-root"
class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-1c9lqjq-MuiGrid-root"
>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
class="MuiGrid-root MuiGrid-container css-1d9j9dw-MuiGrid-root"
>
<div
class="MuiTypography-root MuiTypography-p1 css-d1m63n-MuiTypography-root"
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
>
Document Title
<div
class="MuiTypography-root MuiTypography-p1 css-d1m63n-MuiTypography-root"
>
Document Title
</div>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-1qjtras-MuiGrid-root"
>
<div
class="MuiTypography-root MuiTypography-p1 css-2zk7gx-MuiTypography-root"
class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-1qjtras-MuiGrid-root"
>
10 Pages
<div
class="MuiTypography-root MuiTypography-p1 css-2zk7gx-MuiTypography-root"
>
10 Pages
</div>
<span
class="css-vnw9up"
>
.
</span>
<div
class="MuiTypography-root MuiTypography-p1 css-r7a0d0-MuiTypography-root"
>
Contributed by: Contributor
</div>
</div>
<span
class="css-vnw9up"
>
.
</span>
<div
class="MuiTypography-root MuiTypography-p1 css-r7a0d0-MuiTypography-root"
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
>
Contributed by: Contributor
<div
class="MuiTypography-root MuiTypography-p1 css-yvyayl-MuiTypography-root"
>
September 1, 2021
</div>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
>
<div
class="MuiTypography-root MuiTypography-p1 css-yvyayl-MuiTypography-root"
>
September 1, 2021
</div>
</div>
class="MuiGrid-root css-vj1n65-MuiGrid-root"
/>
</div>
<span
class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
Expand Down
1 change: 1 addition & 0 deletions apps/charterafrica/src/components/DocumentCard/DocumentCard.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const defaultProps = {
image: "/images/hero-slide-1.jpg",
pages: 10,
title: "Document Title",
pinned: false,
};

describe("<DocumentCard />", () => {
Expand Down
30 changes: 28 additions & 2 deletions apps/charterafrica/src/components/Documents/Documents.js
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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);
Expand Down Expand Up @@ -63,7 +69,8 @@ const Documents = React.forwardRef(function Documents(props, ref) {
search,
...documentOptions,
},
pathname
pathname,
showPinnedDocuments
);
useEffect(() => {
if (!res?.isLoading) {
Expand All @@ -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));
}
Expand Down Expand Up @@ -123,6 +132,23 @@ const Documents = React.forwardRef(function Documents(props, ref) {
/>
) : null}
{res.isLoading ? <LinearProgress color="secondary" /> : null}

{pinnedDocuments?.map((document) => (
<DocumentCard
{...document}
key={document.href}
pinned
sx={{
"&:first-of-type": {
mt: 5,
},
"&:last-of-type": {
mb: 0,
},
}}
/>
))}
<Divider sx={{ my: 2 }} />
{documents?.map((document) => (
<DocumentCard
{...document}
Expand Down
3 changes: 3 additions & 0 deletions apps/charterafrica/src/components/Documents/Documents.snap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,9 @@ exports[`<Documents /> renders unchanged 1`] = `
</div>
</div>
</div>
<hr
class="MuiDivider-root MuiDivider-fullWidth css-ctpjxq-MuiDivider-root"
/>
</div>
</div>
</div>
Expand Down
Loading

1 comment on commit 80fb0ac

@vercel
Copy link

@vercel vercel bot commented on 80fb0ac Jul 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

codeforafrica – ./

codeforafrica-codeforafrica.vercel.app
codeforafrica.vercel.app
codeforafrica-git-main-codeforafrica.vercel.app

Please sign in to comment.