-
- If you get an error, refresh the page and try again. If errors
- persist, feel free to{" "}
+
);
diff --git a/client/src/components/Form.tsx b/client/src/components/Form.tsx
deleted file mode 100644
index a606814..0000000
--- a/client/src/components/Form.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-import React, { useEffect, useState } from "react";
-import axios from "axios";
-
-import PhoneInput from "./PhoneInput";
-import Processing from "./Processing";
-import OtpInput from "./OtpInput";
-import Settings from "./Settings";
-import Download from "./Download";
-
-import { BASE_URL, Option, YEARS, MODES } from "../utils/constants";
-import { useThrottledToast } from "../hooks/useThrottledToast";
-
-axios.defaults.withCredentials = true;
-
-type Stage =
- | "phoneInput"
- | "otpInput"
- | "settings"
- | "processing"
- | "videoDisplay";
-
-// interface Session {
-// countryCode: string;
-// phoneNumber: string;
-
-// otpSession: string;
-
-// token: string;
-// berealToken: string;
-// }
-
-const Form: React.FC = () => {
- const [error, setError] = useState(null);
- const [stage, setStage] = useState("phoneInput");
- const [phoneNumber, setPhoneNumber] = useState("");
- const [countryCode, setCountryCode] = useState("");
- const [otpCode, setOtpCode] = useState("");
- const [otpSession, setOtpSession] = useState(null);
- const [token, setToken] = useState("");
- const [berealToken, setBerealToken] = useState("");
- const [year, setYear] = useState
diff --git a/client/src/components/OtpInput.tsx b/client/src/components/OtpInput.tsx
index 90354ed..7b5d863 100644
--- a/client/src/components/OtpInput.tsx
+++ b/client/src/components/OtpInput.tsx
@@ -1,21 +1,38 @@
-import { useEffect, useState } from "react";
-import { useThrottledToast } from "../hooks/useThrottledToast";
+import { useCallback, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useFormContext } from "../context/FormContext";
+import { SomeError, useError } from "../hooks/useError";
+import { useMobileOtpAutofill } from "../hooks/useMobileOtpAutofill";
+import axios from "../utils/axios";
+import { BASE_URL } from "../utils/constants";
+
+interface ValidateOtpResponse {
+ token: string;
+ bereal_token: string;
+}
-interface Props {
- otpCode: string;
- setOtpCode: React.Dispatch>;
- handleOtpSubmit: () => void;
+interface ErrorResponse {
+ message: string;
}
-const OtpInput: React.FC = (props) => {
- const { otpCode, setOtpCode, handleOtpSubmit } = props;
+const OtpInput: React.FC = () => {
+ const {
+ phoneNumber,
+ countryCode,
+ otpSession,
+ otpCode,
+ setOtpCode,
+ setToken,
+ setBerealToken,
+ } = useFormContext();
+ const navigate = useNavigate();
const [loading, setLoading] = useState(false);
- const [error, setError] = useState("");
-
- const throttledToast = useThrottledToast();
+ const { error, setError } = useError(
+ "Couldn't validate your verification code. Please try again."
+ );
- const handleKeyDown = (event: any) => {
+ const handleKeyDown = (event: any): void => {
if (event.key === "Enter") {
event.preventDefault();
@@ -23,40 +40,37 @@ const OtpInput: React.FC = (props) => {
}
};
- useEffect(() => {
- const abortController = new AbortController();
-
- const fetchOtp = async () => {
- if ("OTPCredential" in window) {
- try {
- const content = await navigator.credentials.get({
- otp: { transport: ["sms"] },
- signal: abortController.signal,
- });
-
- if (!content) return;
-
- setOtpCode(content.code);
- handleOtpSubmit();
- } catch (error) {
- console.warn(error);
- throttledToast(
- "Couldn't paste your verification code automatically. Enter it manually.",
- "warning"
- );
+ const handleOtpSubmit = useCallback(async (): Promise => {
+ try {
+ const response = await axios.post(
+ `${BASE_URL}/validate-otp`,
+ {
+ otp_session: otpSession,
+ otp_code: otpCode,
+ phone: `${countryCode}${phoneNumber}`,
}
- }
- };
+ );
- fetchOtp();
+ setToken(response.data.token);
+ setBerealToken(response.data.bereal_token);
- return () => {
- abortController.abort();
- };
- }, [setOtpCode, handleOtpSubmit, throttledToast]);
+ navigate("/settings");
+ } catch (error) {
+ setError(error as SomeError);
+ }
+ }, [
+ countryCode,
+ navigate,
+ otpCode,
+ otpSession,
+ phoneNumber,
+ setBerealToken,
+ setError,
+ setToken,
+ ]);
const validateAndSubmitOtpCode = async () => {
- setError("");
+ setError(null);
setLoading(true);
try {
@@ -73,6 +87,8 @@ const OtpInput: React.FC = (props) => {
}
};
+ useMobileOtpAutofill(setOtpCode, handleOtpSubmit);
+
return (
);
};
diff --git a/client/src/components/Processing.tsx b/client/src/components/Processing.tsx
index 65e4017..985a756 100644
--- a/client/src/components/Processing.tsx
+++ b/client/src/components/Processing.tsx
@@ -1,78 +1,111 @@
-import React, { useState, useEffect } from "react";
-import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useFormContext } from "../context/FormContext";
+import { useError } from "../hooks/useError";
+import axios from "../utils/axios";
import { BASE_URL } from "../utils/constants";
-interface Props {
- phone: string;
- berealToken: string;
-
- taskId: string;
- setResult: Function;
- setError: Function;
- setStage: Function;
+interface ProgressResponse {
+ status: string;
+ result: string;
}
-const VideoProcessor: React.FC = (props: Props) => {
- const { phone, berealToken, taskId, setResult, setError, setStage } = props;
+interface ErrorResponse {
+ message: string;
+}
- const [errorCount, setErrorCount] = useState(0);
+const VideoProcessor: React.FC = () => {
+ const {
+ countryCode,
+ phoneNumber,
+ berealToken,
+ taskId,
+ setVideoFilename,
+ reset,
+ } = useFormContext();
+ const navigate = useNavigate();
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [progress, setProgress] = useState(0);
+ const { setError, setErrorAndNavigate } = useError(
+ "Failed to generate video. Try again later."
+ );
+ const [errorCount, setErrorCount] = useState(0);
+
useEffect(() => {
const checkProgress = async () => {
- if (taskId) {
- try {
- const response = await axios.get(`${BASE_URL}/status/${taskId}`, {
- params: {
- phone,
- berealToken,
- },
- });
-
- if (response.status === 401) {
- setError("Please refresh the page and try again.");
- setStage("phoneInput");
- } else if (response.status > 299) {
- console.warn("Couldn't check progress:", response);
- console.log("Progress unknown... continuing anyway!");
-
- setErrorCount(errorCount + 1);
-
- if (errorCount >= 5) {
- setError("Failed to generate video. Try again later.");
- setStage("phoneInput");
- }
- } else {
- const { status, result } = response.data;
-
- if (status === "FAILURE") {
- setError("Failed to generate video. Try again later.");
- setStage("phoneInput");
- }
- if (status === "SUCCESS") {
- setProgress(100);
-
- setResult(result);
- setStage("videoDisplay");
- } else {
- setProgress(logProgress(response.data));
- }
+ if (!taskId) {
+ navigate("/");
+ return;
+ }
+
+ try {
+ const config = {
+ params: {
+ phone: `${countryCode}${phoneNumber}`,
+ berealToken,
+ },
+ };
+ const response = await axios.get(
+ `${BASE_URL}/status/${taskId}`,
+ config
+ );
+
+ if (response.status === 401) {
+ reset();
+ setErrorAndNavigate("Please refresh the page and try again.", "/");
+ return;
+ }
+
+ if (response.status > 299) {
+ console.warn("Couldn't check progress:", response);
+
+ const nextErrorCount = errorCount + 1;
+ setErrorCount(nextErrorCount);
+
+ if (nextErrorCount >= 3) {
+ reset();
+ setErrorAndNavigate(
+ "Failed to generate video. Try again later.",
+ "/"
+ );
}
- } catch (error) {
- // again, not something the user needs to know about; just try again
- console.error("Error checking progress:", error);
+
+ return;
+ }
+
+ const { status, result } = response.data;
+ if (status === "FAILURE") {
+ reset();
+ setErrorAndNavigate(
+ "Failed to generate video. Try again later.",
+ "/"
+ );
+ } else if (status === "SUCCESS") {
+ setProgress(100);
+
+ setVideoFilename(result);
+ navigate("/download");
+ } else {
+ setProgress(logProgress(response.data));
}
+ } catch (error) {
+ // again, not something the user needs to know about; just try again
+ console.error("Error checking progress:", error);
}
};
let interval: NodeJS.Timeout | null = null;
if (taskId) {
+ checkProgress();
+
interval = setInterval(() => {
checkProgress();
}, 60 * 1000);
+ } else {
+ navigate("/");
}
return () => {
@@ -81,14 +114,17 @@ const VideoProcessor: React.FC = (props: Props) => {
}
};
}, [
- phone,
+ phoneNumber,
berealToken,
taskId,
- setResult,
setError,
- setStage,
errorCount,
setErrorCount,
+ countryCode,
+ navigate,
+ setVideoFilename,
+ reset,
+ setErrorAndNavigate,
]);
return (
diff --git a/client/src/components/Settings.tsx b/client/src/components/Settings.tsx
index b682aac..1932c51 100644
--- a/client/src/components/Settings.tsx
+++ b/client/src/components/Settings.tsx
@@ -1,28 +1,98 @@
import { useState } from "react";
import Select from "react-select";
+import { useNavigate } from "react-router-dom";
+import { useFormContext } from "../context/FormContext";
+import { SomeError, useError } from "../hooks/useError";
+import axios from "../utils/axios";
+import { BASE_URL, MAX_FILE_SIZE, MODES, YEARS } from "../utils/constants";
import { customStyles } from "./CountryCode";
-import { Option, YEARS, MODES, MAX_FILE_SIZE } from "../utils/constants";
-
-interface Props {
- setYear: React.Dispatch>;
- setMode: React.Dispatch>;
- setFile: React.Dispatch>;
- handleSettingsSubmit: () => void;
- year: Option | null;
- mode: Option | null;
- file: File | null;
+
+interface VideoResponse {
+ taskId: string;
+}
+
+interface ErrorResponse {
+ message: string;
}
-const Settings: React.FC = (props) => {
- const { setYear, setMode, setFile, handleSettingsSubmit, year, mode, file } =
- props;
+const Settings: React.FC = () => {
+ const {
+ countryCode,
+ phoneNumber,
+ berealToken,
+ token,
+ setYear,
+ setDisplayDate,
+ setMode,
+ setFile,
+ setDisableMusic,
+ year,
+ displayDate,
+ mode,
+ file,
+ disableMusic,
+ setTaskId,
+ } = useFormContext();
+ const navigate = useNavigate();
const [loading, setLoading] = useState(false);
- const [error, setError] = useState(null);
+ const { error, setError } = useError(
+ "An unexpected error occurred in creating your video. Please refresh the page and try again."
+ );
+
+ // assumes year and mode are set
+ const handleSettingsSubmit = async (): Promise => {
+ const formData = new FormData();
+
+ if (!year || !mode) {
+ return;
+ }
+
+ formData.append("token", token);
+ formData.append("year", year.value);
+ formData.append("displayDate", displayDate ? "true" : "false");
+ formData.append("mode", mode.value);
+
+ // if left blank, a default song is used
+ if (file) {
+ formData.append("file", file);
+ }
+
+ formData.append("disableMusic", disableMusic ? "true" : "false");
+
+ try {
+ const response = await axios.post(
+ `${BASE_URL}/video`,
+ formData,
+ {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ },
+ params: {
+ phone: `${countryCode}${phoneNumber}`,
+ berealToken,
+ },
+ }
+ );
+
+ if (response.status === 401) {
+ setError(
+ "An unexpected error occurred in creating your video. Please refresh the page and try again."
+ );
+ navigate("/");
+ return;
+ }
+
+ setTaskId(response.data.taskId);
+ navigate("/processing");
+ } catch (error) {
+ setError(error as SomeError);
+ }
+ };
const validateAndSubmitSettings = async () => {
- setError("");
+ setError(null);
setLoading(true);
try {
@@ -56,17 +126,6 @@ const Settings: React.FC = (props) => {
styles={customStyles}
className="basic-single mb-3"
/>
- {/* TODO(michaelfromyeg): this needs some styling work */}
-
- setFile(e.target.files?.[0] ?? null)}
- />
@@ -79,7 +138,49 @@ const Settings: React.FC = (props) => {
options={MODES}
styles={customStyles}
/>
- {error && (
+
+ {/* TODO(michaelfromyeg): the file input needs some styling work */}
+ setFile(e.target.files?.[0] ?? null)}
+ disabled={disableMusic}
+ />
+ {/* TODO(michaelfromyeg): a checkbox to enable displaying dates */}
+
+
+ setDisableMusic(e.target.checked)}
+ />
+
+ setDisplayDate(e.target.checked)}
+ />
+
+ {error && typeof error === "string" && (
{error}
)}