Constant for the querystring key for selected movie ID

I'd like to use enums here.  I think an enum like
```
enum QuerystringKeys {
  SelectedMovieId = 'selected',
  ...
}
```
provides much better editor hinting for the developer.  Adding them to `includes` in tsconfig means they don't need to be imported to be used as a variable
```
useQuerystring(QuerystringKeys.SelectedMovieId);
```
but I ran into this issue evanw/esbuild#3359

src/components/App/App.tsx

@@ -5,10 +5,13 @@ import { Button, Stack, Typography } from '@mui/material';
 import { ReloadButton } from '@/src/components/ReloadButton/ReloadButton';
 import { PageTitle } from '@/src/components/PageTitle/PageTitle';
 import { useToggleQuerystringValue } from '@/src/hooks/useToggleQuerystringValue';
+import { SELECTED_MOVIE_ID_QUERYSTRING_KEY } from '@/src/constants/constants';
 
 export const App = () => {
   const { isError, isFetching, refetch } = useMovies();
-  const { value: selectedMovieId } = useToggleQuerystringValue('selected');
+  const { value: selectedMovieId } = useToggleQuerystringValue(
+    SELECTED_MOVIE_ID_QUERYSTRING_KEY
+  );
 
   if (isError) {
     /**

src/components/Movie/Movie.tsx

@@ -11,6 +11,7 @@ import {
 import { useToggleQuerystringValue } from '@/src/hooks/useToggleQuerystringValue';
 import { useMdAndUpBreakpoint } from '@/src/hooks/useMdAndUpBreakpoint';
 import { Link } from 'react-router-dom';
+import { SELECTED_MOVIE_ID_QUERYSTRING_KEY } from '@/src/constants/constants';
 
 export const MovieLoading = () => (
   <TableRow>
@@ -29,7 +30,7 @@ export const MovieNotFound = () => (
 export const Movie = ({ id }: { id: MovieEntity['id'] }) => {
   const { movie, isLoading } = useMovie(id);
   const { value: selected, nextQuerystring: nextSelectedQuery } =
-    useToggleQuerystringValue('selected');
+    useToggleQuerystringValue(SELECTED_MOVIE_ID_QUERYSTRING_KEY);
 
   const isMdAndUp = useMdAndUpBreakpoint();
 

src/components/MovieReviewForm/MovieReviewForm.tsx

@@ -14,6 +14,7 @@ import { useTemporaryMessage } from '@/src/hooks/useTemporaryMessage';
 import { PropsWithChildren, useCallback } from 'react';
 import { useToggleQuerystringValue } from '@/src/hooks/useToggleQuerystringValue';
 import { useMdAndUpBreakpoint } from '@/src/hooks/useMdAndUpBreakpoint';
+import { SELECTED_MOVIE_ID_QUERYSTRING_KEY } from '@/src/constants/constants';
 
 type FormValues = {
   review: string;
@@ -23,19 +24,15 @@ export const MovieReviewForm = () => {
   const movie = useSelectedMovie();
 
   const { setQuerystring: setSelected, value: selected } =
-    useToggleQuerystringValue('selected');
+    useToggleQuerystringValue(SELECTED_MOVIE_ID_QUERYSTRING_KEY);
 
   const [postMovieReview, { isLoading }] = usePostMovieReviewMutation();
 
-  const {
-    temporaryMessage: temporarySuccessMessage,
-    setTemporaryMessage: setTemporarySuccessMessage,
-  } = useTemporaryMessage();
+  const { message: successMessage, setMessage: setSuccessMessage } =
+    useTemporaryMessage();
 
-  const {
-    temporaryMessage: temporaryErrorMessage,
-    setTemporaryMessage: setTemporaryErrorMessage,
-  } = useTemporaryMessage();
+  const { message: errorMessage, setMessage: setErrorMessage } =
+    useTemporaryMessage();
 
   const {
     register,
@@ -50,13 +47,13 @@ export const MovieReviewForm = () => {
   const onSubmit: SubmitHandler<FormValues> = useCallback(async (data) => {
     try {
       const { message } = await postMovieReview(data).unwrap();
-      setTemporarySuccessMessage(message);
+      setSuccessMessage(message);
       reset();
     } catch (e) {
       // Given an error response shape, we can map the field's keys, calling `setError`
       // from react-hook-form to programatically set each field's isInvalid state and
       // set it's error message.  But for now...
-      setTemporaryErrorMessage('Something went wrong');
+      setErrorMessage('Something went wrong');
     }
   }, []);
 
@@ -96,19 +93,19 @@ export const MovieReviewForm = () => {
 
         <form onSubmit={handleSubmit(onSubmit)}>
           <Stack spacing={2}>
-            {temporarySuccessMessage ? (
+            {successMessage ? (
               <Alert
                 severity="success"
                 sx={{ height: 114, alignItems: 'center' }}
               >
-                {temporarySuccessMessage}
+                {successMessage}
               </Alert>
-            ) : temporaryErrorMessage ? (
+            ) : errorMessage ? (
               <Alert
                 severity="error"
                 sx={{ height: 114, alignItems: 'center' }}
               >
-                {temporaryErrorMessage}
+                {errorMessage}
               </Alert>
             ) : (
               <Stack spacing={2}>

src/constants/constants.ts

@@ -1,3 +1,5 @@
 export const API_ORIGIN = 'http://localhost:3000';
 
 export const SORT_KEYS = ['asc', 'desc'];
+
+export const SELECTED_MOVIE_ID_QUERYSTRING_KEY = 'selected';

src/hooks/useSelectedMovie.ts

@@ -1,8 +1,11 @@
 import { useMovie } from '@/src/hooks/useMovie';
 import { useToggleQuerystringValue } from '@/src/hooks/useToggleQuerystringValue';
+import { SELECTED_MOVIE_ID_QUERYSTRING_KEY } from '@/src/constants/constants';
 
 export const useSelectedMovie = () => {
-  const { value: selected } = useToggleQuerystringValue('selected');
+  const { value: selected } = useToggleQuerystringValue(
+    SELECTED_MOVIE_ID_QUERYSTRING_KEY
+  );
 
   const { movie } = useMovie(selected);
 

src/hooks/useTemporaryMessage.ts

@@ -1,16 +1,16 @@
 import { useEffect, useState } from 'react';
 
 export const useTemporaryMessage = (timeout = 4000) => {
-  const [temporaryMessage, setTemporaryMessage] = useState('');
+  const [message, setMessage] = useState('');
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      if (temporaryMessage) {
-        setTemporaryMessage('');
+      if (message) {
+        setMessage('');
       }
     }, timeout);
     return () => clearTimeout(timer);
-  }, [temporaryMessage]);
+  }, [message]);
 
-  return { temporaryMessage, setTemporaryMessage };
+  return { message, setMessage };
 };