YT-21: Migrate Search.js to TypeScript (#14)

src/App.js

@@ -5,6 +5,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Help from "./components/Help";
 import Results from "./components/Results";
 import Search from "./components/Search";
+import { SortOptions } from "./types";
 import { getPlaylist, sortPlaylist } from "./util/playlistUtil";
 
 ReactGA.initialize("G-LRVNS567ZT");
@@ -15,40 +16,7 @@ const App = () => {
   const [playlistID, setPlaylistID] = useState("");
   const [loading, setLoading] = useState(false);
   const [playlist, setPlaylist] = useState([]);
-  const sortOptions = [
-    {
-      value: "vd",
-      label: "Views Descending",
-    },
-    {
-      value: "va",
-      label: "Views Ascending",
-    },
-    {
-      value: "ld",
-      label: "Likes Descending",
-    },
-    {
-      value: "la",
-      label: "Likes Ascending",
-    },
-    {
-      value: "ud",
-      label: "Most Recent",
-    },
-    {
-      value: "ua",
-      label: "Earliest",
-    },
-    {
-      value: "dd",
-      label: "Longest",
-    },
-    {
-      value: "da",
-      label: "Shortest",
-    },
-  ];
+
   const updateSortOrder = (event) => {
     const value = event.target.value;
     // Google Analytics
@@ -96,7 +64,7 @@ const App = () => {
             element={
               <Box>
                 <Search
-                  sortOptions={sortOptions}
+                  sortOptions={Object.keys(SortOptions)}
                   order={order}
                   playlistID={playlistID}
                   updatePlaylistID={(event) => updatePlaylistID(event)}

src/components/Results.tsx

@@ -1,9 +1,9 @@
 import { Box } from "@mui/material";
 import * as React from "react";
-import { IVideoMetadata } from "../types";
+import { VideoMetadata } from "../types";
 import Video from "./Video";
 
-const Results = ({ videos }: { videos: { stats: IVideoMetadata }[] }) => (
+const Results = ({ videos }: { videos: VideoMetadata[] }) => (
   <Box
     display="flex"
     justifyContent="center"
@@ -13,7 +13,7 @@ const Results = ({ videos }: { videos: { stats: IVideoMetadata }[] }) => (
     pb="5vh"
   >
     {videos.map((video, index) => {
-      return <Video metadata={video.stats} key={index}></Video>;
+      return <Video metadata={video} key={index}></Video>;
     })}
   </Box>
 );

src/components/Search.js → src/components/Search.tsx

@@ -1,11 +1,19 @@
 import { InfoOutlined, Search as SearchIcon } from "@mui/icons-material";
 import { LoadingButton } from "@mui/lab";
 import { Box, Button, MenuItem, TextField } from "@mui/material";
-import PropTypes from "prop-types";
-import React from "react";
+import * as React from "react";
 import { Link } from "react-router-dom";
+import { SortOptions } from "../types";
 
-const Search = (props) => (
+const Search = (props: {
+  playlistID: string;
+  order: string;
+  loading: boolean;
+  updatePlaylistID: any;
+  updateSortOrder: any;
+  search: any;
+  sortOptions: SortOptions[];
+}) => (
   <Box display="flex" justifyContent="center" py="5vh" px="10vw">
     <Box display="flex" width="100%" alignItems="center" flexDirection="column">
       <form style={{ width: "100%" }}>
@@ -29,8 +37,8 @@ const Search = (props) => (
             onChange={props.updateSortOrder}
           >
             {props.sortOptions.map((option) => (
-              <MenuItem key={option.value} value={option.value}>
-                {option.label}
+              <MenuItem key={option} value={option.valueOf()}>
+                {SortOptions[option]}
               </MenuItem>
             ))}
           </TextField>
@@ -70,14 +78,4 @@ const Search = (props) => (
   </Box>
 );
 
-Search.propTypes = {
-  playlistID: PropTypes.string,
-  order: PropTypes.string,
-  loading: PropTypes.bool,
-  updatePlaylistID: PropTypes.func,
-  updateSortOrder: PropTypes.func,
-  search: PropTypes.func,
-  sortOptions: PropTypes.array,
-};
-
 export default Search;

src/components/Video.tsx

@@ -1,10 +1,10 @@
 import { Box, Link, useMediaQuery } from "@mui/material";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
-import { IVideoMetadata } from "../types";
+import { VideoMetadata } from "../types";
 import { convertISOtoString } from "../util/dateUtil";
 
-const Video = ({ metadata }: { metadata: IVideoMetadata }) => {
+const Video = ({ metadata }: { metadata: VideoMetadata }) => {
   const mobile = useMediaQuery("(max-width:1000px)");
   return (
     <Box

src/types.ts

@@ -1,7 +1,7 @@
 /**
  * Represents metadata of a video
  */
-export interface IVideoMetadata {
+export type VideoMetadata = {
   link: string;
   title: string;
   channel: string;
@@ -10,4 +10,15 @@ export interface IVideoMetadata {
   uploadDate: string;
   duration: number;
   thumbnail: string;
+};
+
+export enum SortOptions {
+  VIEWS_DESC = "Views Descending",
+  VIEWS_ASC = "Views Ascending",
+  LIKES_DESC = "Likes Descending",
+  LIKES_ASC = "Likes Ascending",
+  MOST_RECENT = "Most Recent",
+  LEAST_RECENT = "Least Recent",
+  LONGEST = "Longest",
+  SHORTEST = "Shortest",
 }