Add user parameter and connect button

Author: javizqh

academy/views.py

@@ -201,12 +201,16 @@ def get_file_list(fal, request):
     Query params: project (str).
     """
     project = request.GET.get("project")
+    user = request.GET.get("user", None)
 
     base_group = "Code"
 
     path = fal.exercise_path(project)
 
-    file_list = fal.list_formatted(path, base_group)
+    try:
+        file_list = fal.list_formatted(path, base_group)
+    except Exception:
+        return Response({"file_list": EntryEncoder().encode([])})
 
     return Response({"file_list": EntryEncoder().encode(file_list)})
 
@@ -360,6 +364,7 @@ def get_file(fal, request):
     """
     project_id = request.GET.get("project", None)
     filename = request.GET.get("filename", None)
+    user = request.GET.get("user", None)
 
     binary = request.GET.get("binary", None)
 

react_frontend/src/api/api.ts

@@ -154,14 +154,14 @@ const getHelperFileList = async (
   }
 };
 
-const getFileList = async (project: string) => {
+const getFileList = async (project: string, user?: string) => {
   if (!project) throw new Error("Current Project id is not set");
 
   // TODO:add whitelist parameter
 
-  const apiUrl = `/academy/get_file_list?project=${encodeURIComponent(
-    project
-  )}`;
+  let apiUrl = `/academy/get_file_list?project=${encodeURIComponent(project)}`;
+
+  if (user !== undefined) apiUrl += `&user=${encodeURIComponent(user)}`;
 
   try {
     const response = await axios.get(apiUrl);
@@ -172,14 +172,20 @@ const getFileList = async (project: string) => {
   }
 };
 
-const getFile = async (project: string, fileName: string, binary?: boolean) => {
+const getFile = async (
+  project: string,
+  fileName: string,
+  user?: string,
+  binary?: boolean
+) => {
   if (!project) throw new Error("Project name is not set");
   if (!fileName) throw new Error("File name is not set");
 
   let apiUrl = `/academy/get_file?project=${encodeURIComponent(
     project
   )}&filename=${encodeURIComponent(fileName)}`;
 
+  if (user !== undefined) apiUrl += `&user=${encodeURIComponent(user)}`;
   if (binary) apiUrl += `&binary=true`;
 
   try {

react_frontend/src/components/buttons/Connect.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { StyledHeaderConnectButton } from "Styles/headers/HeaderMenu.styles";
+import { states } from "jderobot-commsmanager";
+import { useAcademyTheme } from "Contexts/AcademyThemeContext";
+
+const ConnectButton = ({
+  connectManager,
+}: {
+  connectManager: (
+    desiredState?: string,
+    callback?: () => void
+  ) => Promise<void>;
+}) => {
+  const theme = useAcademyTheme();
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const handleConnect = async () => {
+    setLoading(true);
+    connectManager(states.CONNECTED, () => {
+      setLoading(false);
+      close();
+    });
+  };
+
+  const msg = loading ? "Conecting ..." : "Click to connect";
+
+  return (
+    <StyledHeaderConnectButton
+      color={theme.palette.text}
+      bgColor={theme.palette.secondary}
+      hoverColor={theme.palette.secondary}
+      roundness={theme.roundness}
+      id="connect-with-rb"
+      onClick={handleConnect}
+      title="Connect to the Robotics Backend"
+      disabled={loading}
+    >
+      {msg}
+    </StyledHeaderConnectButton>
+  );
+};
+
+export default ConnectButton;

react_frontend/src/components/buttons/PlayPause.tsx

@@ -1,3 +1,4 @@
+import React, { MutableRefObject, useEffect, useRef, useState } from "react";
 import { StyledHeaderButton } from "Styles/headers/HeaderMenu.styles";
 import { Entry, useError } from "jderobot-ide-interface";
 import {
@@ -9,10 +10,8 @@ import {
 } from "Helpers/utils";
 import { CommsManager, states } from "jderobot-commsmanager";
 import JSZip from "jszip";
-import { useEffect, useRef, useState } from "react";
 import commons from "../../common.zip";
 import { useAcademyTheme } from "Contexts/AcademyThemeContext";
-import React from "react";
 
 import PlayArrowRoundedIcon from "@mui/icons-material/PlayArrowRounded";
 import PauseRoundedIcon from "@mui/icons-material/PauseRounded";
@@ -22,19 +21,17 @@ import { getFileList, getHelperFileList } from "Api";
 const PlayPauseButton = ({
   project,
   supportedLanguages,
-  connectManager,
+  userRef,
+  entrypointRef,
 }: {
   project: string;
   supportedLanguages: string[];
-  connectManager: (
-    desiredState?: string,
-    callback?: () => void
-  ) => Promise<void>;
+  userRef: MutableRefObject<string | undefined>;
+  entrypointRef: MutableRefObject<Entry | undefined>;
 }) => {
   const theme = useAcademyTheme();
-  const { warning, error, info, close } = useError();
+  const { warning, error } = useError();
   const filesRef = useRef<Entry[]>([]);
-  const entrypointRef = useRef<Entry | undefined>(undefined);
   const runningFilesRef = useRef<JSZip>(JSZip);
   const runningEntrypointRef = useRef<Entry | undefined>(undefined);
   const runningContentRef = useRef<string | undefined>(undefined);
@@ -55,24 +52,15 @@ const PlayPauseButton = ({
     }
   };
 
-  const updateCurrent = (e: unknown) => {
-    const T = CustomEvent<{ detail: { file?: Entry } }>;
-    if (e instanceof T) {
-      entrypointRef.current = e.detail.file;
-    }
-  };
-
   useEffect(() => {
     subscribe("autoSaveCompleted", () => {
       updateCode(true);
     });
     subscribe("CommsManagerStateChange", updateState);
-    subscribe("currentFile", updateCurrent);
 
     return () => {
       unsubscribe("autoSaveCompleted", () => {});
       unsubscribe("CommsManagerStateChange", () => {});
-      unsubscribe("currentFile", () => {});
     };
   }, []);
 
@@ -134,22 +122,12 @@ const PlayPauseButton = ({
 
   // App handling
 
-  const onAppStateChange = async (save?: boolean) => {
+  const onAppStateChange = async (save?: boolean): Promise<void> => {
     const manager = CommsManager.getInstance();
     const state = manager.getState();
 
     setLoading(true);
 
-    if (state === states.IDLE) {
-      info("Connecting with the Robotics Backend ...");
-      connectManager(states.TOOLS_READY, () => {
-        setLoading(false);
-        close();
-        onAppStateChange();
-      });
-      return;
-    }
-
     if (state === states.WORLD_READY || state === states.CONNECTED) {
       console.error("Simulation is not ready!");
       warning(
@@ -197,16 +175,20 @@ const PlayPauseButton = ({
     }
 
     if (!isCodeUpdatedRef.current) {
-      return setTimeout(onAppStateChange, 100, true);
+      setTimeout(onAppStateChange, 100, true);
+      return;
     }
 
-    const files = await getFileList(project);
+    const files = await getFileList(project, userRef.current);
     filesRef.current = JSON.parse(files);
-    const userZip = await loadFiles(entrypointRef.current, JSON.parse(files));
+    const userZip = await loadFiles(
+      entrypointRef.current,
+      filesRef.current,
+      userRef.current
+    );
 
     if (state === states.PAUSED) {
       const sameZips = await compareZips(userZip, runningFilesRef.current);
-
       if (sameZips && runningEntrypointRef.current === entrypointRef.current) {
         try {
           await manager.resume();
@@ -283,10 +265,10 @@ const PlayPauseButton = ({
       }
     }
 
-    async function loadFiles(entrypoint: Entry, files: Entry[]) {
+    async function loadFiles(entrypoint: Entry, files: Entry[], user?: string) {
       const zip = new JSZip();
 
-      await zipCodeFiles(zip, files, project);
+      await zipCodeFiles(zip, files, project, user);
 
       zip.files[entrypoint.path]._data.then(
         (value: string) => (runningContentRef.current = value)

react_frontend/src/components/buttons/index.ts

@@ -9,3 +9,4 @@ export { default as LayoutButton } from "./Layout";
 export { default as TerminateUniverseButton } from "./TerminateUniverse";
 export { default as SearchButton } from "./Search";
 export { default as ThemeButton } from "./Theme";
+export { default as ConnectButton } from "./Connect";

react_frontend/src/components/headers/ExerciseHeader.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MutableRefObject, useEffect, useRef, useState } from "react";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import { Link } from "react-router-dom";
@@ -21,8 +21,11 @@ import {
   LayoutButton,
   TerminateUniverseButton,
   ThemeButton,
+  ConnectButton,
 } from "Components/buttons";
-import { Layout } from "jderobot-ide-interface";
+import { Entry, Layout } from "jderobot-ide-interface";
+import { CommsManager } from "jderobot-commsmanager";
+import { subscribe, unsubscribe } from "Helpers/utils";
 
 const ExerciseHeader = ({
   project,
@@ -31,19 +34,22 @@ const ExerciseHeader = ({
   url,
   setLayout,
   connectManager,
+  commsManager,
+  userRef,
 }: {
   project: string;
   name: string;
   supportedLanguages: string[];
   url?: string;
   setLayout: (layout: Layout) => void;
+  commsManager: CommsManager | null;
+  userRef: MutableRefObject<string | undefined>;
   connectManager: (
     desiredState?: string,
     callback?: () => void
   ) => Promise<void>;
 }) => {
   const theme = useAcademyTheme();
-
   return (
     <AppBar position="static">
       <Toolbar
@@ -70,13 +76,13 @@ const ExerciseHeader = ({
           <ThemeButton />
           <DownloadButton project={project} />
           <LayoutButton setLayout={setLayout} />
-          <PlayPauseButton
+          <ExecutionControl
             project={project}
             supportedLanguages={supportedLanguages}
+            commsManager={commsManager}
             connectManager={connectManager}
+            userRef={userRef}
           />
-          <ResetButton />
-          <TerminateUniverseButton />
           <TheoryButton url={url} />
           <InfoButton />
           <ForumButton />
@@ -86,4 +92,68 @@ const ExerciseHeader = ({
   );
 };
 
+const ExecutionControl = ({
+  project,
+  supportedLanguages,
+  commsManager,
+  connectManager,
+  userRef,
+}: {
+  project: string;
+  supportedLanguages: string[];
+  commsManager: CommsManager | null;
+  userRef: MutableRefObject<string | undefined>;
+  connectManager: (
+    desiredState?: string,
+    callback?: () => void
+  ) => Promise<void>;
+}) => {
+  const [state, setState] = useState<string | undefined>(
+    commsManager?.getState()
+  );
+  const entrypointRef = useRef<Entry | undefined>(undefined);
+
+  const updateState = (e: any) => {
+    setState(e.detail.state);
+  };
+
+  const updateCurrent = (e: unknown) => {
+    const T = CustomEvent<{ detail: { file?: Entry } }>;
+    if (e instanceof T) {
+      entrypointRef.current = e.detail.file;
+    }
+  };
+
+  useEffect(() => {
+    subscribe("CommsManagerStateChange", updateState);
+    subscribe("currentFile", updateCurrent);
+
+    return () => {
+      unsubscribe("CommsManagerStateChange", () => {});
+      unsubscribe("currentFile", () => {});
+    };
+  }, []);
+
+  const viewConnect = state === undefined || state === "idle";
+
+  return (
+    <>
+      {viewConnect ? (
+        <ConnectButton connectManager={connectManager} />
+      ) : (
+        <>
+          <PlayPauseButton
+            project={project}
+            supportedLanguages={supportedLanguages}
+            userRef={userRef}
+            entrypointRef={entrypointRef}
+          />
+          <ResetButton />
+          <TerminateUniverseButton />
+        </>
+      )}
+    </>
+  );
+};
+
 export default ExerciseHeader;