Skip to content

Coding Challenge#9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
damaso92 wants to merge 3 commits into
base:master
Choose a base branch
from
Open

Coding Challenge #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ebf5592
Angela Damaso PR
Mar 30, 2021
4ba89a9
Cleanup console log
damaso92 Mar 30, 2021
7d33490
Update comment
damaso92 Mar 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
821 changes: 785 additions & 36 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"classnames": "^2.2.6",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-redux": "^7.2.0",
Expand Down
47 changes: 26 additions & 21 deletions public/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--

<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Expand All@@ -24,12 +27,13 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<title>React App</title>
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

Expand All@@ -39,5 +43,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
</body>

</html>
119 changes: 119 additions & 0 deletions public/mockData.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
[
{
"billingInfo": null,
"deviceId": 19401,
"deviceType": "Employee Servers",
"displayedTags": [
{
"key": "location",
"value": "LAX2"
},
{
"key": "last_invoice_id",
"value": 326408
}
],
"hasCancellation": false,
"hostname": "",
"ipmiAddress": null,
"ipmiEnabled": false,
"isManaged": false,
"isReload": null,
"lastInvoiceId": 326408,
"location": {
"cage_id": 28,
"facility": "LAX2",
"position": "",
"qr_code": "",
"rack": "Rack 27",
"row_name": "Cage 2"
},
"managedAlertsTotal": 0,
"monitorsTotal": 0,
"monitorsUp": 0,
"name": "Device 3",
"powerStatus": "ON",
"primaryIp": null,
"servicePlan": 0,
"status": "active",
"tags": []
},
{
"billingInfo": null,
"deviceId": 19400,
"deviceType": "Employee Servers",
"displayedTags": [
{
"key": "location",
"value": "DAL1"
},
{
"key": "last_invoice_id",
"value": 326408
}
],
"hasCancellation": false,
"hostname": "",
"ipmiAddress": null,
"ipmiEnabled": false,
"isManaged": false,
"isReload": null,
"lastInvoiceId": 326408,
"location": {
"cage_id": 44,
"facility": "DAL1",
"position": "",
"qr_code": "",
"rack": "Rack 01 A+B",
"row_name": "Row1"
},
"managedAlertsTotal": 0,
"monitorsTotal": 0,
"monitorsUp": 0,
"name": "Device 2",
"powerStatus": "ON",
"primaryIp": null,
"servicePlan": 0,
"status": "active",
"tags": []
},
{
"billingInfo": null,
"deviceId": 19399,
"deviceType": "Employee Servers",
"displayedTags": [
{
"key": "location",
"value": "TPA1"
},
{
"key": "last_invoice_id",
"value": 326408
}
],
"hasCancellation": false,
"hostname": "",
"ipmiAddress": null,
"ipmiEnabled": false,
"isManaged": false,
"isReload": null,
"lastInvoiceId": 326408,
"location": {
"cage_id": 12,
"facility": "TPA1",
"position": "",
"qr_code": "",
"rack": "Rack 1",
"row_name": "All Racks"
},
"managedAlertsTotal": 0,
"monitorsTotal": 0,
"monitorsUp": 0,
"name": "Device 1",
"powerStatus": "ON",
"primaryIp": null,
"servicePlan": 0,
"status": "active",
"tags": []
}
]
47 changes: 40 additions & 7 deletions src/App.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,44 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import StatusCard from './components/StatusCard';
import './index.css';

const App = () => {
const [data, setData] = useState();

useEffect(() => {
fetchData();
}, []);

const fetchData = () => {
fetch('mockData.json', {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}
)
.then((response) => response.json())
.then(data => setData(data));
};

function App() {
return (
<div className="App">
<p>Hello from Hivelocity</p>
</div>
);
}
<>
{!data ? (
<div>Loading.....</div>
) : (
<div className="card-list">
<img className="app-logo" src="https://hivelocity.b-cdn.net/wp-content/uploads/2019/07/logo.svg" alt="Hivelocity Logo"/>
{data
.sort((a, b) => (a.deviceId > b.deviceId) ? 1 : ((b.deviceId > a.deviceId) ? -1 : 0))
.map((devices) => {
return <StatusCard devices={devices} />
})}
</div>
)
}
</>
)
};


export default App;
42 changes: 42 additions & 0 deletions src/components/StatusCard.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
.device-name {
color: #565252;
font-weight: 300;
font-size: 19px;
margin: 0;
}

.status-card {
background-color: #EEEEEE;
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px;
margin-bottom: 20px;
border-radius: 2px;
max-width: 700px; /* 700 pixels wide is a good benchmark for text boxes with substantive text or content */
}

.device-status {
display: flex;
justify-content: space-between;
align-items: center;
color: #94989A;
}

.on {
border-left: 4px solid #57BF6C;
}

.off {
border-left: 4px solid red;
}

.on-icon {
color: #57BF6C;
margin-right: 5px;
}

.off-icon {
color: red;
margin-right: 5px;
}
19 changes: 19 additions & 0 deletions src/components/StatusCard.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
import React from 'react';
import classNames from 'classnames';
import './StatusCard.css';

const StatusCard = props => {
const { name, powerStatus } = props.devices;

return (
<article className={classNames('status-card', powerStatus === 'ON' ? 'on' : 'off')}>
<h2 className="device-name">{name}</h2>
<div className="device-status">
<i className={classNames('fas', 'fa-circle', powerStatus === 'ON' ? 'on-icon' : 'off-icon')}></i>
{powerStatus}
</div>
</article>
)
};

export default StatusCard;
16 changes: 8 additions & 8 deletions src/index.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Lato', sans-serif;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
.card-list {
margin: 20px;
}

.app-logo {
max-width: 300px;
margin: 20px 0;
}
1 change: 0 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Coding Challenge by damaso92 · Pull Request #9 · hivelocity/react-code-challenge · GitHub
Skip to content
Coding Challenge#9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

damaso92
wants to merge
3
commits into

base:master
Choose a base branch

from

 Open


Coding Challenge
#9
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ebf5592

Angela Damaso PR

Mar 30, 2021
4ba89a9

Cleanup console log


damaso92 Mar 30, 2021
7d33490

Update comment


damaso92 Mar 30, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


821 changes: 785 additions & 36 deletions
package-lock.json

View file


Open in desktop


Large diffs are not rendered by default.


1 change: 1 addition & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@
 "@testing-library/jest-dom": "^4.2.4",
 "@testing-library/react": "^9.5.0",
 "@testing-library/user-event": "^7.2.1",
 "classnames": "^2.2.6",
 "react": "^16.13.0",
 "react-dom": "^16.13.0",
 "react-redux": "^7.2.0",
Expand Down

47 changes: 26 additions & 21 deletions
public/index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta
 name="description"
 content="Web site created using create-react-app"
 />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <!--

<head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta name="description" content="Web site created using create-react-app" />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <!--
 manifest.json provides metadata used when your web app is installed on a
 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 -->
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <!--
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
 integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
 crossorigin="anonymous" />
 <!--
 Notice the use of %PUBLIC_URL% in the tags above.
 It will be replaced with the URL of the `public` folder during the build.
 Only files inside the `public` folder can be referenced from the HTML.
Expand All@@ -24,12 +27,13 @@
 work correctly both with client-side routing and a non-root public URL.
 Learn how to configure a non-root public URL by running `npm run build`.
 -->
 <title>React App</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <!--
 <title>React App</title>
</head>

<body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <!--
 This HTML file is a template.
 If you open it directly in the browser, you will see an empty page.

Expand All@@ -39,5 +43,6 @@
 To begin the development, run `npm start` or `yarn start`.
 To create a production bundle, use `npm run build` or `yarn build`.
 -->
 </body>
</html>
</body>

</html>

119 changes: 119 additions & 0 deletions
public/mockData.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
[
 {
 "billingInfo": null,
 "deviceId": 19401,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "LAX2"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 28,
 "facility": "LAX2",
 "position": "",
 "qr_code": "",
 "rack": "Rack 27",
 "row_name": "Cage 2"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 3",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 },
 {
 "billingInfo": null,
 "deviceId": 19400,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "DAL1"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 44,
 "facility": "DAL1",
 "position": "",
 "qr_code": "",
 "rack": "Rack 01 A+B",
 "row_name": "Row1"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 2",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 },
 {
 "billingInfo": null,
 "deviceId": 19399,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "TPA1"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 12,
 "facility": "TPA1",
 "position": "",
 "qr_code": "",
 "rack": "Rack 1",
 "row_name": "All Racks"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 1",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 }
]

47 changes: 40 additions & 7 deletions
src/App.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,44 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import StatusCard from './components/StatusCard';
import './index.css';

const App = () => {
 const [data, setData] = useState();

 useEffect(() => {
 fetchData();
 }, []);

 const fetchData = () => {
 fetch('mockData.json', {
 headers: {
 'Content-Type': 'application/json',
 'Accept': 'application/json'
 }
 }
 )
 .then((response) => response.json())
 .then(data => setData(data));
 };

function App() {
 return (
 <div className="App">
 <p>Hello from Hivelocity</p>
 </div>
 );
}
 <>
 {!data ? (
 <div>Loading.....</div>
 ) : (
 <div className="card-list">
 <img className="app-logo" src="https://hivelocity.b-cdn.net/wp-content/uploads/2019/07/logo.svg" alt="Hivelocity Logo"/>
 {data
 .sort((a, b) => (a.deviceId > b.deviceId) ? 1 : ((b.deviceId > a.deviceId) ? -1 : 0))
 .map((devices) => {
 return <StatusCard devices={devices} />
 })}
 </div>
 )
 }
 </>
 )
};


export default App;

42 changes: 42 additions & 0 deletions
src/components/StatusCard.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
.device-name {
 color: #565252;
 font-weight: 300;
 font-size: 19px;
 margin: 0;
}

.status-card {
 background-color: #EEEEEE;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 25px;
 margin-bottom: 20px;
 border-radius: 2px;
 max-width: 700px; /* 700 pixels wide is a good benchmark for text boxes with substantive text or content */
}

.device-status {
 display: flex;
 justify-content: space-between;
 align-items: center;
 color: #94989A;
}

.on {
 border-left: 4px solid #57BF6C;
}

.off {
 border-left: 4px solid red;
}

.on-icon {
 color: #57BF6C;
 margin-right: 5px;
}

.off-icon {
 color: red;
 margin-right: 5px;
}

19 changes: 19 additions & 0 deletions
src/components/StatusCard.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
import React from 'react';
import classNames from 'classnames';
import './StatusCard.css';

const StatusCard = props => {
 const { name, powerStatus } = props.devices;

 return (
 <article className={classNames('status-card', powerStatus === 'ON' ? 'on' : 'off')}>
 <h2 className="device-name">{name}</h2>
 <div className="device-status">
 <i className={classNames('fas', 'fa-circle', powerStatus === 'ON' ? 'on-icon' : 'off-icon')}></i>
 {powerStatus}
 </div>
 </article>
 )
};

export default StatusCard;

16 changes: 8 additions & 8 deletions
src/index.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
body {
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-family: 'Lato', sans-serif;
}

code {
 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 monospace;
.card-list {
 margin: 20px;
}

.app-logo {
 max-width: 300px;
 margin: 20px 0;
}

1 change: 0 additions & 1 deletion
src/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Coding Challenge by damaso92 · Pull Request #9 · hivelocity/react-code-challenge · GitHub
Skip to content
Coding Challenge#9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

damaso92
wants to merge
3
commits into

base:master
Choose a base branch

from

 Open


Coding Challenge
#9
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ebf5592

Angela Damaso PR

Mar 30, 2021
4ba89a9

Cleanup console log


damaso92 Mar 30, 2021
7d33490

Update comment


damaso92 Mar 30, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


821 changes: 785 additions & 36 deletions
package-lock.json

View file


Open in desktop


Large diffs are not rendered by default.


1 change: 1 addition & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@
 "@testing-library/jest-dom": "^4.2.4",
 "@testing-library/react": "^9.5.0",
 "@testing-library/user-event": "^7.2.1",
 "classnames": "^2.2.6",
 "react": "^16.13.0",
 "react-dom": "^16.13.0",
 "react-redux": "^7.2.0",
Expand Down

47 changes: 26 additions & 21 deletions
public/index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta
 name="description"
 content="Web site created using create-react-app"
 />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <!--

<head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta name="description" content="Web site created using create-react-app" />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <!--
 manifest.json provides metadata used when your web app is installed on a
 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 -->
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <!--
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
 integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
 crossorigin="anonymous" />
 <!--
 Notice the use of %PUBLIC_URL% in the tags above.
 It will be replaced with the URL of the `public` folder during the build.
 Only files inside the `public` folder can be referenced from the HTML.
Expand All@@ -24,12 +27,13 @@
 work correctly both with client-side routing and a non-root public URL.
 Learn how to configure a non-root public URL by running `npm run build`.
 -->
 <title>React App</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <!--
 <title>React App</title>
</head>

<body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <!--
 This HTML file is a template.
 If you open it directly in the browser, you will see an empty page.

Expand All@@ -39,5 +43,6 @@
 To begin the development, run `npm start` or `yarn start`.
 To create a production bundle, use `npm run build` or `yarn build`.
 -->
 </body>
</html>
</body>

</html>

119 changes: 119 additions & 0 deletions
public/mockData.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
[
 {
 "billingInfo": null,
 "deviceId": 19401,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "LAX2"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 28,
 "facility": "LAX2",
 "position": "",
 "qr_code": "",
 "rack": "Rack 27",
 "row_name": "Cage 2"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 3",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 },
 {
 "billingInfo": null,
 "deviceId": 19400,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "DAL1"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 44,
 "facility": "DAL1",
 "position": "",
 "qr_code": "",
 "rack": "Rack 01 A+B",
 "row_name": "Row1"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 2",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 },
 {
 "billingInfo": null,
 "deviceId": 19399,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "TPA1"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 12,
 "facility": "TPA1",
 "position": "",
 "qr_code": "",
 "rack": "Rack 1",
 "row_name": "All Racks"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 1",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 }
]

47 changes: 40 additions & 7 deletions
src/App.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,44 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import StatusCard from './components/StatusCard';
import './index.css';

const App = () => {
 const [data, setData] = useState();

 useEffect(() => {
 fetchData();
 }, []);

 const fetchData = () => {
 fetch('mockData.json', {
 headers: {
 'Content-Type': 'application/json',
 'Accept': 'application/json'
 }
 }
 )
 .then((response) => response.json())
 .then(data => setData(data));
 };

function App() {
 return (
 <div className="App">
 <p>Hello from Hivelocity</p>
 </div>
 );
}
 <>
 {!data ? (
 <div>Loading.....</div>
 ) : (
 <div className="card-list">
 <img className="app-logo" src="https://hivelocity.b-cdn.net/wp-content/uploads/2019/07/logo.svg" alt="Hivelocity Logo"/>
 {data
 .sort((a, b) => (a.deviceId > b.deviceId) ? 1 : ((b.deviceId > a.deviceId) ? -1 : 0))
 .map((devices) => {
 return <StatusCard devices={devices} />
 })}
 </div>
 )
 }
 </>
 )
};


export default App;

42 changes: 42 additions & 0 deletions
src/components/StatusCard.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
.device-name {
 color: #565252;
 font-weight: 300;
 font-size: 19px;
 margin: 0;
}

.status-card {
 background-color: #EEEEEE;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 25px;
 margin-bottom: 20px;
 border-radius: 2px;
 max-width: 700px; /* 700 pixels wide is a good benchmark for text boxes with substantive text or content */
}

.device-status {
 display: flex;
 justify-content: space-between;
 align-items: center;
 color: #94989A;
}

.on {
 border-left: 4px solid #57BF6C;
}

.off {
 border-left: 4px solid red;
}

.on-icon {
 color: #57BF6C;
 margin-right: 5px;
}

.off-icon {
 color: red;
 margin-right: 5px;
}

19 changes: 19 additions & 0 deletions
src/components/StatusCard.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
import React from 'react';
import classNames from 'classnames';
import './StatusCard.css';

const StatusCard = props => {
 const { name, powerStatus } = props.devices;

 return (
 <article className={classNames('status-card', powerStatus === 'ON' ? 'on' : 'off')}>
 <h2 className="device-name">{name}</h2>
 <div className="device-status">
 <i className={classNames('fas', 'fa-circle', powerStatus === 'ON' ? 'on-icon' : 'off-icon')}></i>
 {powerStatus}
 </div>
 </article>
 )
};

export default StatusCard;

16 changes: 8 additions & 8 deletions
src/index.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
body {
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-family: 'Lato', sans-serif;
}

code {
 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 monospace;
.card-list {
 margin: 20px;
}

.app-logo {
 max-width: 300px;
 margin: 20px 0;
}

1 change: 0 additions & 1 deletion
src/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Coding Challenge by damaso92 · Pull Request #9 · hivelocity/react-code-challenge · GitHub
Skip to content
Coding Challenge#9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

damaso92
wants to merge
3
commits into

base:master
Choose a base branch

from

 Open


Coding Challenge
#9
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ebf5592

Angela Damaso PR

Mar 30, 2021
4ba89a9

Cleanup console log


damaso92 Mar 30, 2021
7d33490

Update comment


damaso92 Mar 30, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


821 changes: 785 additions & 36 deletions
package-lock.json

View file


Open in desktop


Large diffs are not rendered by default.


1 change: 1 addition & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@
 "@testing-library/jest-dom": "^4.2.4",
 "@testing-library/react": "^9.5.0",
 "@testing-library/user-event": "^7.2.1",
 "classnames": "^2.2.6",
 "react": "^16.13.0",
 "react-dom": "^16.13.0",
 "react-redux": "^7.2.0",
Expand Down

47 changes: 26 additions & 21 deletions
public/index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta
 name="description"
 content="Web site created using create-react-app"
 />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <!--

<head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta name="description" content="Web site created using create-react-app" />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <!--
 manifest.json provides metadata used when your web app is installed on a
 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 -->
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <!--
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
 integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
 crossorigin="anonymous" />
 <!--
 Notice the use of %PUBLIC_URL% in the tags above.
 It will be replaced with the URL of the `public` folder during the build.
 Only files inside the `public` folder can be referenced from the HTML.
Expand All@@ -24,12 +27,13 @@
 work correctly both with client-side routing and a non-root public URL.
 Learn how to configure a non-root public URL by running `npm run build`.
 -->
 <title>React App</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <!--
 <title>React App</title>
</head>

<body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <!--
 This HTML file is a template.
 If you open it directly in the browser, you will see an empty page.

Expand All@@ -39,5 +43,6 @@
 To begin the development, run `npm start` or `yarn start`.
 To create a production bundle, use `npm run build` or `yarn build`.
 -->
 </body>
</html>
</body>

</html>

119 changes: 119 additions & 0 deletions
public/mockData.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
[
 {
 "billingInfo": null,
 "deviceId": 19401,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "LAX2"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 28,
 "facility": "LAX2",
 "position": "",
 "qr_code": "",
 "rack": "Rack 27",
 "row_name": "Cage 2"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 3",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 },
 {
 "billingInfo": null,
 "deviceId": 19400,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "DAL1"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 44,
 "facility": "DAL1",
 "position": "",
 "qr_code": "",
 "rack": "Rack 01 A+B",
 "row_name": "Row1"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 2",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 },
 {
 "billingInfo": null,
 "deviceId": 19399,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "TPA1"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 12,
 "facility": "TPA1",
 "position": "",
 "qr_code": "",
 "rack": "Rack 1",
 "row_name": "All Racks"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 1",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 }
]

47 changes: 40 additions & 7 deletions
src/App.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,44 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import StatusCard from './components/StatusCard';
import './index.css';

const App = () => {
 const [data, setData] = useState();

 useEffect(() => {
 fetchData();
 }, []);

 const fetchData = () => {
 fetch('mockData.json', {
 headers: {
 'Content-Type': 'application/json',
 'Accept': 'application/json'
 }
 }
 )
 .then((response) => response.json())
 .then(data => setData(data));
 };

function App() {
 return (
 <div className="App">
 <p>Hello from Hivelocity</p>
 </div>
 );
}
 <>
 {!data ? (
 <div>Loading.....</div>
 ) : (
 <div className="card-list">
 <img className="app-logo" src="https://hivelocity.b-cdn.net/wp-content/uploads/2019/07/logo.svg" alt="Hivelocity Logo"/>
 {data
 .sort((a, b) => (a.deviceId > b.deviceId) ? 1 : ((b.deviceId > a.deviceId) ? -1 : 0))
 .map((devices) => {
 return <StatusCard devices={devices} />
 })}
 </div>
 )
 }
 </>
 )
};


export default App;

42 changes: 42 additions & 0 deletions
src/components/StatusCard.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
.device-name {
 color: #565252;
 font-weight: 300;
 font-size: 19px;
 margin: 0;
}

.status-card {
 background-color: #EEEEEE;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 25px;
 margin-bottom: 20px;
 border-radius: 2px;
 max-width: 700px; /* 700 pixels wide is a good benchmark for text boxes with substantive text or content */
}

.device-status {
 display: flex;
 justify-content: space-between;
 align-items: center;
 color: #94989A;
}

.on {
 border-left: 4px solid #57BF6C;
}

.off {
 border-left: 4px solid red;
}

.on-icon {
 color: #57BF6C;
 margin-right: 5px;
}

.off-icon {
 color: red;
 margin-right: 5px;
}

19 changes: 19 additions & 0 deletions
src/components/StatusCard.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
import React from 'react';
import classNames from 'classnames';
import './StatusCard.css';

const StatusCard = props => {
 const { name, powerStatus } = props.devices;

 return (
 <article className={classNames('status-card', powerStatus === 'ON' ? 'on' : 'off')}>
 <h2 className="device-name">{name}</h2>
 <div className="device-status">
 <i className={classNames('fas', 'fa-circle', powerStatus === 'ON' ? 'on-icon' : 'off-icon')}></i>
 {powerStatus}
 </div>
 </article>
 )
};

export default StatusCard;

16 changes: 8 additions & 8 deletions
src/index.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
body {
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-family: 'Lato', sans-serif;
}

code {
 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 monospace;
.card-list {
 margin: 20px;
}

.app-logo {
 max-width: 300px;
 margin: 20px 0;
}

1 change: 0 additions & 1 deletion
src/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Coding Challenge by damaso92 · Pull Request #9 · hivelocity/react-code-challenge · GitHub
Skip to content
Coding Challenge#9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

damaso92
wants to merge
3
commits into

base:master
Choose a base branch

from

 Open


Coding Challenge
#9
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ebf5592

Angela Damaso PR

Mar 30, 2021
4ba89a9

Cleanup console log


damaso92 Mar 30, 2021
7d33490

Update comment


damaso92 Mar 30, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


821 changes: 785 additions & 36 deletions
package-lock.json

View file


Open in desktop


Large diffs are not rendered by default.


1 change: 1 addition & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@
 "@testing-library/jest-dom": "^4.2.4",
 "@testing-library/react": "^9.5.0",
 "@testing-library/user-event": "^7.2.1",
 "classnames": "^2.2.6",
 "react": "^16.13.0",
 "react-dom": "^16.13.0",
 "react-redux": "^7.2.0",
Expand Down

47 changes: 26 additions & 21 deletions
public/index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta
 name="description"
 content="Web site created using create-react-app"
 />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <!--

<head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta name="description" content="Web site created using create-react-app" />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <!--
 manifest.json provides metadata used when your web app is installed on a
 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 -->
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <!--
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
 integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
 crossorigin="anonymous" />
 <!--
 Notice the use of %PUBLIC_URL% in the tags above.
 It will be replaced with the URL of the `public` folder during the build.
 Only files inside the `public` folder can be referenced from the HTML.
Expand All@@ -24,12 +27,13 @@
 work correctly both with client-side routing and a non-root public URL.
 Learn how to configure a non-root public URL by running `npm run build`.
 -->
 <title>React App</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <!--
 <title>React App</title>
</head>

<body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <!--
 This HTML file is a template.
 If you open it directly in the browser, you will see an empty page.

Expand All@@ -39,5 +43,6 @@
 To begin the development, run `npm start` or `yarn start`.
 To create a production bundle, use `npm run build` or `yarn build`.
 -->
 </body>
</html>
</body>

</html>

119 changes: 119 additions & 0 deletions
public/mockData.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
[
 {
 "billingInfo": null,
 "deviceId": 19401,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "LAX2"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 28,
 "facility": "LAX2",
 "position": "",
 "qr_code": "",
 "rack": "Rack 27",
 "row_name": "Cage 2"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 3",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 },
 {
 "billingInfo": null,
 "deviceId": 19400,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "DAL1"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 44,
 "facility": "DAL1",
 "position": "",
 "qr_code": "",
 "rack": "Rack 01 A+B",
 "row_name": "Row1"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 2",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 },
 {
 "billingInfo": null,
 "deviceId": 19399,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "TPA1"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 12,
 "facility": "TPA1",
 "position": "",
 "qr_code": "",
 "rack": "Rack 1",
 "row_name": "All Racks"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 1",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 }
]

47 changes: 40 additions & 7 deletions
src/App.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,44 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import StatusCard from './components/StatusCard';
import './index.css';

const App = () => {
 const [data, setData] = useState();

 useEffect(() => {
 fetchData();
 }, []);

 const fetchData = () => {
 fetch('mockData.json', {
 headers: {
 'Content-Type': 'application/json',
 'Accept': 'application/json'
 }
 }
 )
 .then((response) => response.json())
 .then(data => setData(data));
 };

function App() {
 return (
 <div className="App">
 <p>Hello from Hivelocity</p>
 </div>
 );
}
 <>
 {!data ? (
 <div>Loading.....</div>
 ) : (
 <div className="card-list">
 <img className="app-logo" src="https://hivelocity.b-cdn.net/wp-content/uploads/2019/07/logo.svg" alt="Hivelocity Logo"/>
 {data
 .sort((a, b) => (a.deviceId > b.deviceId) ? 1 : ((b.deviceId > a.deviceId) ? -1 : 0))
 .map((devices) => {
 return <StatusCard devices={devices} />
 })}
 </div>
 )
 }
 </>
 )
};


export default App;

42 changes: 42 additions & 0 deletions
src/components/StatusCard.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
.device-name {
 color: #565252;
 font-weight: 300;
 font-size: 19px;
 margin: 0;
}

.status-card {
 background-color: #EEEEEE;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 25px;
 margin-bottom: 20px;
 border-radius: 2px;
 max-width: 700px; /* 700 pixels wide is a good benchmark for text boxes with substantive text or content */
}

.device-status {
 display: flex;
 justify-content: space-between;
 align-items: center;
 color: #94989A;
}

.on {
 border-left: 4px solid #57BF6C;
}

.off {
 border-left: 4px solid red;
}

.on-icon {
 color: #57BF6C;
 margin-right: 5px;
}

.off-icon {
 color: red;
 margin-right: 5px;
}

19 changes: 19 additions & 0 deletions
src/components/StatusCard.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
import React from 'react';
import classNames from 'classnames';
import './StatusCard.css';

const StatusCard = props => {
 const { name, powerStatus } = props.devices;

 return (
 <article className={classNames('status-card', powerStatus === 'ON' ? 'on' : 'off')}>
 <h2 className="device-name">{name}</h2>
 <div className="device-status">
 <i className={classNames('fas', 'fa-circle', powerStatus === 'ON' ? 'on-icon' : 'off-icon')}></i>
 {powerStatus}
 </div>
 </article>
 )
};

export default StatusCard;

16 changes: 8 additions & 8 deletions
src/index.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
body {
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-family: 'Lato', sans-serif;
}

code {
 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 monospace;
.card-list {
 margin: 20px;
}

.app-logo {
 max-width: 300px;
 margin: 20px 0;
}

1 change: 0 additions & 1 deletion
src/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Coding Challenge by damaso92 · Pull Request #9 · hivelocity/react-code-challenge · GitHub
Skip to content
Coding Challenge#9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

damaso92
wants to merge
3
commits into

base:master
Choose a base branch

from

 Open


Coding Challenge
#9
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ebf5592

Angela Damaso PR

Mar 30, 2021
4ba89a9

Cleanup console log


damaso92 Mar 30, 2021
7d33490

Update comment


damaso92 Mar 30, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


821 changes: 785 additions & 36 deletions
package-lock.json

View file


Open in desktop


Large diffs are not rendered by default.


1 change: 1 addition & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@
 "@testing-library/jest-dom": "^4.2.4",
 "@testing-library/react": "^9.5.0",
 "@testing-library/user-event": "^7.2.1",
 "classnames": "^2.2.6",
 "react": "^16.13.0",
 "react-dom": "^16.13.0",
 "react-redux": "^7.2.0",
Expand Down

47 changes: 26 additions & 21 deletions
public/index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta
 name="description"
 content="Web site created using create-react-app"
 />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <!--

<head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta name="description" content="Web site created using create-react-app" />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <!--
 manifest.json provides metadata used when your web app is installed on a
 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 -->
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <!--
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
 integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
 crossorigin="anonymous" />
 <!--
 Notice the use of %PUBLIC_URL% in the tags above.
 It will be replaced with the URL of the `public` folder during the build.
 Only files inside the `public` folder can be referenced from the HTML.
Expand All@@ -24,12 +27,13 @@
 work correctly both with client-side routing and a non-root public URL.
 Learn how to configure a non-root public URL by running `npm run build`.
 -->
 <title>React App</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <!--
 <title>React App</title>
</head>

<body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <!--
 This HTML file is a template.
 If you open it directly in the browser, you will see an empty page.

Expand All@@ -39,5 +43,6 @@
 To begin the development, run `npm start` or `yarn start`.
 To create a production bundle, use `npm run build` or `yarn build`.
 -->
 </body>
</html>
</body>

</html>

119 changes: 119 additions & 0 deletions
public/mockData.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
[
 {
 "billingInfo": null,
 "deviceId": 19401,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "LAX2"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 28,
 "facility": "LAX2",
 "position": "",
 "qr_code": "",
 "rack": "Rack 27",
 "row_name": "Cage 2"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 3",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 },
 {
 "billingInfo": null,
 "deviceId": 19400,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "DAL1"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 44,
 "facility": "DAL1",
 "position": "",
 "qr_code": "",
 "rack": "Rack 01 A+B",
 "row_name": "Row1"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 2",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 },
 {
 "billingInfo": null,
 "deviceId": 19399,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "TPA1"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 12,
 "facility": "TPA1",
 "position": "",
 "qr_code": "",
 "rack": "Rack 1",
 "row_name": "All Racks"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 1",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 }
]

47 changes: 40 additions & 7 deletions
src/App.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,44 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import StatusCard from './components/StatusCard';
import './index.css';

const App = () => {
 const [data, setData] = useState();

 useEffect(() => {
 fetchData();
 }, []);

 const fetchData = () => {
 fetch('mockData.json', {
 headers: {
 'Content-Type': 'application/json',
 'Accept': 'application/json'
 }
 }
 )
 .then((response) => response.json())
 .then(data => setData(data));
 };

function App() {
 return (
 <div className="App">
 <p>Hello from Hivelocity</p>
 </div>
 );
}
 <>
 {!data ? (
 <div>Loading.....</div>
 ) : (
 <div className="card-list">
 <img className="app-logo" src="https://hivelocity.b-cdn.net/wp-content/uploads/2019/07/logo.svg" alt="Hivelocity Logo"/>
 {data
 .sort((a, b) => (a.deviceId > b.deviceId) ? 1 : ((b.deviceId > a.deviceId) ? -1 : 0))
 .map((devices) => {
 return <StatusCard devices={devices} />
 })}
 </div>
 )
 }
 </>
 )
};


export default App;

42 changes: 42 additions & 0 deletions
src/components/StatusCard.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
.device-name {
 color: #565252;
 font-weight: 300;
 font-size: 19px;
 margin: 0;
}

.status-card {
 background-color: #EEEEEE;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 25px;
 margin-bottom: 20px;
 border-radius: 2px;
 max-width: 700px; /* 700 pixels wide is a good benchmark for text boxes with substantive text or content */
}

.device-status {
 display: flex;
 justify-content: space-between;
 align-items: center;
 color: #94989A;
}

.on {
 border-left: 4px solid #57BF6C;
}

.off {
 border-left: 4px solid red;
}

.on-icon {
 color: #57BF6C;
 margin-right: 5px;
}

.off-icon {
 color: red;
 margin-right: 5px;
}

19 changes: 19 additions & 0 deletions
src/components/StatusCard.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
import React from 'react';
import classNames from 'classnames';
import './StatusCard.css';

const StatusCard = props => {
 const { name, powerStatus } = props.devices;

 return (
 <article className={classNames('status-card', powerStatus === 'ON' ? 'on' : 'off')}>
 <h2 className="device-name">{name}</h2>
 <div className="device-status">
 <i className={classNames('fas', 'fa-circle', powerStatus === 'ON' ? 'on-icon' : 'off-icon')}></i>
 {powerStatus}
 </div>
 </article>
 )
};

export default StatusCard;

16 changes: 8 additions & 8 deletions
src/index.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
body {
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-family: 'Lato', sans-serif;
}

code {
 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 monospace;
.card-list {
 margin: 20px;
}

.app-logo {
 max-width: 300px;
 margin: 20px 0;
}

1 change: 0 additions & 1 deletion
src/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Coding Challenge by damaso92 · Pull Request #9 · hivelocity/react-code-challenge · GitHub
Skip to content
Coding Challenge#9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

damaso92
wants to merge
3
commits into

base:master
Choose a base branch

from

 Open


Coding Challenge
#9
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ebf5592

Angela Damaso PR

Mar 30, 2021
4ba89a9

Cleanup console log


damaso92 Mar 30, 2021
7d33490

Update comment


damaso92 Mar 30, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


821 changes: 785 additions & 36 deletions
package-lock.json

View file


Open in desktop


Large diffs are not rendered by default.


1 change: 1 addition & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@
 "@testing-library/jest-dom": "^4.2.4",
 "@testing-library/react": "^9.5.0",
 "@testing-library/user-event": "^7.2.1",
 "classnames": "^2.2.6",
 "react": "^16.13.0",
 "react-dom": "^16.13.0",
 "react-redux": "^7.2.0",
Expand Down

47 changes: 26 additions & 21 deletions
public/index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta
 name="description"
 content="Web site created using create-react-app"
 />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <!--

<head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta name="description" content="Web site created using create-react-app" />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <!--
 manifest.json provides metadata used when your web app is installed on a
 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 -->
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <!--
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
 integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
 crossorigin="anonymous" />
 <!--
 Notice the use of %PUBLIC_URL% in the tags above.
 It will be replaced with the URL of the `public` folder during the build.
 Only files inside the `public` folder can be referenced from the HTML.
Expand All@@ -24,12 +27,13 @@
 work correctly both with client-side routing and a non-root public URL.
 Learn how to configure a non-root public URL by running `npm run build`.
 -->
 <title>React App</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <!--
 <title>React App</title>
</head>

<body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <!--
 This HTML file is a template.
 If you open it directly in the browser, you will see an empty page.

Expand All@@ -39,5 +43,6 @@
 To begin the development, run `npm start` or `yarn start`.
 To create a production bundle, use `npm run build` or `yarn build`.
 -->
 </body>
</html>
</body>

</html>

119 changes: 119 additions & 0 deletions
public/mockData.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
[
 {
 "billingInfo": null,
 "deviceId": 19401,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "LAX2"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 28,
 "facility": "LAX2",
 "position": "",
 "qr_code": "",
 "rack": "Rack 27",
 "row_name": "Cage 2"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 3",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 },
 {
 "billingInfo": null,
 "deviceId": 19400,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "DAL1"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 44,
 "facility": "DAL1",
 "position": "",
 "qr_code": "",
 "rack": "Rack 01 A+B",
 "row_name": "Row1"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 2",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 },
 {
 "billingInfo": null,
 "deviceId": 19399,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "TPA1"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 12,
 "facility": "TPA1",
 "position": "",
 "qr_code": "",
 "rack": "Rack 1",
 "row_name": "All Racks"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 1",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 }
]

47 changes: 40 additions & 7 deletions
src/App.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,44 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import StatusCard from './components/StatusCard';
import './index.css';

const App = () => {
 const [data, setData] = useState();

 useEffect(() => {
 fetchData();
 }, []);

 const fetchData = () => {
 fetch('mockData.json', {
 headers: {
 'Content-Type': 'application/json',
 'Accept': 'application/json'
 }
 }
 )
 .then((response) => response.json())
 .then(data => setData(data));
 };

function App() {
 return (
 <div className="App">
 <p>Hello from Hivelocity</p>
 </div>
 );
}
 <>
 {!data ? (
 <div>Loading.....</div>
 ) : (
 <div className="card-list">
 <img className="app-logo" src="https://hivelocity.b-cdn.net/wp-content/uploads/2019/07/logo.svg" alt="Hivelocity Logo"/>
 {data
 .sort((a, b) => (a.deviceId > b.deviceId) ? 1 : ((b.deviceId > a.deviceId) ? -1 : 0))
 .map((devices) => {
 return <StatusCard devices={devices} />
 })}
 </div>
 )
 }
 </>
 )
};


export default App;

42 changes: 42 additions & 0 deletions
src/components/StatusCard.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
.device-name {
 color: #565252;
 font-weight: 300;
 font-size: 19px;
 margin: 0;
}

.status-card {
 background-color: #EEEEEE;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 25px;
 margin-bottom: 20px;
 border-radius: 2px;
 max-width: 700px; /* 700 pixels wide is a good benchmark for text boxes with substantive text or content */
}

.device-status {
 display: flex;
 justify-content: space-between;
 align-items: center;
 color: #94989A;
}

.on {
 border-left: 4px solid #57BF6C;
}

.off {
 border-left: 4px solid red;
}

.on-icon {
 color: #57BF6C;
 margin-right: 5px;
}

.off-icon {
 color: red;
 margin-right: 5px;
}

19 changes: 19 additions & 0 deletions
src/components/StatusCard.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
import React from 'react';
import classNames from 'classnames';
import './StatusCard.css';

const StatusCard = props => {
 const { name, powerStatus } = props.devices;

 return (
 <article className={classNames('status-card', powerStatus === 'ON' ? 'on' : 'off')}>
 <h2 className="device-name">{name}</h2>
 <div className="device-status">
 <i className={classNames('fas', 'fa-circle', powerStatus === 'ON' ? 'on-icon' : 'off-icon')}></i>
 {powerStatus}
 </div>
 </article>
 )
};

export default StatusCard;

16 changes: 8 additions & 8 deletions
src/index.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
body {
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-family: 'Lato', sans-serif;
}

code {
 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 monospace;
.card-list {
 margin: 20px;
}

.app-logo {
 max-width: 300px;
 margin: 20px 0;
}

1 change: 0 additions & 1 deletion
src/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Coding Challenge by damaso92 · Pull Request #9 · hivelocity/react-code-challenge · GitHub
Skip to content
Coding Challenge#9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

damaso92
wants to merge
3
commits into

base:master
Choose a base branch

from

 Open


Coding Challenge
#9
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
ebf5592

Angela Damaso PR

Mar 30, 2021
4ba89a9

Cleanup console log


damaso92 Mar 30, 2021
7d33490

Update comment


damaso92 Mar 30, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


821 changes: 785 additions & 36 deletions
package-lock.json

View file


Open in desktop


Large diffs are not rendered by default.


1 change: 1 addition & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@
 "@testing-library/jest-dom": "^4.2.4",
 "@testing-library/react": "^9.5.0",
 "@testing-library/user-event": "^7.2.1",
 "classnames": "^2.2.6",
 "react": "^16.13.0",
 "react-dom": "^16.13.0",
 "react-redux": "^7.2.0",
Expand Down

47 changes: 26 additions & 21 deletions
public/index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta
 name="description"
 content="Web site created using create-react-app"
 />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <!--

<head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta name="description" content="Web site created using create-react-app" />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <!--
 manifest.json provides metadata used when your web app is installed on a
 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 -->
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <!--
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
 integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
 crossorigin="anonymous" />
 <!--
 Notice the use of %PUBLIC_URL% in the tags above.
 It will be replaced with the URL of the `public` folder during the build.
 Only files inside the `public` folder can be referenced from the HTML.
Expand All@@ -24,12 +27,13 @@
 work correctly both with client-side routing and a non-root public URL.
 Learn how to configure a non-root public URL by running `npm run build`.
 -->
 <title>React App</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <!--
 <title>React App</title>
</head>

<body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <!--
 This HTML file is a template.
 If you open it directly in the browser, you will see an empty page.

Expand All@@ -39,5 +43,6 @@
 To begin the development, run `npm start` or `yarn start`.
 To create a production bundle, use `npm run build` or `yarn build`.
 -->
 </body>
</html>
</body>

</html>

119 changes: 119 additions & 0 deletions
public/mockData.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
[
 {
 "billingInfo": null,
 "deviceId": 19401,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "LAX2"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 28,
 "facility": "LAX2",
 "position": "",
 "qr_code": "",
 "rack": "Rack 27",
 "row_name": "Cage 2"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 3",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 },
 {
 "billingInfo": null,
 "deviceId": 19400,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "DAL1"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 44,
 "facility": "DAL1",
 "position": "",
 "qr_code": "",
 "rack": "Rack 01 A+B",
 "row_name": "Row1"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 2",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 },
 {
 "billingInfo": null,
 "deviceId": 19399,
 "deviceType": "Employee Servers",
 "displayedTags": [
 {
 "key": "location",
 "value": "TPA1"
 },
 {
 "key": "last_invoice_id",
 "value": 326408
 }
 ],
 "hasCancellation": false,
 "hostname": "",
 "ipmiAddress": null,
 "ipmiEnabled": false,
 "isManaged": false,
 "isReload": null,
 "lastInvoiceId": 326408,
 "location": {
 "cage_id": 12,
 "facility": "TPA1",
 "position": "",
 "qr_code": "",
 "rack": "Rack 1",
 "row_name": "All Racks"
 },
 "managedAlertsTotal": 0,
 "monitorsTotal": 0,
 "monitorsUp": 0,
 "name": "Device 1",
 "powerStatus": "ON",
 "primaryIp": null,
 "servicePlan": 0,
 "status": "active",
 "tags": []
 }
]

47 changes: 40 additions & 7 deletions
src/App.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,44 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import StatusCard from './components/StatusCard';
import './index.css';

const App = () => {
 const [data, setData] = useState();

 useEffect(() => {
 fetchData();
 }, []);

 const fetchData = () => {
 fetch('mockData.json', {
 headers: {
 'Content-Type': 'application/json',
 'Accept': 'application/json'
 }
 }
 )
 .then((response) => response.json())
 .then(data => setData(data));
 };

function App() {
 return (
 <div className="App">
 <p>Hello from Hivelocity</p>
 </div>
 );
}
 <>
 {!data ? (
 <div>Loading.....</div>
 ) : (
 <div className="card-list">
 <img className="app-logo" src="https://hivelocity.b-cdn.net/wp-content/uploads/2019/07/logo.svg" alt="Hivelocity Logo"/>
 {data
 .sort((a, b) => (a.deviceId > b.deviceId) ? 1 : ((b.deviceId > a.deviceId) ? -1 : 0))
 .map((devices) => {
 return <StatusCard devices={devices} />
 })}
 </div>
 )
 }
 </>
 )
};


export default App;

42 changes: 42 additions & 0 deletions
src/components/StatusCard.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
.device-name {
 color: #565252;
 font-weight: 300;
 font-size: 19px;
 margin: 0;
}

.status-card {
 background-color: #EEEEEE;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 25px;
 margin-bottom: 20px;
 border-radius: 2px;
 max-width: 700px; /* 700 pixels wide is a good benchmark for text boxes with substantive text or content */
}

.device-status {
 display: flex;
 justify-content: space-between;
 align-items: center;
 color: #94989A;
}

.on {
 border-left: 4px solid #57BF6C;
}

.off {
 border-left: 4px solid red;
}

.on-icon {
 color: #57BF6C;
 margin-right: 5px;
}

.off-icon {
 color: red;
 margin-right: 5px;
}

19 changes: 19 additions & 0 deletions
src/components/StatusCard.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
import React from 'react';
import classNames from 'classnames';
import './StatusCard.css';

const StatusCard = props => {
 const { name, powerStatus } = props.devices;

 return (
 <article className={classNames('status-card', powerStatus === 'ON' ? 'on' : 'off')}>
 <h2 className="device-name">{name}</h2>
 <div className="device-status">
 <i className={classNames('fas', 'fa-circle', powerStatus === 'ON' ? 'on-icon' : 'off-icon')}></i>
 {powerStatus}
 </div>
 </article>
 )
};

export default StatusCard;

16 changes: 8 additions & 8 deletions
src/index.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
body {
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-family: 'Lato', sans-serif;
}

code {
 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 monospace;
.card-list {
 margin: 20px;
}

.app-logo {
 max-width: 300px;
 margin: 20px 0;
}

1 change: 0 additions & 1 deletion
src/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

Expand Down