Feature - Rewrite state using Recoil + Add Redirects Modal

next.config.js

@@ -2,3 +2,16 @@
 module.exports = {
     reactStrictMode: false,
 };
+
+const intercept = require("intercept-stdout");
+
+// safely ignore recoil stdout warning messages
+function interceptStdout(text) {
+    if (text.includes("Duplicate atom key")) {
+        return "";
+    }
+    return text;
+}
+
+// Intercept in dev and prod
+intercept(interceptStdout);

package.json

@@ -14,12 +14,14 @@
         "@types/react-beautiful-dnd": "^13.1.2",
         "@types/seedrandom": "^3.0.1",
         "axios": "^0.24.0",
+        "intercept-stdout": "^0.1.2",
         "monaco-editor": "^0.31.1",
         "next": "12.0.7",
         "react": "17.0.2",
         "react-beautiful-dnd": "^13.1.0",
         "react-dom": "17.0.2",
         "react-tooltip": "^4.2.21",
+        "recoil": "^0.5.2",
         "seedrandom": "^3.0.5",
         "swr": "^1.1.2",
         "yaml": "^1.10.2"

src/atoms/atoms.ts

@@ -0,0 +1,41 @@
+import { atom } from "recoil";
+import { LoadingOptions } from "../types/LoadingOptions";
+import { Service } from "../types/Service";
+
+export const servicesState = atom({
+    key: "services",
+    default: <Service[]>[],
+});
+
+export const isCreatingServiceState = atom({
+    key: "isCreatingService",
+    default: false,
+});
+
+export const autoReloadState = atom({
+    key: "autoReload",
+    default: false,
+});
+
+export const isEditingFileState = atom({
+    key: "isEditingFile",
+    default: false,
+});
+
+export const loadingFlagsState = atom({
+    key: "loadingFlags",
+    default: <LoadingOptions>{
+        fetchingServices: false,
+        creatingService: false,
+        deletingService: false,
+        updatingService: false,
+    },
+});
+
+export const redirectsModalState = atom({
+    key: "isAddingRedirects",
+    default: {
+        isAddingRedirects: false,
+        service: <Service>{},
+    },
+});

src/components/code-editor/YAMLEditor.tsx → src/components/code-editor/FileEditorModal.tsx

@@ -2,34 +2,39 @@ import { Dialog } from "@headlessui/react";
 import useSWR from "swr";
 import axios from "axios";
 import dynamic from "next/dynamic";
-import { useEffect } from "react";
+import { useRecoilState } from "recoil";
+import { isEditingFileState, servicesState } from "../../atoms/atoms";
 
 const Editor = dynamic(() => import("@monaco-editor/react"), { ssr: false });
 
 const fetcher = (url: string) => fetch(url).then((r) => r.text());
 
-function YAMLEditor(props: {
-    YAMLEditorOpen: boolean;
-    handleYAMLEditorClose: () => void;
-}) {
-    const { data: editorBody, mutate } = useSWR("/api/compose", fetcher);
+const getServices = async () => {
+    return await (
+        await axios.get("/api/services")
+    ).data;
+};
 
-    useEffect(() => {
-        async function updateBody() {
-            await mutate();
-        }
-        if (props.YAMLEditorOpen) {
-            updateBody();
-        }
-    }, [mutate, props.YAMLEditorOpen]);
+function FileEditorModal() {
+    const { data: editorBody, mutate } = useSWR("/api/compose", fetcher);
+    const [, setIsEditingFile] = useRecoilState(isEditingFileState);
+    const [, setServices] = useRecoilState(servicesState);
 
-    const handleYAMLEditorClose = () => {
-        props.handleYAMLEditorClose();
+    const saveFile = async () => {
+        axios.post("/api/compose", {
+            YAML: editorBody,
+        });
+        await closeEditor();
+    };
+    const closeEditor = async () => {
+        setIsEditingFile(false);
+        const services = await getServices();
+        setServices(services);
     };
 
     return (
         <Dialog
-            open={props.YAMLEditorOpen}
+            open={true}
             onClose={() => {}}
             className="fixed z-10 inset-0 overflow-y-auto"
         >
@@ -69,20 +74,13 @@ function YAMLEditor(props: {
                     <div className="flex w-full justify-end mt-4">
                         <button
                             className="bg-red-700 hover:bg-red-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mx-2"
-                            onClick={() => {
-                                handleYAMLEditorClose();
-                            }}
+                            onClick={closeEditor}
                         >
                             Cancel
                         </button>
                         <button
                             className="bg-indigo-700 hover:bg-indigo-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
-                            onClick={() => {
-                                axios.post("/api/compose", {
-                                    YAML: editorBody,
-                                });
-                                handleYAMLEditorClose();
-                            }}
+                            onClick={saveFile}
                         >
                             Save
                         </button>
@@ -93,4 +91,4 @@ function YAMLEditor(props: {
     );
 }
 
-export default YAMLEditor;
+export default FileEditorModal;

src/components/dashboard/DashboardHeader.tsx

@@ -1,24 +1,47 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { Switch } from "@headlessui/react";
 import { PencilIcon } from "@heroicons/react/solid";
+import axios from "axios";
 import { useEffect, useState } from "react";
+import { useRecoilState } from "recoil";
+import {
+    autoReloadState,
+    isCreatingServiceState,
+    isEditingFileState,
+    loadingFlagsState,
+} from "../../atoms/atoms";
 
-function DashboardHeader(props: {
-    handleAutoReloadClicked: (enabled: boolean) => void;
-    handleNewServiceClicked: () => void;
-    handleRunComposeClicked: () => void;
-    handleYAMLEditorOpen: () => void;
-}) {
-    const [enabled, setEnabled] = useState(false);
+function DashboardHeader() {
+    const [_, setIsCreatingService] = useRecoilState(isCreatingServiceState);
+    const [autoReload, setAutoReload] = useRecoilState(autoReloadState);
+    const [_isEditingFile, setIsEditingFile] =
+        useRecoilState(isEditingFileState);
+
+    const [, setLoadingFlags] = useRecoilState(loadingFlagsState);
 
     useEffect(() => {
         const isEnabled = localStorage.getItem("autoReload") === "true";
-        setEnabled(isEnabled);
+        setAutoReload(isEnabled);
     }, []);
 
-    useEffect(() => {
-        props.handleAutoReloadClicked(enabled);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [enabled]);
+    const newServiceClicked = () => {
+        setIsCreatingService(true);
+    };
+
+    const autoReloadToggled = (enabled: boolean) => {
+        localStorage.setItem("autoReload", enabled.toString());
+        setAutoReload(enabled);
+    };
+
+    const editFileClicked = () => {
+        setIsEditingFile(true);
+    };
+
+    const runComposeClicked = async () => {
+        setLoadingFlags((prev) => ({ ...prev, updatingService: true }));
+        await axios.get("/api/compose/run");
+        setLoadingFlags((prev) => ({ ...prev, updatingService: false }));
+    };
     return (
         <div>
             <header className="bg-white shadow flex justify-between items-center">
@@ -46,9 +69,7 @@ function DashboardHeader(props: {
                             hover:text-white
                             lg:text-base
                             "
-                        onClick={() => {
-                            props.handleNewServiceClicked();
-                        }}
+                        onClick={newServiceClicked}
                     >
                         Add New Service
                     </button>
@@ -63,15 +84,15 @@ function DashboardHeader(props: {
                                 Auto Reload
                             </Switch.Label>
                             <Switch
-                                checked={enabled}
-                                onChange={setEnabled}
+                                checked={autoReload}
+                                onChange={autoReloadToggled}
                                 className={`${
-                                    enabled ? "bg-green-600" : "bg-gray-200"
+                                    autoReload ? "bg-green-600" : "bg-gray-200"
                                 } relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500`}
                             >
                                 <span
                                     className={`${
-                                        enabled
+                                        autoReload
                                             ? "translate-x-6"
                                             : "translate-x-1"
                                     } inline-block w-4 h-4 transform bg-white rounded-full transition-transform`}
@@ -100,9 +121,7 @@ function DashboardHeader(props: {
                             items-center
                             justify-center
                             "
-                        onClick={() => {
-                            props.handleYAMLEditorOpen();
-                        }}
+                        onClick={editFileClicked}
                     >
                         <PencilIcon className="w-5 h-5 mr-2" />
                         Edit File
@@ -126,9 +145,7 @@ function DashboardHeader(props: {
                             hover:text-red-800
                             lg:text-base
                             "
-                        onClick={() => {
-                            props.handleRunComposeClicked();
-                        }}
+                        onClick={runComposeClicked}
                     >
                         Run Docker Compose
                     </button>