feat: better error handling

.vscode/settings.json

@@ -6,7 +6,8 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit",
-    "source.organizeImports": "explicit"
+    // TODO(michaelfromyeg): make this happen for everything except CSS
+    "source.organizeImports": "never"
   },
   "python.terminal.activateEnvironment": true,
   "python.terminal.activateEnvInCurrentTerminal": true,

client/package.json

@@ -16,6 +16,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "react-toastify": "^9.1.3",
     "tailwindcss": "^3.4.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

client/src/components/App.tsx

@@ -1,15 +1,18 @@
 import React from "react";
-import "../styles/App.css";
+import { ToastContainer } from "react-toastify";
 
 import Footer from "./Footer";
 import Form from "./Form";
 
+import "../styles/App.css";
+
 const App: React.FC = () => {
   return (
-    <>
+    <div>
       <Form />
       <Footer />
-    </>
+      <ToastContainer />
+    </div>
   );
 };
 

client/src/components/Footer.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 const Footer: React.FC = () => {
   return (
-    <footer className="w-full text-center p-4 absolute bottom-0 left-0">
+    <footer className="w-full bg-white text-center p-4 absolute bottom-0 left-0">
       <div className="flex justify-center items-center space-x-4">
         <div className="mb-0">a project from Michael DeMarco</div>
         <span>|</span>

client/src/components/Form.tsx

@@ -1,5 +1,6 @@
 import axios from "axios";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import { ToastContainer, toast } from "react-toastify";
 
 type Stage = "phoneInput" | "otpInput" | "settings" | "videoDisplay";
 
@@ -10,6 +11,7 @@ const BASE_URL = IS_PRODUCTION
 
 const Footer: React.FC = () => {
   const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<any | null>(null);
 
   const [stage, setStage] = useState<Stage>("phoneInput");
   const [phoneNumber, setPhoneNumber] = useState<string>("");
@@ -22,28 +24,71 @@ const Footer: React.FC = () => {
   const [mode, setMode] = useState<string>("classic");
   const [videoUrl, setVideoUrl] = useState<string>("");
 
+  const showErrorToast = (errorMessage: string) => {
+    toast.error(errorMessage, {
+      position: "top-right",
+      autoClose: 5000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+    });
+  };
+
+  useEffect(() => {
+    const interceptor = axios.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        setError(error);
+        return Promise.reject(error);
+      }
+    );
+
+    return () => {
+      axios.interceptors.response.eject(interceptor);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (error) {
+      // Handle the error with showErrorToast and other logic
+      let errorMessage = "An error occurred";
+      if (error.response) {
+        errorMessage = `Error: ${error.response.data.message}`;
+      } else if (error.request) {
+        errorMessage = "No response received from server";
+      } else if (error && error.message) {
+        errorMessage = error.message;
+      }
+
+      showErrorToast(errorMessage);
+      localStorage.removeItem("session");
+      setStage("phoneInput");
+    }
+  }, [error]);
+
   const handlePhoneSubmit = async () => {
-    try {
-      const session = localStorage.getItem("session");
-      if (session) {
-        const sessionData = JSON.parse(session);
-        setOtpSession(sessionData.otpSession);
-        setToken(sessionData.token);
+    const session = localStorage.getItem("session");
+    let sessionData = session ? JSON.parse(session) : null;
 
-        setStage("settings");
-      } else {
-        setLoading(true);
+    if (sessionData && sessionData.phone === `${countryCode}${phoneNumber}`) {
+      setOtpSession(sessionData.otpSession);
+      return;
+    }
 
-        const response = await axios.post(`${BASE_URL}/request-otp`, {
-          phone: `${countryCode}${phoneNumber}`,
-        });
+    setLoading(true);
+    localStorage.removeItem("session");
 
-        console.log(response.data);
+    try {
+      const response = await axios.post(`${BASE_URL}/request-otp`, {
+        phone: `${countryCode}${phoneNumber}`,
+      });
 
-        setOtpSession(response.data?.otpSession);
+      console.log(response.data);
 
-        setStage("otpInput");
-      }
+      setOtpSession(response.data?.otpSession);
+      setStage("otpInput");
     } catch (error) {
       console.error("Error sending OTP:", error);
     } finally {
@@ -67,6 +112,7 @@ const Footer: React.FC = () => {
       const sessionData = {
         otpSession,
         token: response.data?.token,
+        phone: `${countryCode}${phoneNumber}`,
       };
 
       localStorage.setItem("session", JSON.stringify(sessionData));
@@ -116,10 +162,15 @@ const Footer: React.FC = () => {
   return (
     <div className="App">
       <h1 className="text-4xl font-bold text-center mb-3">BeReal. Recap.</h1>
-      <p className="text-center mb-6">
+      <p className="text-center mb-3">
         Create a 2022-style recap for 2022 or 2023. Needs your phone number.
         More information on GitHub.
       </p>
+      <p className="text-center mb-6">
+        The app is admittedly a bit flakey, so try to follow instructions
+        carefully, and if you get an error, refresh the page and try again. If
+        errors persist, feel free to make an issue on GitHub.
+      </p>
       <div>
         {stage === "phoneInput" && (
           <>

client/src/index.tsx

@@ -4,6 +4,7 @@ import App from "./components/App";
 import reportWebVitals from "./reportWebVitals";
 
 import "./styles/index.css";
+import "react-toastify/dist/ReactToastify.css";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement