[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

• Availability
• AvailabilityCalendar
• #101
• GroupBanner
• GroupCalendar
• GroupHome
• IntroToolTip
• Settings
• Tools

Pages

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