From b158a1987935b196eaf124734e71094547048ac4 Mon Sep 17 00:00:00 2001
From: CodeDoctor <wusel905@gmail.com>
Date: Sat, 9 Jan 2021 18:15:15 +0100
Subject: [PATCH] add add server function

---
 public/locales/de/settings.json               |  6 +-
 public/locales/en/settings.json               |  6 +-
 src/App.tsx                                   |  4 +-
 src/models/server.ts                          |  2 +-
 src/pages/courses/index.tsx                   |  1 +
 src/pages/settings/add.tsx                    | 57 +++++++++++++++++++
 src/pages/{settings.tsx => settings/home.tsx} |  2 +-
 7 files changed, 73 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/settings/add.tsx
 rename src/pages/{settings.tsx => settings/home.tsx} (86%)

diff --git a/public/locales/de/settings.json b/public/locales/de/settings.json
index 5fd3b2a7..72e7110d 100644
--- a/public/locales/de/settings.json
+++ b/public/locales/de/settings.json
@@ -1,3 +1,7 @@
 {
-    "settings":"Einstellungen"
+    "settings":"Einstellungen",
+    "add-server":{
+        "title":"Möchten Sie den Server {{name}} hinzufügen?",
+        "body": "Der Server {{name}} mit der URL {{url}} wird auf der Kursseite angezeigt."
+    }
 }
\ No newline at end of file
diff --git a/public/locales/en/settings.json b/public/locales/en/settings.json
index 990dd5cc..932b4b65 100644
--- a/public/locales/en/settings.json
+++ b/public/locales/en/settings.json
@@ -1,3 +1,7 @@
 {
-    "settings":"Settings"
+    "settings":"Settings",
+    "add-server":{
+        "title":"Do you want to add the server {{name}}?",
+        "body": "The server {{name}} with the url {{url}} will displayed on the courses page."
+    }
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index e3266b86..2c9da58e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,8 @@ import {
 } from 'react-router-dom';
 const IndexPage = lazy(() => import('./pages/index'));
 const CoursesRoute = lazy(() => import('./pages/courses/route'));
-const SettingsPage = lazy(() => import('./pages/settings'));
+const SettingsPage = lazy(() => import('./pages/settings/home'));
+const AddServerPage = lazy(() => import('./pages/settings/add'));
 
 
 function App() {
@@ -19,6 +20,7 @@ function App() {
           <Route path="/courses" component={CoursesRoute} />
           <Route exact path="/" component={IndexPage} />
           <Route path="/settings" component={SettingsPage} />
+          <Route path="/add" component={AddServerPage} />
         </Switch>
       </Router>
     </ThemeProvider>
diff --git a/src/models/server.ts b/src/models/server.ts
index 92ab7e29..2a784521 100644
--- a/src/models/server.ts
+++ b/src/models/server.ts
@@ -33,7 +33,7 @@ export default class CoursesServer {
     var currentData = localStorage.getItem('servers');
     var servers = [new CoursesServer({name: 'Dev-Doctor', url: 'https://backend.dev-doctor.cf'})];
     if(currentData != null){
-      servers = JSON.parse(currentData);
+      servers = JSON.parse(currentData).map((server) => new CoursesServer(server));
     }
     return servers;
   }
diff --git a/src/pages/courses/index.tsx b/src/pages/courses/index.tsx
index edb39ac5..2d4f4b18 100644
--- a/src/pages/courses/index.tsx
+++ b/src/pages/courses/index.tsx
@@ -109,6 +109,7 @@ export default function CoursesPage({ server }: ServerProps): ReactElement {
   });
   const getData = async () => {
     var map = new Map<CoursesServer, Course[]>();
+    console.log(servers);
     for (const server of servers) {
       map.set(server, await server.fetchCourses());
     }
diff --git a/src/pages/settings/add.tsx b/src/pages/settings/add.tsx
new file mode 100644
index 00000000..92f2b93e
--- /dev/null
+++ b/src/pages/settings/add.tsx
@@ -0,0 +1,57 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core'
+import React, { ReactElement } from 'react'
+import { Trans, useTranslation } from 'react-i18next';
+import { RouteComponentProps, useLocation, withRouter } from 'react-router-dom';
+import IndexPage from '..'
+import CoursesServer from '../../models/server';
+
+interface Props extends RouteComponentProps {   
+}
+function useQuery() {
+  return new URLSearchParams(useLocation().search);
+}
+
+
+export function AddServerPage(props: Props): ReactElement {
+    let query = useQuery();
+    const handleClose = () => {
+        props.history.push('/');
+    };
+    if(CoursesServer.servers.find((server) => server.url === query.get('url')))
+        handleClose();
+    const { t } = useTranslation('settings');
+    var servers = CoursesServer.servers;
+    var server = new CoursesServer({url: query.get('url'), name: query.get('name')});
+    servers.push(server);
+    return (
+        <div>
+        <Dialog
+          open={true}
+          onClose={handleClose}
+          aria-labelledby="alert-dialog-title"
+          aria-describedby="alert-dialog-description"
+        >
+          <DialogTitle id="alert-dialog-title"><Trans t={t} i18nKey="add-server.title" values={{name: server.name, url: server.url}} /></DialogTitle>
+          <DialogContent>
+            <DialogContentText id="alert-dialog-description">
+            <Trans t={t} i18nKey="add-server.body" values={{name: server.name, url: server.url}} />
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleClose} color="primary">
+              Disagree
+            </Button>
+            <Button onClick={() => {
+                CoursesServer.servers = servers;
+                handleClose();
+            }} color="primary" autoFocus>
+              Agree
+            </Button>
+          </DialogActions>
+        </Dialog>
+            <IndexPage />
+        </div>
+    )
+}
+export default withRouter(AddServerPage);
+
diff --git a/src/pages/settings.tsx b/src/pages/settings/home.tsx
similarity index 86%
rename from src/pages/settings.tsx
rename to src/pages/settings/home.tsx
index 33f93d16..4527a054 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings/home.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import { useTranslation } from "react-i18next";
-import MyAppBar from '../components/appbar'
+import MyAppBar from '../../components/appbar';
 
 export default function SettingsPage(): ReactElement {
     const {t} = useTranslation("settings")