Merge pull request #43 from totum-tools/mhurd/feat/allow_route_upload

Allow users to upload routes

src/App.tsx

@@ -12,6 +12,7 @@ const App: React.FC = () => (
       <Routes>
         <Route path="/route/gh/:user/:repo/:path" element={<RunMosaic />} />
         <Route path="/route/:routeUrl" element={<RunMosaic />} />
+        <Route path="/uploaded" element={<RunMosaic />} />
         <Route path="/overlay" element={<OverlayDisplay />} />
         <Route path="/" element={<RouteSelection />} />
       </Routes>

src/components/RouteSelection/RouteSelection.tsx

@@ -1,5 +1,8 @@
 import { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { uploadRoute } from "../../store/routeSlice";
+import { Link, useNavigate } from "react-router-dom";
+import { Route } from "../../models";
+import { useDispatch } from "react-redux";
 
 interface RouteOption {
   name: string;
@@ -13,6 +16,8 @@ interface GameOption {
 }
 
 function RouteSelection() {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
   const [gameOptions, setGameOptions] = useState<GameOption[]>([]);
   const [customRouteUrl, setCustomRouteUrl] = useState<string>("");
 
@@ -29,6 +34,26 @@ function RouteSelection() {
   const handleCustomRouteInput = (event: React.ChangeEvent<HTMLInputElement>) => {
     setCustomRouteUrl(event.target.value);
   };
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        try {
+          const content = e.target?.result;
+          if (typeof content === "string") {
+            const parsedRoute: Route = JSON.parse(content);
+            dispatch(uploadRoute(parsedRoute));
+            navigate("/uploaded");
+          }
+        } catch (error) {
+          console.error("Failed to parse route:", error);
+          // Handle the error. Maybe update the state to show an error message.
+        }
+      };
+      reader.readAsText(file);
+    }
+  };
 
   return (
     <div>
@@ -54,6 +79,8 @@ function RouteSelection() {
         placeholder="Input remote route URL"
       />
       {customRouteUrl && <Link to={`/route/${encodeURIComponent(customRouteUrl)}`}>Go</Link>}
+      <h3>.. Or upload a route file</h3>
+      <input type="file" accept=".json" onChange={handleFileUpload} />
     </div>
   );
 }

src/components/RunMosaic/RunMosaic.tsx

@@ -41,7 +41,7 @@ import { useKeyBindings } from "./useKeyBindings";
 import { useLivesplit } from "./useLiveSplit";
 
 type RunParams = {
-  routeUrl: string;
+  routeUrl?: string;
   user?: string;
   repo?: string;
   path?: string;

src/store/routeSlice.ts

@@ -35,7 +35,12 @@ export const loadRoute = createAsyncThunk<Route, string, { dispatch: AppDispatch
 const routeSlice = createSlice({
   name: "route",
   initialState,
-  reducers: {},
+  reducers: {
+    uploadRoute: (state, action: PayloadAction<Route>) => {
+      state.data = action.payload;
+      state.status = "succeeded";
+    },
+  },
   extraReducers: (builder) => {
     builder
       .addCase(loadRoute.pending, (state) => {
@@ -57,4 +62,6 @@ export const selectRouteStatus = (state: RootState) => state.route.status;
 export const selectRouteData = (state: RootState) => state.route.data;
 export const selectRouteError = (state: RootState) => state.route.error;
 
+export const { uploadRoute } = routeSlice.actions;
+
 export default routeSlice.reducer;