Migrate to TypeScript (#68)

* wip

* constants folder

* migrated everything except merch

* fix eslintrc typo

* migrate merch store

* fix eslint error + change merch to txt

* add ts type check

* trigger type check only on pr

* even better deploy.yml

* revert

* fix

* use different type checker

* migrate eslint configs from json to flat

* run lint + add react & react-hooks plugins + set all eslint errors to warnings

* ts strict mode true

* fix type errors

* Address PR Feedback To Include Generics

* apply PR feedback

stricter eslint + relative import + interface cleanup

* use reusable charityeventprops

.github/workflows/deploy.yml

@@ -17,8 +17,8 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 'lts/*'
-          cache: 'npm'
+          node-version: "lts/*"
+          cache: "npm"
 
       - name: Build
         run: |

.github/workflows/type-check.yml

@@ -0,0 +1,29 @@
+name: TypeScript Type Check
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  type-check:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@v1
+
+      - name: Use Node ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run type check
+        uses: gozala/[email protected]

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "prettier.prettierPath": "./node_modules/prettier/index.cjs",
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

README.md

@@ -26,11 +26,13 @@ The first version of the website was written by the 2020 Co-op Soc IT director,
 Vincent Chen.
 
 The React rewrite of the website was done by the 2021 IT subcom:
+
 - Noa Challis
 - Hanyuan Li
 - Rohan Agarwal
 
 This was then ported over to Next.js and improved on by the 2022 IT subcom:
+
 - Hanyuan Li
 - Stephen Lincon
 - Meghna Sunil

articles/investing.mdx

@@ -4,4 +4,4 @@ image: "/img/pubs/stonks.jpeg"
 published: "2021-06-20"
 description: "Ever considered learning to invest? This article by Ethan Wong (BIS21) - a passionate young investor himself - outlines why you should, and how you can make a start on it today!"
 link: "https://ethwong.medium.com/why-most-young-people-should-start-investing-6ea64448ef6b"
----
+---

articles/placement.mdx

@@ -37,11 +37,12 @@ description: "Read about some of our past Exec's placement experiences!"
 
     One upside of working full-time is the structure it pushes into your life - 7am wakeups eventually began to feel normal rather than soul crushing. Having a significant chunk of your Monday to Friday committed to work leaves you with a much clearer indication of the time you have available for other things.
     I would say a balance is very achievable with timetabling skills and ascertaining what your priorities are, and therefore knowing what you would sacrifice.
-    
+
     ### What's the culture like at AMP?
 
     To be honest, I would never have expected the people I work with to be so relatable, supportive, and fun to get along with. I'm lucky to be placed in the youngest team at AMP, with co-workers who grew up in the same generation with the same memes and culture - but the real surprise comes from how easy it is to talk to almost everyone else, too. This actually becomes fairly important when it comes to seeking help from senior employees and managers, as I've never felt any hesitation speaking up to them or asking questions - it feels perfectly natural to laugh at some of their attempts to draw a cat on Skribbl.io too.
     Of course, there are a few people at work who I find to have personalities that are hard to agree with at times. The best advice I can give for this is to just expect it and take it as what it is.
+
   </BlogTabEntry>
   <BlogTabEntry image="/img/exec/2020/Emily.png">
     ## Emily Kasovska
@@ -59,41 +60,42 @@ description: "Read about some of our past Exec's placement experiences!"
     I was also fortunate enough to visit Amatil's Eastern Creek warehousing site and the Northmead manufacturing plant. This was particularly useful for my role in Supply Chain; being able to connect my work from head office to the real operational sites was an exciting and enriching experience.
 
     ### What's some advice you would give to students who have yet to begin their placements?
-    
+
     Take on the challenge! This is an extremely valuable opportunity - it isn't the stereotypical 'intern' role you see in movies so don't expect to be doing coffee runs. You will be given meaningful tasks that make a real difference in your organisation so really give it your all. In fact, go even further! If you see or hear about a project you're interested in, ask your manager if you can sit in on some meetings and get involved.
-    
-    Be curious - ask WHY not just what! 
+
+    Be curious - ask WHY not just what!
     I remember my first few weeks of induction going over tasks required in my role. Written process notes were usually handed over so what was most important to know was the WHY. Don't get too stuck in the mechanical steps of a process - if you understand why you're doing it and how it relates to other tasks/business units, you will gain far more knowledge and get much more out of it.
-    
+
     Learn from your mistakes! Mistakes are inevitable. I came into my placement having completed only 2 accounting courses, so I was by no means an expert in the field.  I was exposed to many new accounting concepts and the business had their own unique processes I had to learn. Remember that you're not expected to know everything. Don't be embarrassed to ask for clarification or feedback from your manager - get the most out of this work experience.
 
     ### What are some challenges you have encountered and how did you overcome them?
-    
-    
+
+
     The greatest challenge I've had to overcome is the general unfamiliarity of it all - it's my first time in an accounting role and in a corporation in general. Particularly during my first month, I had to deal with the fact that I didn't really know how to complete certain tasks. I overcame this by asking lots of questions to clarify expectations. I am extremely grateful that my manager, colleagues and the general culture of CCA is really open and everyone is willing to offer a helping hand.
-    
-    
+
+
     Recently with the COVID-19 circumstances however, I have been working from home with no manager or colleagues next to me when I have a quick question to ask. This has allowed me to become a bit more independent; trying to find a solution myself but knowing if ever needed, they are only one phone call away.
-  
+
     ### How are some ways you balance work, university and your social life?
-    
+
     There is a lot to juggle when you are on placement but it has taught me a key message; there are actually many hours of the day (if you plan well that is!)
     Don't procrastinate (switch that phone off when you study!) Tutorials and class time have become so much more valuable - be prepared for class, have questions ready to go and utilise your tutors and peers.
-    
-    
+
+
     There's always time for society involvement too! There are many events held outside of work hours that I attend. During my half day off work, I signed up to the Co-op Soc Social Sport Team - a great way to get some exercise while catching up with friends!
     Don't forget to allocate some time to your wellbeing too - a good night's sleep has never been more important. Be refreshed and ready for the day ahead, every day!
 
     ### In what ways have you seen yourself develop personally as well as technically?
-    
+
     My industry placement has been a key avenue for me to build my self-awareness. I have been able to identify not only what I do well, but most importantly what I could do better.
     My knowledge of accounting has stretched far more than the theoretical concepts we learn in class. By applying (and even learning new concepts along the way!), I'm becoming more confident in my accounting major.
-    
-    
+
+
     My time management skills have also improved - learning how to reprioritise, especially when an ad hoc task urgently arises, is a valuable skill to have. My ability to balance all my work, study and other responsibilities has been another great life skill I continue to develop.
     And how could I forget my Excel skills? I went into my internship with no Excel experience. 4 months in, I am now not only confident in my Excel knowledge, but have been asked to create my own workbooks from scratch; improving on our processes/systems and showing off all the cool tricks I've picked up along the way.
-    
+
     But of course there is always room for improvement and each day I develop more skills, both personally and professionally. I am ever so grateful for this opportunity - industry placement truly has been a rewarding and invaluable experience.
+
   </BlogTabEntry>
   <BlogTabEntry image="/img/exec/2020/Lelland.jpeg">
     ## Lelland Hui
@@ -106,29 +108,30 @@ description: "Read about some of our past Exec's placement experiences!"
 
     Hi, I'm Lelland, and I'm currently doing my placement at American Express. I was quite overwhelmed with how the workplace was unlike any environment I have previously experienced. That was to be expected, however I really struggled to adapt to it in my first week. I talk about my experience with this a bit later in the publication, however my best advice to get over this initial environment change is being proactive. This means you should be eager to meet new people by introducing yourself first rather than waiting.                            
 
-    Furthermore, you should be actively taking on work and getting involved with things like office sport or events as much as you can. I believe that being proactive in meeting people has a big change on whether you enjoy your placement or not.                            
+    Furthermore, you should be actively taking on work and getting involved with things like office sport or events as much as you can. I believe that being proactive in meeting people has a big change on whether you enjoy your placement or not.
 
     ### What are some challenges you have encountered and how did you overcome them?
-    
-    One thing I found really challenging because it was my first IT placement was trying to fit into the workplace. The first day I just felt like everyone was so much older than I was and I wouldn't be able to really fit in with the rest of the office. I talked to a few older co-ops and they advised me that it generally takes a bit of time to start feeling more comfortable in the office.                            
-    
-    However, I took it upon myself to get to know as many people as I could within the first few months and put myself out there. My first initiative was that every time I went to get tea and saw a person I didn't know, I would introduce myself. This was super scary but the more I did it the easier it became for me and it really helped me get out of my shell. After the first two months I eventually met at least one person from each team on a floor of 150 people and it helped me settle in.                            
+
+    One thing I found really challenging because it was my first IT placement was trying to fit into the workplace. The first day I just felt like everyone was so much older than I was and I wouldn't be able to really fit in with the rest of the office. I talked to a few older co-ops and they advised me that it generally takes a bit of time to start feeling more comfortable in the office.
+
+    However, I took it upon myself to get to know as many people as I could within the first few months and put myself out there. My first initiative was that every time I went to get tea and saw a person I didn't know, I would introduce myself. This was super scary but the more I did it the easier it became for me and it really helped me get out of my shell. After the first two months I eventually met at least one person from each team on a floor of 150 people and it helped me settle in.
 
     ### What's some advice you would give to students who have yet to begin their placements?
-    
+
     As mentioned above my best advice to get over the initial environment change is being proactive. This means you should be eager to meet new people by introducing yourself first rather than waiting.
-    
+
     Furthermore, you should be actively taking on work and getting involved with things like office sport or events as much as you can. I believe that being proactive in meeting people has a big change on whether you enjoy your placement or not.
-    
+
     ### Where would you like to go for your next placement?
-    
-    Since I am considering taking up Information systems as my second major, I would love to work at Salesforce. The skills I have learnt at AMEX so far have been more soft skills rather than technical due to the nature of my team. After hearing about the work culture at Salesforce and the amount of responsibility they place on interns, I believe it will be a great place to build upon my existing skillset and grow.                            
+
+    Since I am considering taking up Information systems as my second major, I would love to work at Salesforce. The skills I have learnt at AMEX so far have been more soft skills rather than technical due to the nature of my team. After hearing about the work culture at Salesforce and the amount of responsibility they place on interns, I believe it will be a great place to build upon my existing skillset and grow.
 
     ### What's the culture like at American Express?
-    
+
     Every time I tell someone at American Express that this is my first internship they always say that it is a great place to start, I believe that this is very true. I have found the culture at American Express to be one that is very friendly and socially orientated. That being said, I found that as a new person, you need to take the initiative and introduce yourself to people first.
-    
+
     However, I believe that is true in nearly any organisation I've been part of. AMEX also has a massive intern culture because they recruit about 15-20 interns at a time. Having an intern family to have lunches with and just vibe with has been super helpful within my time at AMEX.
+
   </BlogTabEntry>
   <BlogTabEntry image="/img/exec/2020/Stanley.jpeg">
     ## Stanley Chen
@@ -149,16 +152,17 @@ description: "Read about some of our past Exec's placement experiences!"
     The second complication was a personal one. Upon receiving the data, I was completely overwhelmed and struggled to comprehend the dozen excel tables that were presented to me. There was no shortcut to resolving this complication and I simply had to persevere and commit to trudging through all the data. The importance of getting hands on is undeniable, and in this case was the only way to move forward.
 
     ### What are some ways you balance work, university and your social life?
-    
+
     Limit your work to work hours. Whilst this may contrast your belief that working longer hours and spending more time on a project is beneficial to your corporate image, it is important to understand that unless you have a deadline to meet, the most efficient and time-conscious method is always preferred. Pay especially close attention to detail on your first go and always aim to complete a task in your first try. Undoubtedly this will not always work out in your favour, but the more accurate, precise and attentive you are when completing a task on your first attempt the faster you will complete all tasks.
-    
+
     Aside from work, you have 16 extra hours in a day. I try to limit sleep to 6 hours leaving me with 10 to do something I enjoy. I find that the absolute limit is 5 extra-curriculars (at least for me) and I always try to spend at least a few hours every day socialising with friends whether it be on the way to/from work or a night out with work/uni mates.
-    
+
     Keep fit. Whether you like it or not, your mental health directly corresponds to your physical health. Find time every day to walk around the city during work. Whilst you might not be physically working on your projects, it increases productivity and helps you stay focused for when you are. Keep up with your social sports and hobbies, after all you have that extra 10 hours every day to do something you enjoy.
-    
+
     ### What's the culture like at PWC?
-    
+
     The company culture at PwC is probably one of the best around. From consultants to partners, everyone is on a first name basis and the more effort you put into knowing everyone, the more you'll enjoy going into work every day. Finding out what people are passionate about is also a great way to connect.
     During my time I found out that a few people enjoyed playing Super Smash Brothers Ultimate in their spare time, so we all brought controllers and a switch to play during our lunch breaks. Get to know your neighbour and your neighbour's neighbour, because the more relationships you form the less stressed you will be.
+
   </BlogTabEntry>
 </BlogTab>

components/Loader.jsx → components/Loader.tsx

@@ -2,7 +2,13 @@ import React from "react";
 
 import styles from "styles/modules/Loader.module.scss";
 
-const Loader = ({ width, height, strokeColour }) => {
+interface LoaderProps {
+  width: number;
+  height: number;
+  strokeColour: string;
+}
+
+const Loader = ({ width, height, strokeColour }: LoaderProps) => {
   return (
     <svg
       width={width}

components/LoadingButton.jsx → components/LoadingButton.tsx

@@ -1,8 +1,20 @@
 import React from "react";
 
-import Loader from "components/Loader";
+import Loader from "./Loader";
 
-const LoadingButton = ({ text, onClick, isLoading, disabled }) => {
+interface LoadingButtonProps {
+  text: string;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
+  isLoading: boolean;
+  disabled?: boolean;
+}
+
+const LoadingButton = ({
+  text,
+  onClick,
+  isLoading,
+  disabled,
+}: LoadingButtonProps) => {
   return (
     <button
       className="w-100 btn btn-primary btn-lg"

components/Navigation.jsx → components/Navigation.tsx

@@ -40,9 +40,9 @@ import {
 import Logo from "public/img/brand/logo_white.png";
 import LogoSmall from "public/img/brand/logo_small.png";
 
-import NextNavbarBrand from "./link/NextNavbarBrand.jsx";
-import NextNavLink from "./link/NextNavLink.jsx";
-import NavIcon from "./navigation/NavIcon.jsx";
+import NextNavbarBrand from "./link/NextNavbarBrand";
+import NextNavLink from "./link/NextNavLink";
+import NavIcon from "./navigation/NavIcon";
 
 // Supports both internal and external links, but internal links/redirects are preferred
 const navLinks = [
@@ -58,15 +58,18 @@ const navLinks = [
 
 const Navigation = () => {
   const router = useRouter();
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState<boolean>(false);
 
   useEffect(() => {
-    let headroom = new Headroom(document.getElementById("navbar-main"));
-    // initialise
-    headroom.init();
+    const navbar = document.getElementById("navbar-main");
+    if (navbar) {
+      const headroom = new Headroom(navbar);
+      // initialise
+      headroom.init();
+    }
   });
 
-  const getNavLinkClass = (path) => {
+  const getNavLinkClass = (path: string) => {
     return router.pathname === path
       ? "active"
       : "navbar-hover navbar-nav-hover align-items-lg-center";