Integrate typeshare to reduce client-side toil

Cargo.toml

@@ -39,6 +39,7 @@ tower = { version = "0.4.13", features = ["tracing", "limit", "buffer"] }
 tower-http = { version = "0.5.0", features = ["cors", "fs", "trace"] }
 tower_governor = "0.2.0"
 tracing = "0.1.40"
+typeshare = "1.0.2"
 url = "2.4.0"
 walkdir = "2.3.3"
 

bin/forbid

@@ -9,5 +9,7 @@ which rg
  --ignore-case \
  --glob !bin/forbid \
  --glob !package-lock.json \
+ --glob !pnpm-lock.yaml \
  --glob !seed \
+ --glob !tools/*/poetry.lock \
  'dbg!|fixme|todo|xxx'

bin/typeshare

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+OUTPUT=./client/src/lib/model.ts
+
+typeshare -l typescript -o $OUTPUT .
+
+# Hack to get dates to work
+echo 'export interface DateTime {
+ $date: {
+ $numberLong: string;
+ };
+};' >> $OUTPUT

client/src/components/AddReviewForm.tsx

@@ -5,8 +5,8 @@ import { toast } from 'sonner';
 import { twMerge } from 'tailwind-merge';
 
 import { useDarkMode } from '../hooks/useDarkMode';
+import type { Course } from '../lib/model';
 import { repo } from '../lib/repo';
-import type { Course } from '../model/Course';
 import {
  ReviewForm,
  ReviewFormInitialValues,

client/src/components/Autocomplete.tsx

@@ -41,7 +41,7 @@ export const Autocomplete = <T extends string>({
  />
  <Combobox.Button className='absolute inset-y-0 flex w-full items-center'>
  <ChevronDown
- className='ml-auto mr-4 h-5 w-5 text-gray-400'
+ className='ml-auto mr-4 size-5 text-gray-400'
  aria-hidden='true'
  />
  </Combobox.Button>

client/src/components/CourseCard.tsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom';
 
+import type { Course } from '../lib/model';
 import { courseIdToUrlParam, spliceCourseCode } from '../lib/utils';
-import type { Course } from '../model/Course';
 import { CourseTerms } from './CourseTerms';
 import { Highlight } from './Highlight';
 

client/src/components/CourseGraph.tsx

@@ -4,13 +4,12 @@ import VisGraph, { Edge, GraphData, Node } from 'react-vis-graph-wrapper';
 import { v4 as uuidv4 } from 'uuid';
 
 import { useDarkMode } from '../hooks/useDarkMode';
+import { Course, ReqNode } from '../lib/model';
 import {
  courseIdToUrlParam,
  isValidCourseCode,
  spliceCourseCode,
 } from '../lib/utils';
-import type { Course } from '../model/Course';
-import type { ReqNode } from '../model/Requirements';
 
 type CourseGraphProps = {
  course: Course;
@@ -31,35 +30,39 @@ const makeGraph = (nodeGroup: NodeType, reqs?: ReqNode) => {
  const edges: Edge[] = [];
 
  const traverse = (node: ReqNode): string => {
- if (typeof node === 'string') {
+ if (node.type === 'Course') {
  const duplicates = nodes.filter((n) =>
- (n.id as string).startsWith(node)
+ (n.id as string).startsWith(node.content)
  ).length;
 
- const id = duplicates === 0 ? node : `${node}_${duplicates}`;
+ const id = duplicates === 0 ? node.content : `${node}_${duplicates}`;
 
  nodes.push({
  id,
- label: node,
+ label: node.content,
  color: groupColors[nodeGroup],
  });
 
  return id;
  }
 
- const codes = node.groups.map((group) => traverse(group)),
- id = codes.join(node.operator);
+ const codes = node.content.groups.map((group) => traverse(group)),
+ id = codes.join(node.content.operator);
 
  nodes.push({
  id,
- label: node.operator,
+ label: node.content.operator,
  size: 6,
  color: groupColors['operator'],
  shape: 'hexagon',
  });
 
  for (const code of codes)
- edges.push({ from: code, to: id, dashes: node.operator === 'OR' });
+ edges.push({
+ from: code,
+ to: id,
+ dashes: node.content.operator === 'OR',
+ });
 
  return id;
  };

client/src/components/CourseInfo.tsx

@@ -4,9 +4,8 @@ import { VscBell, VscBellSlash } from 'react-icons/vsc';
 import { toast } from 'sonner';
 
 import { useAuth } from '../hooks/useAuth';
+import type { Course, Review } from '../lib/model';
 import { repo } from '../lib/repo';
-import type { Course } from '../model/Course';
-import type { Review } from '../model/Review';
 import { CourseInfoStats } from './CourseInfoStats';
 import { CourseTerms } from './CourseTerms';
 

client/src/components/CourseInfoStats.tsx

@@ -5,8 +5,8 @@ import { LuFlame } from 'react-icons/lu';
 import { twMerge } from 'tailwind-merge';
 
 import { useMediaQuery } from '../hooks/useMediaQuery';
+import type { Review } from '../lib/model';
 import { round2Decimals } from '../lib/utils';
-import type { Review } from '../model/Review';
 import { BirdIcon } from './BirdIcon';
 import { Histogram } from './Histogram';
 

client/src/components/CourseRequirements.tsx

@@ -4,9 +4,8 @@ import { PiGraphFill } from 'react-icons/pi';
 import { Link } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
+import type { Course, Requirements } from '../lib/model';
 import { capitalize, punctuate } from '../lib/utils';
-import type { Course } from '../model/Course';
-import type { Requirements } from '../model/Requirements';
 import { CourseGraph } from './CourseGraph';
 
 type ReqsBlockProps = {
@@ -129,7 +128,7 @@ export const CourseRequirements = ({
  Restrictions
  </h2>
  <p className='text-gray-500 dark:text-gray-400'>
- {requirements.restrictions !== null
+ {requirements.restrictions
  ? capitalize(punctuate(requirements.restrictions))
  : 'This course has no restrictions.'}
  </p>

client/src/components/CourseReview.tsx

@@ -9,11 +9,10 @@ import { toast } from 'sonner';
 import { twMerge } from 'tailwind-merge';
 
 import { useAuth } from '../hooks/useAuth';
+import type { Interaction, Review } from '../lib/model';
+import { InteractionKind } from '../lib/model';
 import { repo } from '../lib/repo';
 import { courseIdToUrlParam, spliceCourseCode } from '../lib/utils';
-import type { InteractionKind } from '../model/Interaction';
-import type { Interaction } from '../model/Interaction';
-import type { Review } from '../model/Review';
 import { BirdIcon } from './BirdIcon';
 import { DeleteButton } from './DeleteButton';
 import { IconRating } from './IconRating';
@@ -134,15 +133,15 @@ const ReviewInteractions = ({
  user
  ? kind === 'like'
  ? removeInteraction()
- : addInteraction('like')
+ : addInteraction(InteractionKind.Like)
  : displayLoginPrompt();
  };
 
  const handleDislike = () => {
  user
  ? kind === 'dislike'
  ? removeInteraction()
- : addInteraction('dislike')
+ : addInteraction(InteractionKind.Dislike)
  : displayLoginPrompt();
  };
 

client/src/components/CourseSearchBar.tsx

@@ -3,8 +3,8 @@ import { Layers, User } from 'react-feather';
 import { Link, useNavigate } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
+import { SearchResults } from '../lib/model';
 import { courseIdToUrlParam, spliceCourseCode } from '../lib/utils';
-import type { SearchResults } from '../model/SearchResults';
 import { Highlight } from './Highlight';
 import { SearchBar } from './SearchBar';
 
@@ -92,7 +92,7 @@ const ExploreButton = () => {
 };
 
 type CourseSearchBarProps = {
- results: SearchResults;
+ results: SearchResults & { query: string };
  handleInputChange: (query: string) => void;
  onResultClick?: () => void;
 };

client/src/components/CourseTerms.tsx

@@ -4,12 +4,12 @@ import { GoX } from 'react-icons/go';
 import { Link } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
+import type { Course } from '../lib/model';
 import {
  filterCurrentInstructors,
  getCurrentTerms,
  uniqueTermInstructors,
 } from '../lib/utils';
-import type { Course } from '../model/Course';
 import { Highlight } from './Highlight';
 import { Tooltip } from './Tooltip';