refactoring api & i18n for include cms

next.config.mjs

@@ -9,7 +9,12 @@ const nextConfig = {
   reactStrictMode: true,
   i18n: { ...i18n },
   images: {
-    domains: ["res.cloudinary.com"],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'res.cloudinary.com',
+      },
+    ]
   },
 };
 

src/components/about-us/YoutubeEmbed.jsx

@@ -2,19 +2,25 @@ import React from "react";
 import PropTypes from "prop-types";
 import styles from "@/styles/pages/about/youtube.module.scss";
 
-const YoutubeEmbed = ({ embedId }) => (
-  <div className={styles.videoResponsive}>
-    <iframe
-      src={`https://www.youtube.com/embed/${embedId}`}
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-      allowFullScreen
-      title="Embedded youtube"
-    />
-  </div>
-);
+const YoutubeEmbed = ({ link }) => {
+  const embedId = link.includes("watch")
+    ? link.split("/").pop().split("=").pop()
+    : link.split("/").pop();
+
+  return (
+    <div className={styles.videoResponsive}>
+      <iframe
+        src={`https://www.youtube.com/embed/${embedId}`}
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+        title="Embedded youtube"
+      />
+    </div>
+  );
+};
 
 YoutubeEmbed.propTypes = {
-  embedId: PropTypes.string.isRequired,
+  link: PropTypes.string.isRequired,
 };
 
 export default YoutubeEmbed;

src/components/about-us/carousel.jsx

@@ -3,9 +3,7 @@ import { RxArrowLeft, RxArrowRight } from "react-icons/rx";
 import styles from "@/styles/pages/about/carousel.module.scss";
 import Image from "next/image";
 
-// data is passed in as an array of strings as of now
-// data = ['frame1', 'frame2', frame3', ...]
-export default function PracticeCarouselExample({ data }) {
+export default function Carousel({ data }) {
   const [activeIndex, setActiveIndex] = useState(0);
   const startXRef = useRef(0);
   const endXRef = useRef(0);
@@ -49,7 +47,7 @@ export default function PracticeCarouselExample({ data }) {
           >
             {data.map((frame, index) => (
               <div key={index} className={styles.frame}>
-                <Image src={frame} alt={`frame ${index}`} fill={true} />
+                <Image src={frame.src} alt={frame.alt} fill={true} />
               </div>
             ))}
           </div>
@@ -60,7 +58,7 @@ export default function PracticeCarouselExample({ data }) {
         <div></div>
       </div>
       <div className={styles.dots}>
-        {data.map((frame, index) => {
+        {data.map((_, index) => {
           return (
             <div
               key={index}

src/components/about-us/flippingCard.jsx

@@ -11,13 +11,7 @@ export default function FlippingCard({ title, content, image, alt, dims }) {
         <div className={styles.CardInner}>
           <div className={styles.CardFront}>
             <div className={styles.image_container}>
-              <Image
-                src={image}
-                alt={alt}
-                style={{ objectFit: "scale-down" }}
-                fill={true}
-                priority={true}
-              />
+              <Image src={image} alt={alt} objectFit="cover" fill={true} />
             </div>
           </div>
           <div className={styles.FlipBack}>

src/components/committees/committee.jsx

@@ -4,31 +4,30 @@ import styles from "@/styles/components/committees/committee.module.scss";
 import Image from "next/image";
 import Link from "next/link";
 
-export async function getStaticProps({ locale }) {
-  return {
-    props: {
-      messages: (await import(`@/messages/${locale}.json`)).default,
-    },
-  };
-}
+// export async function getStaticProps({ locale }) {
+//   return {
+//     props: {
+//       messages: (await import(`@/messages/${locale}.json`)).default,
+//     },
+//   };
+// }
 
-export default function CommitteeCard({ props }) {
-  const t = useTranslations(`Committees.cards.${props}`);
+export default function CommitteeCard({ name, locale }) {
+  const t = useTranslations("Committees");
   return (
-    <Link href={t("path")}>
+    <Link href={`/committees/${name}`}>
       <div className={styles.committee_card}>
         <div className={styles.image_container}>
           <Image
             className={styles.image}
-            src={t("image")}
-            alt={t("name")}
+            src={t(`${name}.committee_image.src`)}
+            alt={t(`${name}.committee_image.alt`)}
             style={{ objectFit: "fill" }}
             fill={true}
-            priority={true}
           />
           <div className={styles.gradient}></div>
         </div>
-        <h3>{t("name")}</h3>
+        <h3>{t(`${name}.committee_name_${locale}`)}</h3>
       </div>
     </Link>
   );

src/components/committees/committeeDesription.jsx

@@ -4,25 +4,24 @@ import React from "react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
 
-/* add and import styles */
-/* view and test it out by importing it to the respective page */
-export default function CommitteeDescription({ props }) {
-  const l = useTranslations("Committees");
-  const t = useTranslations(`Committees.cards.${props}`);
+export default function CommitteeDescription({ name, locale }) {
+  const t = useTranslations("Committees");
+  const g = useTranslations("General");
+
   return (
     <div className={styles.wrapper}>
       <div className={styles.buttonClass}>
         <Link href="/committees" className={styles.linkStyle}>
           <button className={styles.button}>
             <IoArrowBack className={styles.desktop_arrow} />
             <IoChevronBack className={styles.mobile_arrow} />
-            <p>{l("back_to_committees")}</p>
+            <p>{g(`back_to_committees_${locale}`)}</p>
           </button>
         </Link>
       </div>
       <div className={styles.content}>
-        <h1>{t("name")}</h1>
-        <h2>{t("description")}</h2>
+        <h1>{t(`${name}.committee_name_${locale}`)}</h1>
+        <h2>{t(`${name}.committee_description_${locale}`)}</h2>
       </div>
     </div>
   );

src/components/footer/footer.jsx

@@ -16,16 +16,16 @@ const pages = [
   { page: "get_involved", route: "/get-involved" },
 ];
 
-export default function Footer() {
-  const t = useTranslations("Header");
+export default function Footer({ locale }) {
+  const t = useTranslations("General");
 
   // Function creates a page link list element from the parameters
   function createPageLink(page, route, index) {
     return (
       <li key={index}>
         {" "}
         <Link className={styles.link} href={route}>
-          {t(page)}
+          {t(`${page}_${locale}`)}
         </Link>{" "}
       </li>
     );
@@ -43,7 +43,7 @@ export default function Footer() {
 
         {/* contacts */}
         <div className={styles.contact}>
-          <p className={styles.contact_us}>{t("contact_us")}</p>
+          <p className={styles.contact_us}>{t(`contact_us_${locale}`)}</p>
           <div className={styles.icons}>
             <a
               href="https://www.facebook.com/paulhomasianclinicatucdavis"
@@ -73,12 +73,12 @@ export default function Footer() {
               <MdOutlineMailOutline />
             </a>
           </div>
-          <p className={styles.address}>{t("address")}</p>
+          <p className={styles.address}>{t(`address_${locale}`)}</p>
         </div>
 
         {/* thank you message */}
         <div className={styles.sponsor}>
-          <p>{t("thank_you_sponsors_text")}</p>
+          <p>{t(`thank_you_sponsors_text_${locale}`)}</p>
           <div className={styles.sponsor_image}>
             <Image
               src="/images/footer/credit-union.png"
@@ -91,7 +91,9 @@ export default function Footer() {
         </div>
       </div>
       {/* Subfooter: Include developer message */}
-      <div className={styles.subfooter}>{t("include_credit_line")}</div>
+      <div className={styles.subfooter}>
+        Designed & Developed with 🤍 by #include @ Davis
+      </div>
     </footer>
   );
 }

src/components/get-involved/card.jsx

@@ -2,12 +2,10 @@
 /* view and test it out by importing it to the respective page */
 import { useTranslations } from "next-intl";
 import { useState } from "react";
-import Link from "next/link";
 import styles from "@/styles/components/get-involved/cards.module.scss";
 import PopupCard from "./popupCard";
 
-export default function Card({ cardProps }) {
-  const { card, imgSrc } = cardProps;
+export default function Card({ cardNum, cardImg, locale }) {
   const t = useTranslations("GetInvolved");
   const [popup, setPopup] = useState(false);
 
@@ -20,22 +18,28 @@ export default function Card({ cardProps }) {
       <div className={styles.card}>
         <div
           className={styles.cardImg}
-          style={{ backgroundImage: `url(${imgSrc})` }}
+          style={{ backgroundImage: `url(${cardImg.src})` }}
         >
-          <p className={styles.cardText}>{t(`${card}.title_short`)}</p>
+          <p className={styles.cardText}>
+            {t(`card_${cardNum}_title_${locale}`)}
+          </p>
         </div>
         <button className={styles.detailsButton} onClick={togglePopup}>
-          {t("details_text")}
+          {t(`details_text_${locale}`)}
         </button>
-        <Link
-          href={t(`${card}.sign_up_link`)}
+        <a
+          href={t(`card_${cardNum}_signup_link`)}
           target="_blank"
           className={styles.links}
         >
-          <button className={styles.signUpButton}>{t("sign_up_text")}</button>
-        </Link>
+          <button className={styles.signUpButton}>
+            {t(`sign_up_text_${locale}`)}
+          </button>
+        </a>
       </div>
-      {popup && <PopupCard card={card} onClose={togglePopup} />}
+      {popup && (
+        <PopupCard card={cardNum} onClose={togglePopup} locale={locale} />
+      )}
     </div>
   );
 }

src/components/get-involved/popupCard.jsx

@@ -4,8 +4,20 @@ import { IoIosCloseCircleOutline } from "react-icons/io";
 import styles from "@/styles/components/get-involved/popupCard.module.scss";
 import { useTranslations } from "next-intl";
 
-export default function PopupCard({ card, onClose }) {
-  const t = useTranslations(`GetInvolved.${card}`);
+function splitContent(text) {
+  let splitIndex = text.lastIndexOf(" ", Math.floor(text.length / 2));
+  if (splitIndex === -1) {
+    splitIndex = Math.floor(text.length / 2);
+  }
+
+  const part1 = text.slice(0, splitIndex).trim();
+  const part2 = text.slice(splitIndex).trim();
+
+  return [part1, part2];
+}
+
+export default function PopupCard({ card, onClose, locale }) {
+  const t = useTranslations("GetInvolved");
 
   const [showFullContent, setShowFullContent] = useState(true);
   const toggleContent = () => {
@@ -15,34 +27,39 @@ export default function PopupCard({ card, onClose }) {
   return (
     <div className={styles.container}>
       <button className={styles.button} onClick={onClose}>
-        Close
+        {t(`close_text_${locale}`)}
         <IoIosCloseCircleOutline className={styles.button_svg} />
       </button>
       <div className={styles.layout}>
-        <h1>{t("title_long")}</h1>
+        <h1>{t(`card_${card}_title_${locale}`)}</h1>
         {showFullContent ? (
           <div>
-            <p
-              className={styles.content}
-            >{`${t("content_1")} ${t("content_2")}`}</p>
-            <p className={styles.contentMobile}>{t("content_1")}</p>
+            <p className={styles.content}>
+              {t(`card_${card}_details_${locale}`)}
+            </p>
+            <p className={styles.contentMobile}>
+              {splitContent(t(`card_${card}_details_${locale}`))[0]}
+            </p>
           </div>
         ) : (
-          <p className={styles.contentMobile}>{t("content_2")}</p>
+          <p className={styles.contentMobile}>
+            {splitContent(t(`card_${card}_details_${locale}`))[1]}
+          </p>
         )}
 
         {/* Button with styling */}
         <button className={styles.paginationButton} onClick={toggleContent}>
           {showFullContent ? (
             <>
-              {" "}
-              1/2 <MdKeyboardArrowRight />
+              <MdKeyboardArrowLeft className={styles.invisible_icon} />
+              1/2
+              <MdKeyboardArrowRight />
             </>
           ) : (
             <>
-              {" "}
               <MdKeyboardArrowLeft />
-              2/2{" "}
+              2/2
+              <MdKeyboardArrowRight className={styles.invisible_icon} />
             </>
           )}
         </button>

src/components/header/header.jsx

@@ -7,8 +7,8 @@ import { RxCross1 } from "react-icons/rx";
 import { IoMenuOutline } from "react-icons/io5";
 import LangDropDown from "../dropDown/dropDown";
 
-export default function Header() {
-  const t = useTranslations("Header");
+export default function Header({ locale }) {
+  const t = useTranslations("General");
   // use state for links
   const [activeLinks, setActiveLinks] = useState([
     false,
@@ -49,13 +49,11 @@ export default function Header() {
             width={110}
             height={110}
             alt="Paul Hom logo"
-            priority={true}
-            href="/"
           />
         </Link>
         <div className={styles.title_text}>
-          <h1>{t("clinic_name")}</h1>
-          <h2>{t("clinic_description")}</h2>
+          <h1>{t(`clinic_name_${locale}`)}</h1>
+          <h2>{t(`clinic_description_${locale}`)}</h2>
         </div>
 
         <div className={styles.language_dropdown}>
@@ -71,7 +69,9 @@ export default function Header() {
           >
             <div className={styles.link_wrapper}>
               <Link href={`${link.href}`} onClick={() => toggleAll(index)}>
-                <p className={styles.link_text}>{t(link.text)}</p>
+                <p className={styles.link_text}>
+                  {t(`${link.text}_${locale}`)}
+                </p>
               </Link>
             </div>
           </li>