add add server function

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."
+    }
 }

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."
+    }
 }

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>

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;
   }

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());
     }

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);
+

src/pages/settings.tsx → 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")