Skip to content

Commit

Permalink
cleanups
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vitallyz
Vitallyz committed Mar 30, 2022
1 parent af3d722 commit b23fc19
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 112 deletions.
143 changes: 65 additions & 78 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,17 +51,13 @@ function App() {
// console.log("Did not find data for id: ", activeKey)
activeKeyID = response.data[0].id;
}

setActiveKey(response.data.filter(key => key.id == activeKeyID)[0]);

})
}

useEffect(() => {
// console.log("Loading page, APIKeys: ", APIKeys)
getActiveKeyFromDB();


}, []);

function updateKey(key) {
Expand All @@ -74,19 +70,16 @@ function App() {
}

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 => {
Expand Down Expand Up @@ -124,12 +117,8 @@ function App() {
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";
Expand All @@ -148,7 +137,8 @@ function App() {
let data = {};
let headers = "";

if(activeKeyIsFaulty){
// prevent from infinit loop showing error modal alert when failed to grapb the messages table
if (activeKeyIsFaulty) {
return;
}

Expand Down Expand Up @@ -212,72 +202,69 @@ function App() {
function showErrorAlert() {
setAlertErrorShow(true)
}

function showSuccessAlert() {
setAlertSuccessShow(true)
}
return (
<>
<Modal
size="sm"
show={alertErrorShowShow}
onHide={() => setAlertErrorShow(false)}
aria-labelledby="error-modal"
className="error-modal"
>
<Modal.Header closeButton>
<Modal.Title id="error-modal-title">
Failed
</Modal.Title>
</Modal.Header>
<Modal.Body>Check your connection and API keys</Modal.Body>
</Modal>
<Modal
size="sm"
show={alertSuccessShow}
onHide={() => setAlertSuccessShow(false)}
aria-labelledby="success-modal"
className="success-modal"
>
<Modal.Header closeButton>
<Modal.Title id="success-modal-title">
Success
</Modal.Title>
</Modal.Header>
<Modal.Body>All done.</Modal.Body>
</Modal>

<Container
style={{
width: "800px",
display: "block",
justifyContent: "center",
alignItems: "center",
}}
>

<Navbar bg="light" variant="light" >
<Container>
{/* <Navbar.Brand href="/">SMSGlobal</Navbar.Brand> */}
<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>



<Routes >
<Route path="/" element={<Settings activeKey={activeKey} APIKeys={APIKeys} updateActiveKey={updateKey} addAPIKey={addAPIKey} deleteKeyFromDB={deleteKey} />} />
<Route path="settings" element={<Settings activeKey={activeKey} APIKeys={APIKeys} updateActiveKey={updateKey} addAPIKey={addAPIKey} deleteKeyFromDB={deleteKey} />} />
<Route path="sendsms" element={<SendSMS sendSMSMessage={handleRequestSendSMSMessage} />} />
<Route path="report" element={<Report activeKey={activeKey} requestSMSData={handleRequestSMSData} smsData={smsData} />} />
</Routes>
</Container>
</>
);
}

export default App;
return (
<>
<Modal
size="sm"
show={alertErrorShowShow}
onHide={() => setAlertErrorShow(false)}
aria-labelledby="error-modal"
className="error-modal"
>
<Modal.Header closeButton>
<Modal.Title id="error-modal-title">
Failed
</Modal.Title>
</Modal.Header>
<Modal.Body>Check your connection and API keys</Modal.Body>
</Modal>
<Modal
size="sm"
show={alertSuccessShow}
onHide={() => setAlertSuccessShow(false)}
aria-labelledby="success-modal"
className="success-modal"
>
<Modal.Header closeButton>
<Modal.Title id="success-modal-title">
Success
</Modal.Title>
</Modal.Header>
<Modal.Body>All done.</Modal.Body>
</Modal>

<Container
style={{
width: "800px",
display: "block",
justifyContent: "center",
alignItems: "center",
}}
>
<Navbar bg="light" variant="light" >
<Container>
{/* <Navbar.Brand href="/">SMSGlobal</Navbar.Brand> */}
<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>

<Routes >
<Route path="/" element={<Settings activeKey={activeKey} APIKeys={APIKeys} updateActiveKey={updateKey} addAPIKey={addAPIKey} deleteKeyFromDB={deleteKey} />} />
<Route path="settings" element={<Settings activeKey={activeKey} APIKeys={APIKeys} updateActiveKey={updateKey} addAPIKey={addAPIKey} deleteKeyFromDB={deleteKey} />} />
<Route path="sendsms" element={<SendSMS sendSMSMessage={handleRequestSendSMSMessage} />} />
<Route path="report" element={<Report activeKey={activeKey} requestSMSData={handleRequestSMSData} smsData={smsData} />} />
</Routes>
</Container>
</>
);
}

export default App;
22 changes: 10 additions & 12 deletions src/components/sendsms.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,26 @@ import { Form, Button, Container } from "react-bootstrap";

export default function SendSMS({ sendSMSMessage }) {

function handleChange(element){
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){
if (messageLength <= 160) {
message = `${messageLength}/160 used`;
} else {
message = `A multiple of <strong>${Math.ceil(messageLength/160)}</strong> messages`;
message = `A multiple of <strong>${Math.ceil(messageLength / 160)}</strong> messages`;
}
statusElement.innerHTML = message

statusElement.innerHTML = message
}

function handleSubmit(element){
function handleSubmit(element) {
element.preventDefault()
console.log("We are trying to send SMS using these data: ", element)
// console.log("We are trying to send SMS using these data: ", element)
sendSMSMessage(element);
}



return (
<><Container
style={{
Expand All @@ -45,12 +43,12 @@ export default function SendSMS({ sendSMSMessage }) {
</Form.Group>

<Form.Group className="mb-3" controlId="formBasicTo">
<Form.Control required type="text" placeholder="To" />
<Form.Control required type="text" placeholder="To" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicTO">
<Form.Control required as="textarea" type="textarea" placeholder="Message" onChange={handleChange}/>
<Form.Control required as="textarea" type="textarea" placeholder="Message" onChange={handleChange} />
<Form.Text className="text-muted" id="charCounter">
0/160 used
0/160 used
</Form.Text>
</Form.Group>

Expand Down
42 changes: 21 additions & 21 deletions src/components/settings.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ import { Form, Button, Container, CloseButton, Card } from 'react-bootstrap';
export default function Settings({ activeKey, APIKeys, updateActiveKey, addAPIKey, deleteKeyFromDB }) {
function handleSubmit(element) {
element.preventDefault();
console.log(element.target[0].value)
// console.log(element.target[0].value)
addAPIKey(element)
}

function deleteKey(event) {
console.log("Deleting from DB api key id: ", event.target.value)
// console.log("Deleting from DB api key id: ", event.target.value)
deleteKeyFromDB(event.target.value)
}

Expand All @@ -24,7 +24,7 @@ export default function Settings({ activeKey, APIKeys, updateActiveKey, addAPIKe
alignItems: "center",
}}>
<Form style={{ width: 400 }} onSubmit={handleSubmit}>

<Form.Group className="mb-3" controlId="formBasicName">
<Form.Label>Add API Key</Form.Label>
<Form.Control type="Name" name="Name" placeholder="Name" />
Expand All @@ -41,24 +41,24 @@ export default function Settings({ activeKey, APIKeys, updateActiveKey, addAPIKe
Add
</Button>
</Form>
<hr style={{ width: 550}}></hr>
<ListGroup style={{ width: 550 }}>
{APIKeys.map((apikey, key) => (<ListGroup.Item key={key}
value={apikey.id}
active={activeKey.id == apikey.id}>
<span style={{ display: "inline-block", width: 400 }}><strong>{apikey.name}:</strong> {apikey.key}</span>
<span style={{ display: "inline-block", width: 80 }}><Button size='sm'
variant='outline-primary'
hidden={(apikey.id == activeKey.id)}
value={apikey.id}
onClick={updateActiveKey}>Select
</Button></span>
<CloseButton hidden={(apikey.id == activeKey.id)}
aria-label="Delete"
alt="Delete Key"
value={apikey.id}
onClick={deleteKey} />
</ListGroup.Item>))}
<hr style={{ width: 550 }}></hr>
<ListGroup style={{ width: 550 }}>
{APIKeys.map((apikey, key) => (<ListGroup.Item key={key}
value={apikey.id}
active={activeKey.id == apikey.id}>
<span style={{ display: "inline-block", width: 400 }}><strong>{apikey.name}:</strong> {apikey.key}</span>
<span style={{ display: "inline-block", width: 80 }}><Button size='sm'
variant='outline-primary'
hidden={(apikey.id == activeKey.id)}
value={apikey.id}
onClick={updateActiveKey}>Select
</Button></span>
<CloseButton hidden={(apikey.id == activeKey.id)}
aria-label="Delete"
alt="Delete Key"
value={apikey.id}
onClick={deleteKey} />
</ListGroup.Item>))}
</ListGroup>
</Container>
</>
Expand Down
2 changes: 1 addition & 1 deletion src/data/db.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,6 @@
}
],
"activekey": {
"id": "29"
"id": "1"
}
}

0 comments on commit b23fc19

Please sign in to comment.