From 98fc4f642e72ed4e5d18c5fbe9b32528f507da4c Mon Sep 17 00:00:00 2001 From: Bon Nicolai Mercado Date: Sat, 19 Oct 2024 06:20:23 +0800 Subject: [PATCH] add trusted by images --- apps/website/src/app/clientLayout.tsx | 9 ++- apps/website/src/app/hooks/UseStrapi.ts | 48 -------------- .../website/src/app/hooks/strapi/UseStrapi.ts | 65 +++++++++++++++++++ apps/website/src/app/hooks/strapi/requests.ts | 47 ++++++++++++++ apps/website/src/app/hooks/strapi/types.ts | 30 +++++++++ apps/website/src/app/page.tsx | 17 ++--- apps/website/src/app/team/page.tsx | 8 ++- 7 files changed, 157 insertions(+), 67 deletions(-) delete mode 100644 apps/website/src/app/hooks/UseStrapi.ts create mode 100644 apps/website/src/app/hooks/strapi/UseStrapi.ts create mode 100644 apps/website/src/app/hooks/strapi/requests.ts create mode 100644 apps/website/src/app/hooks/strapi/types.ts diff --git a/apps/website/src/app/clientLayout.tsx b/apps/website/src/app/clientLayout.tsx index 5cb7d79..01ba849 100644 --- a/apps/website/src/app/clientLayout.tsx +++ b/apps/website/src/app/clientLayout.tsx @@ -25,14 +25,13 @@ import { Anchor } from "@lilypad/shared-components"; import Footer from "@/components/Footer"; import { animated, useSpring } from "@react-spring/web"; import { createContext } from "react"; -import useStrapi, { StrapiContext } from "./hooks/UseStrapi"; +import useStrapi from "./hooks/strapi/UseStrapi"; +import { StrapiContext } from "./hooks/strapi/types"; const INTER = Inter({ subsets: ["latin"] }); export const PageContext: Context = createContext({ - strapi: { - mission_statement: "", - }, + strapi: {}, }); export default function ClientLayout({ @@ -46,7 +45,7 @@ export default function ClientLayout({ ); const pathname = usePathname(); const { strapi, isLoading: isCmsLoading } = useStrapi({ pathname }); - + console.log(strapi, isCmsLoading); const resourcesArray = [ { description: "The latest industry news, updates and info", diff --git a/apps/website/src/app/hooks/UseStrapi.ts b/apps/website/src/app/hooks/UseStrapi.ts deleted file mode 100644 index 59276c5..0000000 --- a/apps/website/src/app/hooks/UseStrapi.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { useEffect, useState } from "react"; - -export interface StrapiContext { - strapi: StrapiCmsInfo; -} - -interface StrapiCmsInfo { - mission_statement: string; -} -interface StrapiResponse { - strapi: StrapiCmsInfo; - isLoading: Boolean; -} -interface StrapiProps { - pathname: string; -} - -function useStrapi({ pathname }: StrapiProps): StrapiResponse { - const [isLoading, setIsLoading] = useState(true); - const [strapi, setStrapi] = useState({ - mission_statement: "", - }); - const getApiName = () => { - switch (pathname) { - case "/": - return "website-homepage"; - } - }; - useEffect(() => { - const apiName = getApiName(); - fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/${apiName}`, { - headers: { - authorization: `bearer ${process.env.NEXT_PUBLIC_STRAPI_API}`, - }, - }).then((data) => { - data.json() - .then(({ data: info }) => { - setStrapi(info); - }) - .finally(() => { - setIsLoading(false); - }); - }); - }, []); - return { strapi, isLoading }; -} - -export default useStrapi; diff --git a/apps/website/src/app/hooks/strapi/UseStrapi.ts b/apps/website/src/app/hooks/strapi/UseStrapi.ts new file mode 100644 index 0000000..248852e --- /dev/null +++ b/apps/website/src/app/hooks/strapi/UseStrapi.ts @@ -0,0 +1,65 @@ +import { useEffect, useState } from "react"; +import { getHomepageInfo, getTrustedBy } from "./requests"; +import { HomePageCmsInfo, StrapiProps, StrapiResponse } from "./types"; + +function useStrapi({ pathname }: StrapiProps): StrapiResponse { + const [isLoading, setIsLoading] = useState(true); + const [strapi, setStrapi] = useState({}); + const getData = () => { + switch (pathname) { + case "/": + Promise.allSettled([getHomepageInfo(), getTrustedBy()]) + .then((results) => { + const homepageInfoResp = + results[0] as PromiseFulfilledResult; + const trustedByResp = + results[1] as PromiseFulfilledResult; + if ( + homepageInfoResp.status === "fulfilled" && + trustedByResp.status === "fulfilled" + ) { + setStrapi((prevState: HomePageCmsInfo) => { + return { + ...prevState, + mission_statement: homepageInfoResp.value, + trusted_bies: trustedByResp.value, + }; + }); + } + }) + .catch(() => { + throw new Error("Failed to fetch strapi data"); + }) + .finally(() => { + setIsLoading(false); + }); + break; + case "/team": + Promise.allSettled([getTrustedBy()]) + .then((results) => { + const trustedByResp = + results[0] as PromiseFulfilledResult; + if (trustedByResp.status === "fulfilled") { + setStrapi((prevState: HomePageCmsInfo) => { + return { + ...prevState, + trusted_bies: trustedByResp.value, + }; + }); + } + }) + .finally(() => { + setIsLoading(false); + }); + break; + default: + setIsLoading(false); + } + }; + useEffect(() => { + getData(); + }, []); + return { strapi, isLoading }; +} + +export default useStrapi; diff --git a/apps/website/src/app/hooks/strapi/requests.ts b/apps/website/src/app/hooks/strapi/requests.ts new file mode 100644 index 0000000..5344c61 --- /dev/null +++ b/apps/website/src/app/hooks/strapi/requests.ts @@ -0,0 +1,47 @@ +import { TrustedByInfo } from "./types"; + +const cms_base_url = process.env.NEXT_PUBLIC_STRAPI_URL; +//remove /api from base_url and to home_url variable +const cms_home_url = cms_base_url?.replace("/api", ""); +export function getHomepageInfo() { + return new Promise((resolve, reject) => { + fetch(`${cms_base_url}/website-homepage`, { + headers: { + authorization: `bearer ${process.env.NEXT_PUBLIC_STRAPI_API}`, + }, + }) + .then((data) => { + data.json().then(({ data: info }) => { + resolve(info.mission_statement); + }); + }) + .catch((err) => { + reject(err); + }); + }); +} + +export function getTrustedBy() { + return new Promise((resolve, reject) => { + fetch( + `${cms_base_url}/website-trusted-bies?populate[image][fields][0]=url`, + { + headers: { + authorization: `bearer ${process.env.NEXT_PUBLIC_STRAPI_API}`, + }, + } + ).then((data) => { + data.json() + .then(({ data: infos }) => { + const trustedBies = infos.map((infos: TrustedByInfo) => ({ + alt: infos.alt, + src: cms_home_url + infos.image.url, + })); + resolve(trustedBies); + }) + .catch((err) => { + reject(err); + }); + }); + }); +} diff --git a/apps/website/src/app/hooks/strapi/types.ts b/apps/website/src/app/hooks/strapi/types.ts new file mode 100644 index 0000000..95b336d --- /dev/null +++ b/apps/website/src/app/hooks/strapi/types.ts @@ -0,0 +1,30 @@ +export interface StrapiContext { + strapi: HomePageCmsInfo | Object; +} + +export interface HomePageCmsInfo { + mission_statement: string; + trusted_bies: { + src: string; + alt: string; + }[]; +} +export interface TeamPageCmsInfo { + trusted_bies: { + src: string; + alt: string; + }[]; +} +export interface TrustedByInfo { + alt: string; + image: { + url: string; + }; +} +export interface StrapiResponse { + strapi: HomePageCmsInfo | Object; + isLoading: Boolean; +} +export interface StrapiProps { + pathname: string; +} diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx index 24e8b03..46f52a0 100644 --- a/apps/website/src/app/page.tsx +++ b/apps/website/src/app/page.tsx @@ -29,9 +29,10 @@ import { animated } from "@react-spring/web"; import useFade from "./hooks/UseFade"; import useFadeInView from "./hooks/UseFadeInView"; import { PageContext } from "./clientLayout"; +import { HomePageCmsInfo } from "./hooks/strapi/types"; export default function Home() { - const { strapi } = useContext(PageContext); + const { strapi } = useContext(PageContext) as { strapi: HomePageCmsInfo }; const socialLinks = [ { href: "https://twitter.com/lilypad_tech", iconUrl: "/x.svg" }, { @@ -200,16 +201,6 @@ export default function Home() { } }, []); - const trustedByArray = [ - { src: "/bacalhau.svg", alt: "Bacalhau" }, - { src: "/bacalhau.svg", alt: "Filecoin" }, - { src: "/bacalhau.svg", alt: "Holon" }, - { src: "/bacalhau.svg", alt: "Protocol Labs" }, - { src: "/bacalhau.svg", alt: "Rare Compute" }, - { src: "/bacalhau.svg", alt: "Spheron" }, - { src: "/bacalhau.svg", alt: "Swan" }, - ]; - const copyEmail = "hello@lilypad.tech"; const [copyState, setCopyState] = useState({ @@ -370,7 +361,7 @@ export default function Home() { @@ -394,7 +385,7 @@ export default function Home() { that uses underutilized resources to make efficient, sustainable technology accessible to everyone. */} - {strapi.mission_statement} + {strapi?.mission_statement} diff --git a/apps/website/src/app/team/page.tsx b/apps/website/src/app/team/page.tsx index 296dbda..5605dd2 100644 --- a/apps/website/src/app/team/page.tsx +++ b/apps/website/src/app/team/page.tsx @@ -10,8 +10,14 @@ import useFadeInView from "../hooks/UseFadeInView"; import { animated } from "@react-spring/web"; import AnimateSpring from "@/components/AnimateSpring"; import useFade from "../hooks/UseFade"; +import { useContext } from "react"; +import { PageContext } from "../clientLayout"; +import { TeamPageCmsInfo } from "../hooks/strapi/types"; export default function Teams() { + const { strapi } = useContext(PageContext) as { + strapi: TeamPageCmsInfo; + }; const socialLinks = [ { href: "twitter.com", iconUrl: "/x.svg" }, @@ -229,7 +235,7 @@ export default function Teams() {