added report page and partially send sms page

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.26.1",
     "bootstrap": "^5.1.3",
+    "crypto-js": "^4.1.1",
     "json-server": "^0.17.0",
     "react": "^17.0.2",
     "react-bootstrap": "^2.2.2",

src/App.js

@@ -2,6 +2,7 @@ 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 Crypto from 'crypto-js';
 
 import './App.css';
 import Settings from "./components/settings";
@@ -10,18 +11,18 @@ import Report from "./components/report";
 
 const DB_ADDRESS = "http://localhost:3020/";
 
+const uri = "/v2/sms/";
+const host = "api.smsglobal.com";
+const port = 80;
+
 
 function App() {
   let activeKeyID;
 
   const [activeKey, setActiveKey] = useState();
   const [APIKeys, setAPIKeys] = useState();
 
-  function getReportData() {
-
-  }
-
-
+  const [smsData, setSMSData] = useState();
 
   function getActiveKeyFromDB() {
     axios.get(DB_ADDRESS + 'activekey')
@@ -51,7 +52,10 @@ function App() {
   }
 
   useEffect(() => {
+    console.log("Loading page, APIKeys: ", APIKeys)
     getActiveKeyFromDB();
+
+
   }, []);
 
   function updateKey(key) {
@@ -97,25 +101,83 @@ function App() {
       })
   }
 
+  function getAuthHeader(requestMethod) {
+    console.log("trying to construct Auth Header. ActiveKey is: ", activeKey)
+    let id = activeKey.key;
+    let ts = Math.floor(new Date().getTime() / 1000);
+    let nonce = getNonce(10);
+    let method = requestMethod;
+
+    let strings = [ts, nonce, method, uri, host, port];
+    let macString = strings.join('\n') + "\n\n";
+    console.log("macString is: ", macString);
+    let macHash = Crypto.HmacSHA256(macString, activeKey.secret);
+    let macBase64 = Crypto.enc.Base64.stringify(macHash);
+
+    return `MAC id="${id}", ts="${ts}", nonce="${nonce}", mac="${macBase64}"`;
+
+  }
+
+
+
+
+  function getNonce(length) {
+    let nonce = "";
+    let charOptions = "qazwsxedcrfvtgbyhnujmikolpQAZWSXEDCRFVTGBYHNUJMIKOLP1234567890";
+    for(let i = 0; i < length; i++) {
+      nonce += charOptions.charAt(Math.floor(Math.random() * charOptions.length));
+    }
+    console.log("Nonce this time is: ", nonce);
+    return nonce;
+  }
+
+  function handleRequestSMSData () {
+    console.log("Requesting SMS data from server! with Key and Secret: ", activeKey.key, activeKey.secret)
+    let method = "GET";
+    let authHeader = getAuthHeader(method);
+    console.log("authHeader is: ", authHeader)
+    let data = {};
+    let headers = "";
+
+    axios({
+      url: `http://${host}${uri}`,
+      method,
+      data,
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        Authorization: authHeader,
+        ...headers
+      }
+    })
+    .then(response => {
+      console.log("Successfully got SMS data from server: ", response.data.messages)
+      setSMSData(response.data.messages)
+    })
+    .catch(error => {
+      console.log("Error getting SMS Data from server", error);
+    });
+  }
+
 
   return (
     <>
       <Container
         style={{
-          width: "600px",
+          width: "800px",
           display: "block",
           justifyContent: "center",
           alignItems: "center",
         }}
       >
 
-        <Navbar bg="light" variant="light">
+        <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 className="me-auto" defaultActiveKey="/settings">
+              <Nav.Link  as={Link} to="/settings">Setings</Nav.Link>
+              <Nav.Link as={Link} to="/sendsms">Send SMS</Nav.Link>
+              <Nav.Link as={Link} to="/report">Report</Nav.Link>
             </Nav>
           </Container>
         </Navbar>
@@ -126,7 +188,7 @@ function App() {
           {/* <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 />} />
+          <Route path="report" element={<Report activeKey={activeKey} requestSMSData={handleRequestSMSData} smsData={smsData}/>} />
         </Routes>
       </Container>
     </>

src/components/report.jsx

@@ -1,8 +1,45 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { Table } from "react-bootstrap";
 
-export default function Report() {
-    return(
-        <div>testing</div>
-    );
+export default function Report({ activeKey, requestSMSData, smsData }) {
+
+    useEffect(() => {
+        if (activeKey && !smsData) {
+            requestSMSData();
+        }
+    });
+
+    if (smsData) {
+        return (
+            <>
+                <Table striped bordered hover>
+                    <thead>
+                        <tr>
+                            <th>Time</th>
+                            <th>From</th>
+                            <th>To</th>
+                            <th>Message</th>
+                            <th>Status</th>
+                        </tr>
+                    </thead>
+                    <tbody>{smsData.map((dataRow, key) => (
+                        <tr key={key}>
+                            <td>{dataRow.dateTime}</td>
+                            <td>{dataRow.origin}</td>
+                            <td>{dataRow.destination}</td>
+                            <td>{dataRow.message}</td>
+                            <td>{dataRow.status}</td>
+                        </tr>))}
+                    </tbody>
+                </Table>
+            </>
+
+        );
+    } else {
+        return (
+            <div> still rendering reports page</div>
+        );
+
+    }
 
 }

src/components/sendsms.jsx

@@ -1,8 +1,58 @@
 import React from "react";
+import { Form, Button, Container } from "react-bootstrap";
 
-export default function SendSMS() {
-    return(
-        <div>testing send sms</div>
+export default function SendSMS({ sendSMSRequest }) {
+
+    function handleChange(element){
+        // console.log(element.target.value.length)
+        let messageLength = element.target.value.length
+        let statusElement = document.getElementById("charCounter")
+        let message;
+        if(messageLength < 160){
+            message = `${messageLength}/160 used`;
+        } else {
+            message = `A multiple of <strong>${Math.ceil(messageLength/160)}</strong> messages`;
+        }
+
+        statusElement.innerHTML = message 
+    }
+
+
+    return (
+        <><Container
+            style={{
+                width: "800px",
+                display: "block",
+                justifyContent: "center",
+                alignItems: "center",
+            }}>
+            <Form style={{
+                width: "400px",
+                display: "block",
+                justifyContent: "center",
+                alignItems: "center",
+            }}>
+                <Form.Group className="mb-3" controlId="formBasicFrom">
+                    <Form.Label>Use this form to send SMS</Form.Label>
+                    <Form.Control required type="text" placeholder="from" />
+                </Form.Group>
+
+                <Form.Group className="mb-3" controlId="formBasicTo">
+                    <Form.Control type="text" placeholder="To" />
+                </Form.Group>
+                <Form.Group className="mb-3" controlId="formBasicTO">
+                    <Form.Control as="textarea" type="textarea" placeholder="Message" onChange={handleChange}/>
+                    <Form.Text className="text-muted" id="charCounter">
+                        We will count your characters
+                    </Form.Text>
+                </Form.Group>
+
+                <Button variant="primary" type="submit">
+                    Send
+                </Button>
+            </Form>
+        </Container>
+        </>
     );
 
 }

src/components/settings.jsx

@@ -18,13 +18,13 @@ export default function Settings({ activeKey, APIKeys, updateActiveKey, addAPIKe
         return (
             <><Container
                 style={{
-                    width: "600px",
+                    width: "800px",
                     display: "block",
                     justifyContent: "center",
                     alignItems: "center",
                 }}>
                 <Form style={{ width: 400 }} onSubmit={handleSubmit}>
-                    <br></br>
+
                     <Form.Group className="mb-3" controlId="formBasicName">
                         <Form.Label>Add API Key</Form.Label>
                         <Form.Control type="Name" name="Name" placeholder="Name" />
@@ -41,7 +41,7 @@ export default function Settings({ activeKey, APIKeys, updateActiveKey, addAPIKe
                         Add
                     </Button>
                 </Form>
-                <br></br>
+                <hr style={{ width: 550}}></hr>
                 <ListGroup  style={{ width: 550 }}>
                                 {APIKeys.map((apikey, key) => (<ListGroup.Item key={key} 
                                                                                 value={apikey.id} 

src/data/db.json

@@ -3,35 +3,29 @@
     {
       "id": 1,
       "name": "vitallyz",
-      "key": "e63cfac24de1a9c04e7d00dccf934b",
-      "secret": "80137fe54d971fd49db35366a"
+      "key": "e63ca9c04e7d00dccfaa934bfac24de1",
+      "secret": "80137fe54d971fd49dd289121b35366a"
     },
     {
       "id": 4,
       "name": "john",
       "key": "e63f7d00dccfaa93cacfaa934b",
       "secret": "80137fe54d971fd49dd289121b35366a"
     },
-    {
-      "id": 3,
-      "name": "zilber",
-      "key": "e63ca9c04e7ddccfaa93004bfac47d00",
-      "secret": "80137fe54d971fd49dd289121b35366a"
-    },
     {
       "name": "34653 ",
       "key": "34563456345",
       "secret": "346345634563",
       "id": 27
     },
     {
-      "name": "sdfg dfg",
-      "key": "sdfg sdfg ",
-      "secret": "sdfg sdfg ",
-      "id": 28
+      "name": "vitally",
+      "key": "34p[952-3094825b- 0",
+      "secret": "e;lkj s;lejg;slkdfjglsierjk",
+      "id": 29
     }
   ],
   "activekey": {
-    "id": "28"
+    "id": "1"
   }
 }