Added functionality to config pages

package.json

@@ -4,28 +4,28 @@
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/axios": "^0.14.0",
-    "@types/jest": "^29.4.0",
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.27",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.35",
     "@types/react-burger-menu": "^2.8.3",
-    "@types/react-dom": "^18.0.10",
+    "@types/react-dom": "^18.0.11",
     "@types/styled-components": "^5.1.26",
-    "axios": "^1.3.2",
-    "eslint": "^8.33.0",
+    "axios": "^1.3.5",
+    "eslint": "^8.38.0",
     "react": "^18.2.0",
     "react-burger-menu": "^3.0.9",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.7.1",
-    "react-router": "^6.8.0",
-    "react-router-dom": "^6.8.0",
-    "react-scripts": "^5.0.1",
-    "styled-components": "^5.3.6",
-    "typescript": "^4.9.4",
+    "react-icons": "^4.8.1-snapshot.2",
+    "react-router": "^6.10.0",
+    "react-router-dom": "^6.10.0",
+    "react-scripts": "^5.1.0-next.14",
+    "styled-components": "^6.0.0-beta.14",
+    "typescript": "^4.9.5",
     "universal-cookie": "^4.0.4",
-    "web-vitals": "^3.1.1"
+    "web-vitals": "^3.3.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -51,4 +51,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/components/AppBar.tsx

@@ -1,34 +1,32 @@
-import {AppBarStyle, AppBarTitle} from "../utils/styles";
-import {GuildContext} from "../utils/context/GuildContext";
-import React, {useContext} from "react";
-import {Navigate} from "react-router";
+import { AppBarStyle, AppBarTitle } from "../utils/styles";
+import { GuildContext } from "../utils/context/GuildContext";
+import React, { useContext } from "react";
+import { Navigate } from "react-router";
 
 export const AppBar = () => {
-    const {guild} = useContext(GuildContext);
+  const { guild } = useContext(GuildContext);
 
-    if (guild === undefined) {
-        return <Navigate replace to="/menu"/>
-    } else {
-        try {
-            return (
-                <AppBarStyle>
-                    <AppBarTitle/>
-                    <AppBarTitle>
-                        Configuring {guild.name}
-                    </AppBarTitle>
-                    <img
-                        src={guild.icon}
-                        height={55}
-                        width={55}
-                        style={{display: "block", borderRadius: "50%"}}
-                        alt={guild.name + " icon"}
-                    />
-                </AppBarStyle>
-            )
-        } catch (error) {
-            console.error("Failed to load guild icon", error);
-            alert("Failed to load guild icon. Please try again later.")
-            return null;
-        }
+  if (guild === undefined) {
+    return <Navigate replace to="/menu" />;
+  } else {
+    try {
+      return (
+        <AppBarStyle>
+          <AppBarTitle />
+          <AppBarTitle>Configuring {guild.name}</AppBarTitle>
+          <img
+            src={guild.icon}
+            height={55}
+            width={55}
+            style={{ display: "block", borderRadius: "50%" }}
+            alt={guild.name + " icon"}
+          />
+        </AppBarStyle>
+      );
+    } catch (error) {
+      console.error("Failed to load guild icon", error);
+      alert("Failed to load guild icon. Please try again later.");
+      return null;
     }
-};
+  }
+};

src/components/GuildMenuItem.tsx

@@ -1,26 +1,28 @@
-import {GuildIcon, GuildMenuStyle} from "../utils/styles";
+import { GuildIcon, GuildMenuStyle } from "../utils/styles";
 
 type props = {
-    guild: {
-        id: string,
-        name: string,
-        icon: string,
-    }
-}
+  guild: {
+    id: string;
+    name: string;
+    icon: string;
+  };
+};
 
-export const GuildMenuItem = ({guild}: props) => {
-    guild.icon = getIcon(guild.id, guild.icon)
+export const GuildMenuItem = ({ guild }: props) => {
+  guild.icon = getIcon(guild.id, guild.icon);
 
-    return <GuildMenuStyle>
-        <GuildIcon src={guild.icon} alt={guild.name} width={50} height={50}/>
-        <p>{guild.name}</p>
+  return (
+    <GuildMenuStyle>
+      <GuildIcon src={guild.icon} alt={guild.name} width={50} height={50} />
+      <p>{guild.name}</p>
     </GuildMenuStyle>
-}
+  );
+};
 
 export function getIcon(id: string, icon: string) {
-    if (icon === null) {
-        return "https://cdn.discordapp.com/embed/avatars/0.png";
-    } else {
-        return "https://cdn.discordapp.com/icons/" + id + "/" + icon + ".png";
-    }
-}
+  if (icon === null) {
+    return "https://cdn.discordapp.com/embed/avatars/0.png";
+  } else {
+    return "https://cdn.discordapp.com/icons/" + id + "/" + icon + ".png";
+  }
+}

src/components/Setting.tsx

@@ -0,0 +1,126 @@
+import {Button, CustomSelect, Flex} from "../utils/styles";
+import React, {Component} from "react";
+
+interface SettingProps<T> {
+    id: string;
+    validators?: [(value: T) => boolean];
+}
+
+abstract class Setting<T, P extends SettingProps<T> = SettingProps<T>> extends Component<P> {
+
+  public state = {
+    value: null
+  }
+
+  protected constructor(
+    id: string,
+    validators: [(value: T) => boolean],
+    extraProps?: any
+  ) {
+    super({id: id, validators: validators, ...extraProps});
+  }
+
+  render() {
+    return this.getDisplay();
+  }
+
+  protected setValue(value: T) {
+    this.setState({value: value});
+  }
+
+  abstract getDisplay(): any;
+}
+
+export class BooleanSetting extends Setting<boolean> {
+  getDisplay(): any {
+    return (
+        <>
+          <section>
+            <div>
+              <label>Current status:</label>
+            </div>
+            <CustomSelect>
+              <select
+                id={this.props.id}
+                value={this.state.value ? "Enabled" : "Disabled"}
+                onChange={(e) => {
+                  if (e.target.value === "Enabled") {
+                    this.setValue(true)
+                  } else {
+                    this.setValue(false)
+                  }
+                }}
+              >
+                <option disabled selected>
+                  Choose a status
+                </option>
+                <option value="Enabled">Enabled</option>
+                <option value="Disabled">Disabled</option>
+              </select>
+            </CustomSelect>
+          </section>
+          <Flex justifyContent={"flex-end"}>
+            <Button variant={"secondary"} style={{ marginRight: "0.625em" }}>
+              Reset
+            </Button>
+            <Button variant={"primary"}>
+              Save
+            </Button>
+          </Flex>
+        </>
+      )
+  }
+}
+
+interface DropdownProps<T> extends SettingProps<T> {
+  options: T[];
+}
+
+export class DropdownSetting<T> extends Setting<T, DropdownProps<T>> {
+
+  constructor(
+    id: string,
+    validators: [(value: T) => boolean],
+    options: T[]
+  ) {
+    super(id, validators, {options: options});
+  }
+
+  getDisplay(): any {
+    return (
+        <>
+          <section>
+            <div>
+              <label>Current status:</label>
+            </div>
+            <CustomSelect>
+              <select
+                  id={this.props.id}
+                  value={this.state.value ? "Enabled" : "Disabled"}
+                  onChange={(e) => {
+                    if ((this.props as any).options.includes(e.target.value as T)) {
+                      this.setValue(e.target.value as T)
+                    }
+                  }}
+              >
+                <option disabled selected>
+                  Choose a status
+                </option>
+                {this.props.options.map((option) => {
+                  return <option key={option as string} value={option as string}>{option as string}</option>
+                })}
+              </select>
+            </CustomSelect>
+          </section>
+          <Flex justifyContent={"flex-end"}>
+            <Button variant={"secondary"} style={{ marginRight: "0.625em" }}>
+              Reset
+            </Button>
+            <Button variant={"primary"}>
+              Save
+            </Button>
+          </Flex>
+        </>
+    )
+  }
+}

src/components/SideBar.tsx

@@ -1,23 +1,37 @@
-import {fallDown as Menu} from 'react-burger-menu'
-import "../utils/styles/sidebar.css"
-import {useContext} from "react";
-import {GuildContext} from "../utils/context/GuildContext";
-import {useNavigate} from "react-router";
+import { fallDown as Menu } from "react-burger-menu";
+import "../utils/styles/sidebar.css";
+import { useContext } from "react";
+import { GuildContext } from "../utils/context/GuildContext";
+import { useNavigate } from "react-router";
 
 export const Sidebar = () => {
-    const {guild} = useContext(GuildContext);
-    const navigate = useNavigate()
+  const { guild } = useContext(GuildContext);
+  const navigate = useNavigate();
 
-    const handleClick = (path: string) => {
-        navigate(path)
-    }
+  const handleClick = (path: string) => {
+    navigate(path);
+  };
 
-    return (
-        <Menu>
-            <a className="Dashboard" onClick={() => handleClick(`/dashboard`)}>Dashboard</a>
-            <a className="moderation"  onClick={() => handleClick(`/dashboard/moderation`)}>Moderation</a>
-            <a className="meta" onClick={() => handleClick(`/dashboard/meta`)}>Meta</a>
-            <a className="messages" onClick={() => handleClick(`/dashboard/messages`)}>Join/Leave</a>
-        </Menu>
-    );
-}
+  return (
+    <Menu>
+      <a className="Dashboard" onClick={() => handleClick(`/dashboard`)}>
+        Dashboard
+      </a>
+      <a
+        className="moderation"
+        onClick={() => handleClick(`/dashboard/moderation`)}
+      >
+        Moderation
+      </a>
+      <a className="meta" onClick={() => handleClick(`/dashboard/meta`)}>
+        Meta
+      </a>
+      <a
+        className="messages"
+        onClick={() => handleClick(`/dashboard/messages`)}
+      >
+        Join/Leave
+      </a>
+    </Menu>
+  );
+};

src/components/Status.tsx

@@ -0,0 +1,48 @@
+import { CustomSelect, Flex, Button } from "../utils/styles";
+
+export const Status = (
+  statusId: string,
+  valueStatus: boolean,
+  saveFunction: (id: string, status: boolean) => void
+) => {
+  const save = () => {
+    saveFunction(statusId, valueStatus);
+  };
+
+  return (
+    <>
+      <section>
+        <div>
+          <label>Current status:</label>
+        </div>
+        <CustomSelect>
+          <select
+            id={statusId}
+            value={valueStatus ? "Enabled" : "Disabled"}
+            onChange={(e) => {
+              if (e.target.value === "Enabled") {
+                valueStatus = true;
+              } else {
+                valueStatus = false;
+              }
+            }}
+          >
+            <option disabled selected>
+              Choose a status
+            </option>
+            <option value="Enabled">Enabled</option>
+            <option value="Disabled">Disabled</option>
+          </select>
+        </CustomSelect>
+      </section>
+      <Flex justifyContent={"flex-end"}>
+        <Button variant={"secondary"} style={{ marginRight: "0.625em" }}>
+          Reset
+        </Button>
+        <Button variant={"primary"} onClick={save}>
+          Save
+        </Button>
+      </Flex>
+    </>
+  );
+};