Merge pull request #13 from CatalysmsServerManager/development

Author: niekcandaele

package-lock.json

@@ -10,6 +10,9 @@
   "dependencies": {
     "@craco/craco": "^6.1.1",
     "@material-ui/core": "^4.11.3",
+    "@sentry/react": "^6.16.1",
+    "@sentry/tracing": "^6.16.1",
+    "antd": "^4.18.2",
     "axios": "^0.21.1",
     "faker": "^5.5.3",
     "framer-motion": "^3.10.3",
@@ -23,7 +26,7 @@
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
     "react-redux": "^7.2.2",
-    "react-router-dom": "^6.0.0-beta.0",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "4.0.3",
     "react-sortable-hoc": "^1.11.0",
     "styled-components": "^5.2.1",

package.json

@@ -1,15 +1,20 @@
+import 'antd/dist/antd.css';
+
 import { FC, StrictMode } from 'react';
 import { ThemeProvider } from 'styled-components';
 
 import { Router } from './router';
+import { getServerId, OptionsContext } from './services/optionsContext';
 import { DEFAULT, GlobalStyle } from './styled';
 
 export const App: FC = () => {
   return (
     <StrictMode>
       <ThemeProvider theme={DEFAULT}>
         <GlobalStyle />
-        <Router />
+        <OptionsContext.Provider value={{ serverId: getServerId() }}>
+          <Router />
+        </OptionsContext.Provider>
       </ThemeProvider>
     </StrictMode>
   );

src/App.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  width: 100%;
+  height: 100vh;
+  padding: 2.5%;
+`;
+
+export const ContentContainer: FC = (props) => {
+  return (
+    <Container>
+      {props.children}
+    </Container>
+  );
+};

src/components/ContentContainer.tsx

@@ -6,7 +6,7 @@ import { getData } from '../services/data';
 import { editorOptions } from './Editor/settings';
 
 const EditorContainer = styled.div`
-  height: 100vh;
+  height: 100%;
   width: 100%;
 `;
 

src/components/Data.tsx

@@ -65,14 +65,7 @@ export function setup() {
   });
 }
 
-const initialValue = `{{#if (gt player.role.level 10 )}} 
-pm {{player.steamId}} "Hey {{player.name}} You have the correct role to execute this command";
-{{else}} 
-pm {{player.steamId}} "Sorry, {{player.name}}, you're not allowed to do that";
-{{/if}}
-`;
-
-export const editorOptions = (init = initialValue, extraOptions = {}) => {
+export const editorOptions = (init: string, extraOptions = {}) => {
   return {
     value: init,
     language: CUSTOM_LANGUAGE,

src/components/Editor/settings/index.ts

@@ -1,22 +1,62 @@
-import { FC } from 'react';
+import { Menu, Typography } from 'antd';
+import { FC, useContext } from 'react';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-const Container = styled.div<{ open: boolean }>`
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 250px;
+import { OptionsContext } from '../services/optionsContext';
+
+const { Title } = Typography;
+
+const Container = styled.div`
+  width: 100%;
   height: 100vh;
-  background-color: ${({ theme }) => theme.p};
-  z-index: 1;
 `;
 
-const Content = styled.div``;
+const TitleContainer = styled.div`
+  background-color: ${({ theme }) => theme.p};
+  color: ${({ theme }) => theme.c};
+  height: 5%;
+  width: 100%;
+`;
 
 export const NavBar: FC = () => {
+  const options = useContext(OptionsContext);
+
   return (
-    <Container open={true}>
-      <Content>navbar</Content>
+    <Container>
+
+      <TitleContainer>
+        <Title level={2}>
+          Playground
+        </Title>
+      </TitleContainer>
+
+      <Menu
+        defaultOpenKeys={['sub1']}
+        defaultSelectedKeys={['1']}
+        mode="inline"
+      >
+        <Menu.Item key="editor">
+          <Link to={`/${options.serverId}/playground/editor`}>
+            <span>Editor</span>
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="variables">
+          <Link to={`/${options.serverId}/playground/variables`}>
+            <span>Variables</span>
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="executions">
+          <Link to={`/${options.serverId}/playground/executions`}>
+            <span>Executions</span>
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="settings">
+          <Link to={`/${options.serverId}/playground/settings`}>
+            <span>Settings</span>
+          </Link>
+        </Menu.Item>
+      </Menu>
     </Container>
   );
 };

src/components/Header.tsx

@@ -1,4 +1,3 @@
 export { Output } from './Output';
 export { ExecuteButton } from './ExecuteButton';
 export { NavBar } from './NavBar';
-export { Header } from './Header';

src/components/NavBar.tsx

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    // Get from local storage by key
+    const item = window.localStorage.getItem(key);
+    // Parse stored json or if none return initialValue
+    return item ? JSON.parse(item) : initialValue;
+  });
+
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value: T | ((val: T) => T)) => {
+    // Allow value to be a function so we have same API as useState
+    const valueToStore =
+        value instanceof Function ? value(storedValue) : value;
+      // Save state
+    setStoredValue(valueToStore);
+    // Save to local storage
+    window.localStorage.setItem(key, JSON.stringify(valueToStore));
+  };
+
+  return [storedValue, setValue] as const;
+}