From bd30155c63348fffae126425d9d11ecee24ee06f Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Tue, 24 Sep 2024 20:32:02 +0200 Subject: [PATCH 1/6] Use effect to shuffle testimonials once --- .../app-pages/HomePage/TestimonialsSection.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/frontends/main/src/app-pages/HomePage/TestimonialsSection.tsx b/frontends/main/src/app-pages/HomePage/TestimonialsSection.tsx index e7a4d0226a..0ef069022e 100644 --- a/frontends/main/src/app-pages/HomePage/TestimonialsSection.tsx +++ b/frontends/main/src/app-pages/HomePage/TestimonialsSection.tsx @@ -1,4 +1,4 @@ -import React from "react" +import React, { useEffect, useState } from "react" import _ from "lodash" import { Container, @@ -11,6 +11,7 @@ import { onReInitSlickA11y, } from "ol-components" import { useTestimonialList } from "api/hooks/testimonials" +import type { Attestation } from "api/v0" import { RiArrowRightLine, RiArrowLeftLine } from "@remixicon/react" import Slider from "react-slick" import AttestantBlock from "@/page-components/TestimonialDisplay/AttestantBlock" @@ -224,8 +225,16 @@ const TestimonialTruncateText = styled(TruncateText)({ const SlickCarousel = () => { const { data } = useTestimonialList({ position: 1 }) const [slick, setSlick] = React.useState(null) + const [shuffled, setShuffled] = useState(); - if (!data || data.results.length === 0) return null + useEffect(() => { + if (!data) return + setShuffled(_.shuffle(data?.results)) + }, [data]) + + if (!data?.results?.length || !shuffled?.length) { + return null + } const settings = { ref: setSlick, @@ -248,7 +257,7 @@ const SlickCarousel = () => { return ( - {_.shuffle(data?.results).map((resource, idx) => ( + {shuffled.map((resource, idx) => ( Date: Tue, 24 Sep 2024 21:01:58 +0200 Subject: [PATCH 2/6] Use image/next for testimonial --- .../src/app-pages/HomePage/TestimonialsSection.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/frontends/main/src/app-pages/HomePage/TestimonialsSection.tsx b/frontends/main/src/app-pages/HomePage/TestimonialsSection.tsx index 0ef069022e..5af415b155 100644 --- a/frontends/main/src/app-pages/HomePage/TestimonialsSection.tsx +++ b/frontends/main/src/app-pages/HomePage/TestimonialsSection.tsx @@ -15,8 +15,9 @@ import type { Attestation } from "api/v0" import { RiArrowRightLine, RiArrowLeftLine } from "@remixicon/react" import Slider from "react-slick" import AttestantBlock from "@/page-components/TestimonialDisplay/AttestantBlock" +import Image from "next/image" + -const MARKETING_IMAGE_IDX = _.shuffle([1, 2, 3, 4, 5, 6]) const HeaderContainer = styled(Container)(({ theme }) => ({ display: "flex", @@ -226,10 +227,12 @@ const SlickCarousel = () => { const { data } = useTestimonialList({ position: 1 }) const [slick, setSlick] = React.useState(null) const [shuffled, setShuffled] = useState(); + const [imageSequence, setImageSequence] = useState(); useEffect(() => { if (!data) return setShuffled(_.shuffle(data?.results)) + setImageSequence(_.shuffle([1, 2, 3, 4, 5, 6])) }, [data]) if (!data?.results?.length || !shuffled?.length) { @@ -268,9 +271,11 @@ const SlickCarousel = () => { className="testimonial-card" > - From ddd07d7655d43c1f91c885d7d005bdeba81849c4 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Tue, 24 Sep 2024 21:47:29 +0200 Subject: [PATCH 3/6] Select random image once per render --- .../page-components/HeroSearch/HeroSearch.tsx | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx index efecdf70a2..56b99822df 100644 --- a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx +++ b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx @@ -1,6 +1,6 @@ "use client" -import React, { useState, useCallback } from "react" +import React, { useState, useCallback, useEffect } from "react" import { useRouter } from "next/navigation" import { Typography, @@ -27,7 +27,6 @@ import { RiTimeLine, RiVerifiedBadgeLine, } from "@remixicon/react" -import _ from "lodash" import { NON_DEGREE_LEARNING_FRAGMENT_IDENTIFIER } from "@/app-pages/AboutPage/AboutPage" import Image from "next/image" @@ -192,16 +191,24 @@ const BoldLink = styled(Link)(({ theme }) => ({ ...theme.typography.subtitle1, })) -const getRandomHeroImage = () => { - const imageNumber = _.shuffle([1, 2, 3, 4, 5])[0] - return `/images/hero/hero-${imageNumber}.png` -} - const HeroImage: React.FC = () => { - const [heroImage, _] = useState(getRandomHeroImage) + const [imageIndex, setImageIndex] = useState() + + useEffect(() => { + /* We need to set the random image index once in useEffece to prevent + * hydration mismatch between client and server + */ + const index = Math.floor(Math.random() * 5) + 1; + setImageIndex(index) + }, []) + + if (!imageIndex) { + return + } + return ( - + ) } From 823d804cd943a1320878b18d7217b11a0f763bdc Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Tue, 24 Sep 2024 21:47:53 +0200 Subject: [PATCH 4/6] Missing background --- .../open-bg-texture-with-gradient.svg | 20 +++++++++++++++++++ .../HomePage/BrowseTopicsSection.tsx | 2 +- 2 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 frontends/main/public/images/backgrounds/open-bg-texture-with-gradient.svg diff --git a/frontends/main/public/images/backgrounds/open-bg-texture-with-gradient.svg b/frontends/main/public/images/backgrounds/open-bg-texture-with-gradient.svg new file mode 100644 index 0000000000..f17f0d9076 --- /dev/null +++ b/frontends/main/public/images/backgrounds/open-bg-texture-with-gradient.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx b/frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx index d26046b909..245c905101 100644 --- a/frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx +++ b/frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx @@ -13,7 +13,7 @@ import { RiArrowRightLine } from "@remixicon/react" import RootTopicIcon from "@/components/RootTopicIcon/RootTopicIcon" const Section = styled.section` - background: #fff url("/static/images/open-bg-texture-with-gradient.svg") + background: #fff url("/images/backgrounds/open-bg-texture-with-gradient.svg") no-repeat center left; background-size: 135% auto; padding: 80px 0; From ba16208e35e64907cac49caa3f0058aef58b15b1 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Tue, 24 Sep 2024 21:50:01 +0200 Subject: [PATCH 5/6] Fixes images warnings --- frontends/main/src/page-components/HeroSearch/HeroSearch.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx index 56b99822df..f1668038e1 100644 --- a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx +++ b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx @@ -110,6 +110,7 @@ const ImageContainer = styled.div(({ theme }) => ({ img: { width: "100%", }, + position: "relative" })) const ControlsContainer = styled.div(({ theme }) => ({ @@ -208,7 +209,7 @@ const HeroImage: React.FC = () => { return ( - + ) } From ef7fc1805dd1e1753045249bd73161ae58893d9e Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Tue, 24 Sep 2024 22:33:44 +0200 Subject: [PATCH 6/6] Prettier fixes --- .../src/app-pages/HomePage/TestimonialsSection.tsx | 6 ++---- .../src/page-components/HeroSearch/HeroSearch.tsx | 12 +++++++++--- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/frontends/main/src/app-pages/HomePage/TestimonialsSection.tsx b/frontends/main/src/app-pages/HomePage/TestimonialsSection.tsx index 5af415b155..db009a3beb 100644 --- a/frontends/main/src/app-pages/HomePage/TestimonialsSection.tsx +++ b/frontends/main/src/app-pages/HomePage/TestimonialsSection.tsx @@ -17,8 +17,6 @@ import Slider from "react-slick" import AttestantBlock from "@/page-components/TestimonialDisplay/AttestantBlock" import Image from "next/image" - - const HeaderContainer = styled(Container)(({ theme }) => ({ display: "flex", flexDirection: "column", @@ -226,8 +224,8 @@ const TestimonialTruncateText = styled(TruncateText)({ const SlickCarousel = () => { const { data } = useTestimonialList({ position: 1 }) const [slick, setSlick] = React.useState(null) - const [shuffled, setShuffled] = useState(); - const [imageSequence, setImageSequence] = useState(); + const [shuffled, setShuffled] = useState() + const [imageSequence, setImageSequence] = useState() useEffect(() => { if (!data) return diff --git a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx index f1668038e1..bf68532232 100644 --- a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx +++ b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx @@ -110,7 +110,7 @@ const ImageContainer = styled.div(({ theme }) => ({ img: { width: "100%", }, - position: "relative" + position: "relative", })) const ControlsContainer = styled.div(({ theme }) => ({ @@ -199,7 +199,7 @@ const HeroImage: React.FC = () => { /* We need to set the random image index once in useEffece to prevent * hydration mismatch between client and server */ - const index = Math.floor(Math.random() * 5) + 1; + const index = Math.floor(Math.random() * 5) + 1 setImageIndex(index) }, []) @@ -209,7 +209,13 @@ const HeroImage: React.FC = () => { return ( - + ) }