[FRONTEND] TS Migration

[hn275]

[FRONTEND] TS Migration

Quick note

• I've started putting some TS code in the frontend and a challenge I was facing is that we (I) haven't been enforcing a pattern as to how we structure the directories, so things are a bit chaotic in the components dir.

• Going forward, we should think of how this component is used before placing it.

  An example:

  • If it's only going to be used at a specific page, say index we would put that component in ./src/components/page_index, a classic example would be the GroupInfo component.
  • If it's being used everywhere in the app, we should be putting it in the ./src/components/common dir, an example would be the Container component.

  Visual:

  .
  ├── components
  │   ├── common
  │   │   ├── Container.tsx
  │   │   ├── index.ts
  │   │   ├── MuiIcon.tsx
  │   │   └── Spinner.tsx
  │   ├── page_availability
  │   │   ├── index.ts
  │   │   └── LeftContainerIcon.tsx
  │   ├── page_groupID
  │   │   ├── index.ts
  │   │   ├── Menu.tsx
  │   │   └── RightContainerIcon.tsx
  │   ├── page_index
  │   │   ├── DropdownMenu.tsx
  │   │   ├── GroupInfo.tsx
  │   │   ├── Icons.tsx
  │   │   ├── index.ts
  │   │   ├── LandingBanner.tsx
  │   │   ├── PrivateGroupInfo.tsx
  │   │   └── TimeSlots.tsx
  └── pages
     ├── auth
     │   └── [groupID].tsx
     ├── [groupID]
     │   ├── availability
     │   │   └── [weekOf].tsx
     │   ├── index.tsx
     │   └── settings.tsx
     ├── index.ts
     └── tools
         ├── findGroup.tsx
         └── recentGroups.tsx

• When you are refactoring, check in to your designated branch (or create one if I didn't), the branch name pattern is {name}/ts-migration, (ie: hal/ts-migration), hit that convert to issue button and self-asigned, so we don't overlap!

• When creating a PR, the base branch that you are merging in is not main, but base/ts-migration, once everything looks good, Ben and I will make sure it should be working as expected before merging into main, then build to prod!

To be refactored

Components

• [x] Availability
• [x] AvailabilityCalendar
• [x] #101
• [x] GroupBanner
• [x] GroupCalendar
• [x] GroupHome
• [x] IntroToolTip
• [x] Settings
• [x] Tools

Pages

• {groupID}
  • Availability
  • [x] {weekOf}
  • [x] index
  • [x] settings
• auth
  • [x] #102
• tools
  • [x] findGroup
  • [x] recentGroups
• [x] index