Update CommandInterface for dynamic project lists

components/REPL/REPLInput.tsx

@@ -1,7 +1,9 @@
 import type { NextPage } from "next";
-import { MutableRefObject, useState, createRef } from "react";
+import useSWR from "swr";
+import { MutableRefObject, useState, createRef, useEffect } from "react";
 import { CommandInterface } from "../../lib/commands";
 import styles from "../../styles/REPL/REPLInput.module.css";
+import { Project } from "../../lib/projects/types";
 
 interface REPLInputParams {
     historyCallback: CallableFunction;
@@ -13,6 +15,11 @@ interface REPLInputParams {
     }
 }
 
+async function fetchProjects(endpoint: string): Promise<Project[]> {
+    const res = await fetch(endpoint);
+    return res.json();
+}
+
 const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, inputRef, modalManipulation}) => {
     const typed = createRef<HTMLSpanElement>();
     const completion = createRef<HTMLSpanElement>();
@@ -20,7 +27,8 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
     const [justTabbed, setJustTabbed] = useState<number>(0);
     const [inCmdHistory, setInCmdHistory] = useState<number>(-1);
     const [cmdHistory, setCmdHistory] = useState<string[]>([]);
-    const cmdIf = new CommandInterface(modalManipulation);
+    const [cmdIf, setCmdIf] = useState<CommandInterface>(new CommandInterface(modalManipulation, []));
+    const { data: projects, error: projectsError } = useSWR("/api/projects", fetchProjects);
 
     const clearInput = (inputRef: HTMLInputElement) => {
         inputRef.value = "";
@@ -127,9 +135,13 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
                 clearInput(input);
             }
         }
-
     };
 
+    useEffect(() => {
+        if (!projectsError && projects) setCmdIf(new CommandInterface(modalManipulation, projects));
+        // In any other case we just don't create another interface. 
+    }, [projects, projectsError, modalManipulation]);
+
     return <div className={styles.wrapperwrapper}>
         <span className={styles.inputstart}>$&nbsp;</span>
         <div className={styles.wrapper}>

lib/commands/definitions.ts

@@ -1,6 +1,4 @@
 import type { Command, Flag } from "./types";
-import type { Project } from "../projects/types";
-import projectList from "../projects";
 
 function getCommandByName(name: string): Command|undefined {
     return commandList.find(cmd => cmd.name === name);
@@ -148,7 +146,7 @@ const project: Command = {
     execute: (flags, args, _raw, cmdIf) => {
         if (project.flags && checkFlagInclude(flags, project.flags.list)) {
             const result = ["Found the following projects:"];
-            projectList.forEach(project => result.push(`\t${project.name}\t${project.short}`));
+            cmdIf.projects.forEach(project => result.push(`\t${project.name}\t${project.short}`));
             return result;
         }
 
@@ -156,7 +154,7 @@ const project: Command = {
 
         if (args[0] === "this") args[0] = "homepage";
 
-        const pjt = projectList.find(p => p.name === args[0]);
+        const pjt = cmdIf.projects.find(p => p.name === args[0]);
         if (!pjt) return [
             `Cannot find project ${args[0]}!`,
             "You can see available projects using 'project -l'."

lib/commands/index.ts

@@ -1,3 +1,4 @@
+import { Project } from "../projects/types";
 import { printSyntax, commandList } from "./definitions";
 
 interface CommandInterfaceCallbacks {
@@ -7,9 +8,11 @@ interface CommandInterfaceCallbacks {
 
 export class CommandInterface {
     callbacks: CommandInterfaceCallbacks;
+    projects: Project[];
 
-    constructor(callbacks: CommandInterfaceCallbacks) {
+    constructor(callbacks: CommandInterfaceCallbacks, projects: Project[]) {
         this.callbacks = callbacks;
+        this.projects = projects;
     }
 
     static commandCompletion(input: string): string[] {

package-lock.json

@@ -10,7 +10,8 @@
         "next": "12.0.7",
         "phosphor-react": "^1.3.1",
         "react": "17.0.2",
-        "react-dom": "17.0.2"
+        "react-dom": "17.0.2",
+        "swr": "^1.1.2"
       },
       "devDependencies": {
         "@types/node": "16.11.11",
@@ -5388,6 +5389,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/swr": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.1.2.tgz",
+      "integrity": "sha512-UsM0eo5T+kRPyWFZtWRx2XR5qzohs/LS4lDC0GCyLpCYFmsfTk28UCVDbOE9+KtoXY4FnwHYiF+ZYEU3hnJ1lQ==",
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/table": {
       "version": "6.7.3",
       "resolved": "https://registry.npmjs.org/table/-/table-6.7.3.tgz",
@@ -9828,6 +9837,12 @@
         "has-flag": "^3.0.0"
       }
     },
+    "swr": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.1.2.tgz",
+      "integrity": "sha512-UsM0eo5T+kRPyWFZtWRx2XR5qzohs/LS4lDC0GCyLpCYFmsfTk28UCVDbOE9+KtoXY4FnwHYiF+ZYEU3hnJ1lQ==",
+      "requires": {}
+    },
     "table": {
       "version": "6.7.3",
       "resolved": "https://registry.npmjs.org/table/-/table-6.7.3.tgz",

package.json

@@ -12,7 +12,8 @@
     "next": "12.0.7",
     "phosphor-react": "^1.3.1",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "swr": "^1.1.2"
   },
   "devDependencies": {
     "@types/node": "16.11.11",