From faafff64d578c35b901ddbb6c9e4b3a6bad6165d Mon Sep 17 00:00:00 2001 From: Jelle Date: Sat, 12 Oct 2024 20:42:00 +0200 Subject: [PATCH 1/2] Add boardmember collectiontype for nicer layout --- .../content-types/boardmember/schema.json | 42 +++++++++++++++ .../boardmember/controllers/boardmember.js | 9 ++++ .../src/api/boardmember/routes/boardmember.js | 9 ++++ .../api/boardmember/services/boardmember.js | 9 ++++ frontend/src/components/BoardmemberCard.tsx | 52 +++++++++++++++++++ frontend/src/models/Boardmember.ts | 7 +++ frontend/src/pages/over-ons.tsx | 21 ++++++-- frontend/src/utils/backend.ts | 21 ++++++++ 8 files changed, 165 insertions(+), 5 deletions(-) create mode 100644 backend/src/api/boardmember/content-types/boardmember/schema.json create mode 100644 backend/src/api/boardmember/controllers/boardmember.js create mode 100644 backend/src/api/boardmember/routes/boardmember.js create mode 100644 backend/src/api/boardmember/services/boardmember.js create mode 100644 frontend/src/components/BoardmemberCard.tsx create mode 100644 frontend/src/models/Boardmember.ts diff --git a/backend/src/api/boardmember/content-types/boardmember/schema.json b/backend/src/api/boardmember/content-types/boardmember/schema.json new file mode 100644 index 0000000..71b32f6 --- /dev/null +++ b/backend/src/api/boardmember/content-types/boardmember/schema.json @@ -0,0 +1,42 @@ +{ + "kind": "collectionType", + "collectionName": "boardmembers", + "info": { + "singularName": "boardmember", + "pluralName": "boardmembers", + "displayName": "Bestuurslid", + "description": "" + }, + "options": { + "draftAndPublish": true + }, + "pluginOptions": {}, + "attributes": { + "name": { + "type": "string", + "required": true + }, + "role": { + "type": "string", + "required": true + }, + "email": { + "type": "email", + "required": true + }, + "extra": { + "type": "richtext" + }, + "photo": { + "type": "media", + "multiple": false, + "required": true, + "allowedTypes": ["images"] + }, + "order": { + "type": "integer", + "required": true, + "default": 10 + } + } +} diff --git a/backend/src/api/boardmember/controllers/boardmember.js b/backend/src/api/boardmember/controllers/boardmember.js new file mode 100644 index 0000000..ea4bb3d --- /dev/null +++ b/backend/src/api/boardmember/controllers/boardmember.js @@ -0,0 +1,9 @@ +"use strict"; + +/** + * boardmember controller + */ + +const { createCoreController } = require("@strapi/strapi").factories; + +module.exports = createCoreController("api::boardmember.boardmember"); diff --git a/backend/src/api/boardmember/routes/boardmember.js b/backend/src/api/boardmember/routes/boardmember.js new file mode 100644 index 0000000..7b54663 --- /dev/null +++ b/backend/src/api/boardmember/routes/boardmember.js @@ -0,0 +1,9 @@ +"use strict"; + +/** + * boardmember router + */ + +const { createCoreRouter } = require("@strapi/strapi").factories; + +module.exports = createCoreRouter("api::boardmember.boardmember"); diff --git a/backend/src/api/boardmember/services/boardmember.js b/backend/src/api/boardmember/services/boardmember.js new file mode 100644 index 0000000..9be9e7a --- /dev/null +++ b/backend/src/api/boardmember/services/boardmember.js @@ -0,0 +1,9 @@ +"use strict"; + +/** + * boardmember service + */ + +const { createCoreService } = require("@strapi/strapi").factories; + +module.exports = createCoreService("api::boardmember.boardmember"); diff --git a/frontend/src/components/BoardmemberCard.tsx b/frontend/src/components/BoardmemberCard.tsx new file mode 100644 index 0000000..f054356 --- /dev/null +++ b/frontend/src/components/BoardmemberCard.tsx @@ -0,0 +1,52 @@ +import Image from "next/image"; +import imageLoader from "../utils/image-loader"; +import { Boardmember } from "../models/Boardmember"; +import Subheader from "./Subheader"; +import { IconContext } from "react-icons"; +import { FaEnvelope, FaPhone } from "react-icons/fa"; +import Markdown from "./Markdown"; + +interface Props { + boardmember: Boardmember; +} + +export default function BoardmemberCard(props: Props) { + const boardmember = props.boardmember; + return ( +
+
+ {`Foto +
+
+ {boardmember.name} +

{boardmember.role}

+
+ +

+ + + {boardmember.email} + +

+ +
+ +
+
+ ); +} diff --git a/frontend/src/models/Boardmember.ts b/frontend/src/models/Boardmember.ts new file mode 100644 index 0000000..d28c425 --- /dev/null +++ b/frontend/src/models/Boardmember.ts @@ -0,0 +1,7 @@ +export interface Boardmember { + name: string; + role: string; + email: string; + extra: string; + photo: string; +} diff --git a/frontend/src/pages/over-ons.tsx b/frontend/src/pages/over-ons.tsx index 46eec7b..32af34d 100644 --- a/frontend/src/pages/over-ons.tsx +++ b/frontend/src/pages/over-ons.tsx @@ -1,4 +1,4 @@ -import { fetchAboutUs } from "../utils/backend"; +import { fetchAboutUs, fetchBoardmembers } from "../utils/backend"; import AboutUsContent from "../models/AboutUsContent"; import Markdown from "../components/Markdown"; import Banner from "../components/Banner"; @@ -6,9 +6,12 @@ import Main from "../components/Main"; import { GetStaticPropsResult } from "next"; import { revalidate } from "../utils/revalidate"; import HeadPage from "../components/HeadPage"; +import BoardmemberCard from "../components/BoardmemberCard"; +import { Boardmember } from "../models/Boardmember"; interface Props { content: AboutUsContent; + boardmembers: Boardmember[]; } export default function OverOnsPage(props: Props) { @@ -21,17 +24,25 @@ export default function OverOnsPage(props: Props) { />
- +
+ +
+ {props.boardmembers.map((boardmember) => ( + + ))}
); } export async function getStaticProps(): Promise> { + const [content, boardmembers] = await Promise.all([ + fetchAboutUs(), + fetchBoardmembers(), + ]); + return { - props: { - content: await fetchAboutUs(), - }, + props: { content, boardmembers }, revalidate, }; } diff --git a/frontend/src/utils/backend.ts b/frontend/src/utils/backend.ts index 7f6581d..6be3160 100644 --- a/frontend/src/utils/backend.ts +++ b/frontend/src/utils/backend.ts @@ -17,6 +17,7 @@ import ProgramContent from "../models/ProgramContent"; import Fallback from "../models/Fallback"; import { PetitionDetail } from "../models/Petition"; import WorkgroupPageContent from "../models/WorkgroupPageContent"; +import { Boardmember } from "../models/Boardmember"; export const backendBaseUrl = process.env.BACKEND_URL ?? process.env.NEXT_PUBLIC_BACKEND_URL ?? ""; @@ -84,6 +85,26 @@ export async function fetchAboutUs(): Promise { return sanitise(response.data.data.attributes); } +export async function fetchBoardmembers(): Promise { + const response = await backend.get>("/boardmembers", { + params: { + sort: "order", + populate: { + photo: { + fields: ["url"], + }, + }, + }, + }); + + function sanitise(boardmember: any): Boardmember { + boardmember.photo = boardmember.photo.data?.attributes?.url ?? null; + return boardmember; + } + + return response.data.data.map((it) => sanitise(it.attributes)); +} + export async function fetchProgram(): Promise { const response = await backend.get>("/program", { params: { From 3d9e6bbf3b649a363649dee605bbad3ccd08c557 Mon Sep 17 00:00:00 2001 From: Jelle Date: Sat, 12 Oct 2024 22:42:33 +0200 Subject: [PATCH 2/2] Make most input fields optional --- .../content-types/boardmember/schema.json | 6 +++--- frontend/src/components/BoardmemberCard.tsx | 20 ++++++++++--------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/backend/src/api/boardmember/content-types/boardmember/schema.json b/backend/src/api/boardmember/content-types/boardmember/schema.json index 71b32f6..9e34a3d 100644 --- a/backend/src/api/boardmember/content-types/boardmember/schema.json +++ b/backend/src/api/boardmember/content-types/boardmember/schema.json @@ -18,11 +18,11 @@ }, "role": { "type": "string", - "required": true + "required": false }, "email": { "type": "email", - "required": true + "required": false }, "extra": { "type": "richtext" @@ -30,7 +30,7 @@ "photo": { "type": "media", "multiple": false, - "required": true, + "required": false, "allowedTypes": ["images"] }, "order": { diff --git a/frontend/src/components/BoardmemberCard.tsx b/frontend/src/components/BoardmemberCard.tsx index f054356..453ef50 100644 --- a/frontend/src/components/BoardmemberCard.tsx +++ b/frontend/src/components/BoardmemberCard.tsx @@ -15,14 +15,16 @@ export default function BoardmemberCard(props: Props) { return (
- {`Foto + {boardmember.photo && ( + {`Foto + )}
{boardmember.name} @@ -39,7 +41,7 @@ export default function BoardmemberCard(props: Props) { className="group hover:underline" href={`mailto:${boardmember.email}`} > - + {boardmember.email && } {boardmember.email}