Merge pull request #110 from ssss-sfu/brian/migrate-to-typescript

Migrate to typescript

components/Accordion.jsx → components/Accordion.tsx

@@ -1,34 +1,57 @@
 import { useRef } from "react";
 
-export const Accordion = ({ data }) => {
-  const previouslyOpenedPanelIndex = useRef();
-  const panelsRef = useRef();
-  function getIdPanelMap() {
+interface AccordionProps {
+  data: { name: string; content: string[] }[];
+}
+
+export const Accordion: React.FC<AccordionProps> = ({ data }) => {
+  const previouslyOpenedPanelIndex = useRef<number>(-1);
+  const panelsRef = useRef<Map<number, HTMLUListElement>>();
+
+  function getIdPanelMap(): Map<number, HTMLUListElement> {
     if (panelsRef.current) {
       return panelsRef.current;
     }
     panelsRef.current = new Map();
     return panelsRef.current;
   }
-  function toggleAccordian(indexClicked) {
+
+  function toggleAccordian(indexClicked: number): void {
     const idPanelMap = getIdPanelMap();
     const previouslyOpenedNode = idPanelMap.get(
       previouslyOpenedPanelIndex.current
     );
     const selectedNode = idPanelMap.get(indexClicked);
-    if (selectedNode.dataset.hasOwnProperty("opened")) {
+
+    if (selectedNode === undefined) {
+      return;
+    }
+
+    if (selectedNode?.dataset.hasOwnProperty("opened")) {
       closePanel(selectedNode);
     } else {
       openPanel(selectedNode);
       if (
         previouslyOpenedPanelIndex.current !== indexClicked &&
-        previouslyOpenedPanelIndex.current !== undefined
+        previouslyOpenedPanelIndex.current !== undefined &&
+        previouslyOpenedNode !== undefined
       ) {
         closePanel(previouslyOpenedNode);
       }
     }
     previouslyOpenedPanelIndex.current = indexClicked;
   }
+
+  function openPanel(node: HTMLUListElement): void {
+    node.style.maxHeight = `${node.scrollHeight}px`;
+    node.setAttribute("data-opened", "");
+  }
+
+  function closePanel(node: HTMLUListElement): void {
+    node.style.maxHeight = "0";
+    node.removeAttribute("data-opened");
+  }
+
   return (
     <ul className="accordion">
       {data.map(({ name, content }, i) => (
@@ -55,12 +78,4 @@ export const Accordion = ({ data }) => {
   );
 };
 
-function openPanel(node) {
-  node.style.maxHeight = `${node.scrollHeight}px`;
-  node.setAttribute("data-opened", "");
-}
-
-function closePanel(node) {
-  node.style.maxHeight = "0";
-  node.removeAttribute("data-opened");
-}
+export default Accordion;

components/Button.tsx

@@ -0,0 +1,10 @@
+interface ButtonProps {
+  label: string;
+  type?: string;
+}
+
+export const Button: React.FC<ButtonProps> = ({ label, type = "primary" }) => {
+  return <button className={`btn ${type}`}>{label}</button>;
+};
+
+export default Button;

components/Dropdown.jsx → components/Dropdown.tsx

@@ -1,6 +1,12 @@
 import ChevronDownIcon from "@icons/chevron-down.svg";
 
-export const Dropdown = ({ id, title, content }) => {
+interface DropdownProps {
+  id: string;
+  title: string;
+  content: string;
+}
+
+export const Dropdown: React.FC<DropdownProps> = ({ id, title, content }) => {
   return (
     <div className="faq-item" id={`faq-item-${id}`} key={id}>
       <input type="checkbox" id={`faq-${id}`} />

components/EventsCalendar.jsx → components/EventsCalendar.tsx

@@ -17,16 +17,16 @@ const localizer = dateFnsLocalizer({
   locales,
 });
 
-export const EventsCalendar = () => {
-  const calendarURL =
+export const EventsCalendar: React.FC = () => {
+  const calendarURL: string =
     "https://clients6.google.com/calendar/v3/calendars/[email protected]/events?calendarId=j7qfcngd9crbhelib6tgdihi3k%40group.calendar.google.com&singleEvents=true&timeZone=America%2FVancouver&maxAttendees=1&maxResults=250&sanitizeHtml=true&timeMin=2023-03-26T00%3A00%3A00-07%3A00&timeMax=2024-05-07T00%3A00%3A00-07%3A00&key=AIzaSyBNlYH01_9Hc5S1J9vuFmu2nUqBZJNAXxs";
-  const [events, setEvents] = useState([]);
+  const [events, setEvents] = useState<any[]>([]);
 
   useEffect(() => {
     fetch(calendarURL)
       .then((response) => response.json())
       .then((data) => {
-        const updatedEvents = [];
+        const updatedEvents: any[] = [];
         for (const event of data.items) {
           updatedEvents.push({
             title: event.summary,

components/Footer.jsx → components/Footer.tsx

@@ -9,7 +9,7 @@ import GithubIcon from "@icons/github.svg";
 import OfficeBuildingIcon from "@icons/office-building.svg";
 import ContactUsIcon from "@icons/contact-us.svg";
 
-export const Footer = () => {
+export const Footer: React.FC = () => {
   return (
     <div className="footer">
       <div className="container">

components/HeaderNav.jsx → components/HeaderNav.tsx

@@ -6,7 +6,7 @@ import DiscordIcon from "@icons/discord.svg";
 import GithubIcon from "@icons/github.svg";
 import Link from "next/link";
 
-export const HeaderNav = () => {
+export const HeaderNav: React.FC = () => {
   return (
     <div className="header-nav">
       <div className="container">
@@ -83,3 +83,5 @@ export const HeaderNav = () => {
     </div>
   );
 };
+
+export default HeaderNav;

components/Helmet.jsx → components/Helmet.tsx

@@ -1,15 +1,19 @@
 import Head from "next/head";
 
-export const Helmet = ({ pageTitle = "" }) => {
+interface HelmetProps {
+  pageTitle?: string;
+}
+
+export const Helmet: React.FC<HelmetProps> = ({ pageTitle = "" }) => {
   pageTitle = pageTitle.replace("/", "");
   pageTitle = pageTitle.replace("-", " ");
   pageTitle = capitalizeWords(pageTitle);
 
-  const defaultTitle = "Software Systems Student Society";
-  const title = `${pageTitle} | SSSS`;
-  const hasPageTitle = pageTitle.trim() !== "";
+  const defaultTitle: string = "Software Systems Student Society";
+  const title: string = `${pageTitle} | SSSS`;
+  const hasPageTitle: boolean = pageTitle.trim() !== "";
 
-  function capitalizeWords(item) {
+  function capitalizeWords(item: string): string {
     return item
       .split(" ")
       .map(function (word) {
@@ -25,3 +29,5 @@ export const Helmet = ({ pageTitle = "" }) => {
     </Head>
   );
 };
+
+export default Helmet;

components/Hero.jsx → components/Hero.tsx

@@ -1,4 +1,14 @@
-export const Hero = ({ subtitle, title, backgroundImage }) => {
+interface HeroProps {
+  subtitle: string;
+  title: string;
+  backgroundImage: string;
+}
+
+export const Hero: React.FC<HeroProps> = ({
+  subtitle,
+  title,
+  backgroundImage,
+}) => {
   return (
     <header
       className="container hero"
@@ -16,3 +26,5 @@ export const Hero = ({ subtitle, title, backgroundImage }) => {
     </header>
   );
 };
+
+export default Hero;

components/Logo.jsx → components/Logo.tsx

@@ -1,4 +1,4 @@
-export const Logo = () => (
+export const Logo: React.FC = () => (
   <svg
     width="188"
     height="36"

components/Card.jsx → components/PostCard.tsx

@@ -1,21 +1,33 @@
 import Image from "next/image";
-
-import { urlForImage } from "../pages/api/sanity.image";
+import { urlForImage } from "@lib/sanity.image";
 import { formatDate } from "utils/index";
 import clock from "@images/blog-page/clock.svg";
 import Link from "next/link";
+import { type Post } from "@lib/sanity.queries";
+
+interface PostCardProps {
+  post: Post;
+}
 
-export default function Card({ post }) {
+export const PostCard: React.FC<PostCardProps> = ({ post }) => {
   return (
     <div className="post">
       <Link as={`/blog/${post.slug.current}`} href="/blog/[slug]">
         <article className="post">
           <div className="thumbnail">
-            <Image
-              src={urlForImage(post.mainImage).width(500).height(300).url()}
-              alt="thumbnail"
-              layout="fill"
-            />
+            {post.mainImage ? (
+              <Image
+                src={urlForImage(post!.mainImage)!
+                  .width(500)!
+                  .height(300)!
+                  .url()}
+                alt="thumbnail"
+                layout="fill"
+              />
+            ) : (
+              <div className="post__cover--none" />
+            )}
+
             <div className="overlay"></div>
           </div>
           <div className="text">
@@ -30,4 +42,4 @@ export default function Card({ post }) {
       </Link>
     </div>
   );
-}
+};