Add formatting, linting and CI

.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": ["next/core-web-vitals", "plugin:mdx/recommended"]
+  "extends": ["next/core-web-vitals", "plugin:mdx/recommended", "prettier"],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": "error"
+  }
 }

.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+name: Continuous Integration
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Build
+        run: yarn build
+
+      # - name: Test
+      #   run: yarn test

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
+}

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.formatOnSave": true
+}

components/Footer.jsx

@@ -19,33 +19,38 @@
 import React from "react";
 
 // reactstrap components
-import {
-  Container,
-  Row,
-  Col,
-} from "reactstrap";
+import { Container, Row, Col } from "reactstrap";
 
 const Footer = () => {
   return (
     <>
       <footer className="footer">
         <Container>
-            <br></br>
-            <Row className="justify-content-center text-center">
+          <br></br>
+          <Row className="justify-content-center text-center">
             <Col lg="8">
-            <div className="container">
-              <a className="footerLink" href="/Constitution.pdf">Constitution</a> | <a className="footerLink" href="/Grievance-Resolution-Policy-Procedure.pdf">Grievance Policy</a>
-            </div>
-            <div className="container">
+              <div className="container">
+                <a className="footerLink" href="/Constitution.pdf">
+                  Constitution
+                </a>{" "}
+                |{" "}
+                <a
+                  className="footerLink"
+                  href="/Grievance-Resolution-Policy-Procedure.pdf"
+                >
+                  Grievance Policy
+                </a>
+              </div>
+              <div className="container">
                 Copyright &copy; 2023 UNSW Co-op Society
-            </div>
-            <br></br>
-            </Col>              
+              </div>
+              <br></br>
+            </Col>
           </Row>
         </Container>
       </footer>
     </>
   );
-}
+};
 
 export default Footer;

components/Header.jsx

@@ -25,10 +25,7 @@ const Header = () => {
             x="0"
             y="0"
           >
-            <polygon
-              className="fill-white"
-              points="4000 0 4000 100 0 100"
-            />
+            <polygon className="fill-white" points="4000 0 4000 100 0 100" />
           </svg>
         </div>
       </section>

components/IndexHeader.jsx

@@ -27,17 +27,15 @@ const IndexHeader = () => {
                 <Typewriter
                   options={{ loop: false }}
                   onInit={(typewriter) => {
-                    typewriter.typeString('UNSW CO-OP SOCIETY')
-                      .start();
+                    typewriter.typeString("UNSW CO-OP SOCIETY").start();
                   }}
                 />
-                <p className="lead text-white" style={{ fontWeight: 'normal' }}>
+                <p className="lead text-white" style={{ fontWeight: "normal" }}>
                   A society for co-ops, by co-ops.
                 </p>
               </Col>
             </Row>
           </div>
-
         </Container>
         {/* SVG separator */}
         <div className="separator separator-bottom separator-skew">
@@ -49,10 +47,7 @@ const IndexHeader = () => {
             x="0"
             y="0"
           >
-            <polygon
-              className="fill-white"
-              points="4000 0 4000 100 0 100"
-            />
+            <polygon className="fill-white" points="4000 0 4000 100 0 100" />
           </svg>
         </div>
       </section>

components/Loader.jsx

@@ -10,13 +10,14 @@ const Loader = ({ width, height, strokeColour }) => {
       viewBox="0 0 13 14"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={styles['spinner']}>
+      className={styles["spinner"]}
+    >
       <path
         d="M4.38798 12.616C3.36313 12.2306 2.46328 11.5721 1.78592 10.7118C1.10856 9.85153 0.679515 8.82231 0.545268 7.73564C0.411022 6.64897 0.576691 5.54628 1.02433 4.54704C1.47197 3.54779 2.1845 2.69009 3.08475 2.06684C3.98499 1.4436 5.03862 1.07858 6.13148 1.01133C7.22435 0.944078 8.31478 1.17716 9.28464 1.68533C10.2545 2.19349 11.0668 2.95736 11.6336 3.89419C12.2004 4.83101 12.5 5.90507 12.5 7"
         stroke={strokeColour}
       />
     </svg>
-  )
-}
+  );
+};
 
-export default Loader;
+export default Loader;

components/LoadingButton.jsx

@@ -2,12 +2,20 @@ import React from "react";
 
 import Loader from "components/Loader";
 
-const LoadingButton = ({text, onClick, isLoading, disabled}) => {
+const LoadingButton = ({ text, onClick, isLoading, disabled }) => {
   return (
-    <button className="w-100 btn btn-primary btn-lg" onClick={onClick} disabled={disabled}>
-      { !isLoading ? text : <Loader width={13} height={14} strokeColour="white"/> }
+    <button
+      className="w-100 btn btn-primary btn-lg"
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {!isLoading ? (
+        text
+      ) : (
+        <Loader width={13} height={14} strokeColour="white" />
+      )}
     </button>
-  )
-}
+  );
+};
 
-export default LoadingButton;
+export default LoadingButton;

components/Navigation.jsx

@@ -35,7 +35,11 @@ import {
 } from "reactstrap";
 
 import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
-import { faFacebookSquare, faInstagram, faLinkedinIn } from "@fortawesome/free-brands-svg-icons";
+import {
+  faFacebookSquare,
+  faInstagram,
+  faLinkedinIn,
+} from "@fortawesome/free-brands-svg-icons";
 
 import Logo from "public/img/brand/logo_white.png";
 import LogoSmall from "public/img/brand/logo_small.png";
@@ -55,8 +59,10 @@ const Navigation = () => {
   });
 
   const getNavLinkClass = (path) => {
-    return router.pathname === path ? "active" : "navbar-hover navbar-nav-hover align-items-lg-center";
-  }
+    return router.pathname === path
+      ? "active"
+      : "navbar-hover navbar-nav-hover align-items-lg-center";
+  };
 
   return (
     <>
@@ -81,17 +87,14 @@ const Navigation = () => {
                   <Col className="collapse-brand" xs="6">
                     <Link href="/">
                       <a>
-                        <Image
-                          alt="..."
-                          src={LogoSmall}
-                        />
+                        <Image alt="..." src={LogoSmall} />
                       </a>
                     </Link>
                   </Col>
 
                   <Col className="collapse-close" xs="6">
                     {/* Needs two spans to make "X" shape */}
-                    <NavbarToggler onClick={() => setOpen(false)} >
+                    <NavbarToggler onClick={() => setOpen(false)}>
                       <span />
                       <span />
                     </NavbarToggler>
@@ -117,72 +120,66 @@ const Navigation = () => {
 
                 <NavItem>
                   <Link href="/events" passHref>
-                    <NextNavLink
-                      className={getNavLinkClass("/events")}
-                    >
+                    <NextNavLink className={getNavLinkClass("/events")}>
                       <span className="nav-link-inner--text">Events</span>
                     </NextNavLink>
                   </Link>
                 </NavItem>
 
                 <NavItem>
                   <Link href="/publications" passHref>
-                    <NextNavLink
-                      className={getNavLinkClass("/publications")}
-                    >
+                    <NextNavLink className={getNavLinkClass("/publications")}>
                       <span className="nav-link-inner--text">Publications</span>
                     </NextNavLink>
                   </Link>
                 </NavItem>
 
                 <NavItem>
                   <Link href="/charity" passHref>
-                    <NextNavLink
-                      className={getNavLinkClass("/charity")}
-                    >
+                    <NextNavLink className={getNavLinkClass("/charity")}>
                       <span className="nav-link-inner--text">Charity</span>
                     </NextNavLink>
                   </Link>
                 </NavItem>
-                
+
                 <NavItem>
                   <Link href="/calendar" passHref>
-                    <NextNavLink
-                      className={getNavLinkClass("/calendar")}
-                    >
+                    <NextNavLink className={getNavLinkClass("/calendar")}>
                       <span className="nav-link-inner--text">Calendar</span>
                     </NextNavLink>
                   </Link>
                 </NavItem>
-
               </Nav>
 
-
               <Nav className="align-items-lg-center ml-lg-auto" navbar>
                 <NavIcon
                   href="https://www.facebook.com/coopsoc.unsw/"
                   id="tooltip-facebook"
                   icon={faFacebookSquare}
                   collapseText="FACEBOOK"
-                  tooltip="Like us on Facebook" />
+                  tooltip="Like us on Facebook"
+                />
                 <NavIcon
                   href="mailto: [email protected]"
                   id="tooltip-email"
                   icon={faEnvelope}
                   collapseText="EMAIL"
-                  tooltip="Email us" />
+                  tooltip="Email us"
+                />
                 <NavIcon
                   href="https://www.instagram.com/coopsoc_unsw/"
                   id="tooltip-instagram"
                   icon={faInstagram}
                   collapseText="INSTAGRAM"
-                  tooltip="Follow us on Instagram" />
+                  tooltip="Follow us on Instagram"
+                />
                 <NavIcon
                   href="https://www.linkedin.com/company/unsw-co-op-society/"
                   id="tooltip-linkedin"
                   icon={faLinkedinIn}
                   collapseText="LINKEDIN"
-                  tooltip="Connect on LinkedIn" />
+                  tooltip="Connect on LinkedIn"
+                />
               </Nav>
             </Collapse>
           </Container>

components/YearSlider.jsx

@@ -10,7 +10,7 @@ const YearSlider = ({ start, end, onChange }) => {
   const updateSlider = (values, _) => {
     const year = parseInt(values[0]);
     onChange(year);
-  }
+  };
 
   useEffect(() => {
     const sliderNode = sliderRef.current;
@@ -21,8 +21,8 @@ const YearSlider = ({ start, end, onChange }) => {
       step: 1,
       range: { min: start, max: end },
       format: wNumb({
-        decimals: 0
-      })
+        decimals: 0,
+      }),
     }).on("update", updateSlider);
 
     return () => {
@@ -52,6 +52,6 @@ const YearSlider = ({ start, end, onChange }) => {
       </Container>
     </>
   );
-}
+};
 
 export default YearSlider;