settings page done

Vitallyz · Mar 29, 2022 · ca21c3f · ca21c3f
1 parent 1339d1d
commit ca21c3f
Show file tree

Hide file tree

Showing 9 changed files with 369 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,10 +6,13 @@
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.26.1",
+    "bootstrap": "^5.1.3",
     "json-server": "^0.17.0",
     "react": "^17.0.2",
     "react-bootstrap": "^2.2.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },
@@ -18,7 +21,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "json:server": "json-server --watch --port 3009 src/data/db.json"
+    "json:server": "json-server --watch --port 3020 src/data/db.json"
   },
   "eslintConfig": {
     "extends": [

diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,12 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+  crossorigin="anonymous"
+/>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -39,5 +45,16 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>
+
+<script
+  src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
+  crossorigin></script>
+
+<script
+  src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
+  crossorigin></script>
+
+<script>var Alert = ReactBootstrap.Alert;</script>
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,135 @@
-import logo from './logo.svg';
+import { Navbar, Nav, Container } from "react-bootstrap";
+import { Link, Route, Routes } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+
 import './App.css';
+import Settings from "./components/settings";
+import SendSMS from "./components/sendsms";
+import Report from "./components/report";
+
+const DB_ADDRESS = "http://localhost:3020/";
+
 
 function App() {
+  let activeKeyID;
+
+  const [activeKey, setActiveKey] = useState();
+  const [APIKeys, setAPIKeys] = useState();
+
+  function getReportData() {
+
+  }
+
+
+
+  function getActiveKeyFromDB() {
+    axios.get(DB_ADDRESS + 'activekey')
+      .then(response => {
+        activeKeyID = response.data.id;
+        getKeyDataFromDB()
+      })
+      .catch(error => {
+        console.log("Error grabing API Keys data from JSON server: ", error);
+      })
+  }
+
+  function getKeyDataFromDB() {
+    return axios.get(DB_ADDRESS + 'apikeys')
+      .then(response => {
+        setAPIKeys(response.data);
+        console.log("Response from db: ", response.data)
+        console.log("Active Key ID: ", activeKeyID)
+        if (!activeKeyID) {
+          console.log("Did not find data for id: ", activeKey)
+          activeKeyID = response.data[0].id;
+        }
+
+        setActiveKey(response.data.filter(key => key.id == activeKeyID)[0]);
+
+      })
+  }
+
+  useEffect(() => {
+    getActiveKeyFromDB();
+  }, []);
+
+  function updateKey(key) {
+    console.log("Updating key in database. Key is: ", key.target.value);
+    axios.patch(DB_ADDRESS + "activekey", { id: key.target.value })
+    activeKeyID = key.target.value;
+    getKeyDataFromDB();
+  }
+
+  function addAPIKey(event) {
+
+    let apiKeyObject = {
+      name: event.target[0].value,
+      key: event.target[1].value,
+      secret: event.target[2].value
+    }
+
+    console.log("Adding new key for name and apikey: ", apiKeyObject);
+
+    axios.post(DB_ADDRESS + 'apikeys', apiKeyObject)
+      .then(response => {
+        console.log("Response from db insert, id: ", response.data.id);
+        // setActiveKey(response.data.id);
+        console.log("Setting active key to: ", response.data.id)
+        axios.patch(DB_ADDRESS + "activekey", { id: response.data.id })
+          .then(response => {
+            console.log("Finished Setting active key and got response: ", response)
+            setActiveKey(response.data.id)
+            getActiveKeyFromDB()
+          })
+
+      })
+      .catch(error => {
+        console.log("Error ADDING API Key data to JSON server: ", error);
+      });
+  }
+
+  function deleteKey(key_id) {
+    axios.delete(DB_ADDRESS + "apikeys/" + key_id)
+      .then(response => {
+        console.log("deleted, response data is: ", response);
+        getActiveKeyFromDB();
+      })
+  }
+
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <Container
+        style={{
+          width: "600px",
+          display: "block",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+
+        <Navbar bg="light" variant="light">
+          <Container>
+            {/* <Navbar.Brand href="/">SMSGlobal</Navbar.Brand> */}
+            <Nav className="me-auto">
+              <Nav.Link href="/settings">Setings</Nav.Link>
+              <Nav.Link href="/sendsms">Send SMS</Nav.Link>
+              <Nav.Link href="/report">Report</Nav.Link>
+            </Nav>
+          </Container>
+        </Navbar>
+
+
+
+        <Routes >
+          {/* <Route path="/" element={<Settings />} /> */}
+          <Route path="settings" element={<Settings activeKey={activeKey} APIKeys={APIKeys} updateActiveKey={updateKey} addAPIKey={addAPIKey} deleteKeyFromDB={deleteKey} />} />
+          <Route path="sendsms" element={<SendSMS />} />
+          <Route path="report" element={<Report />} />
+        </Routes>
+      </Container>
+    </>
   );
 }
 

diff --git a/src/components/report.jsx b/src/components/report.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+
+export default function Report() {
+    return(
+        <div>testing</div>
+    );
+
+}
diff --git a/src/components/sendsms.jsx b/src/components/sendsms.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+
+export default function SendSMS() {
+    return(
+        <div>testing send sms</div>
+    );
+
+}