diff --git a/api/index.js b/api/index.js
index d84d94a..fdf3bc2 100644
--- a/api/index.js
+++ b/api/index.js
@@ -7,8 +7,17 @@ const getAsync = promisify(client.get).bind(client);
const app = express();
const port = 5000;
+app.use(function(req, res, next) {
+ res.header('Access-Control-Allow-Origin', 'http://localhost:3000'); // update to match the domain you will make the request from
+ res.header(
+ 'Access-Control-Allow-Headers',
+ 'Origin, X-Requested-With, Content-Type, Accept'
+ );
+ next();
+});
+
app.get('/', (req, res) => res.send('Jobs API!'));
-app.get('/jobs', async (req, res) => {
+app.get('/api/jobs', async (req, res) => {
const jobs = await getAsync('github');
return res.send(jobs);
});
diff --git a/client/package.json b/client/package.json
index c93adbf..8e7f12c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"@material-ui/core": "4.8.0",
+ "@material-ui/icons": "4.5.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
@@ -20,6 +21,7 @@
"eslintConfig": {
"extends": "react-app"
},
+ "proxy": "http://localhost:5000",
"browserslist": {
"production": [
">0.2%",
@@ -32,4 +34,4 @@
"last 1 safari version"
]
}
-}
+}
\ No newline at end of file
diff --git a/client/src/App.css b/client/src/App.css
index 6cfd7e5..2be5e9f 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -1,46 +1,30 @@
-.App {
- text-align: center;
+body {
+ margin: 20 40px;
}
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
+.job {
+ width: 80%;
+ display: flex;
+ justify-content: space-between;
+ margin: 20px 0;
+ padding: 20px 10px;
}
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
+.job:hover {
+ cursor: pointer;
+ color: #666666;
}
-.App-link {
- color: #61dafb;
+.detail-logo {
+ height: 30px;
+ float: right;
}
-.job {
- width: 80%;
+.flex-align-mid {
display: flex;
- justify-content: space-around;
- margin: 10px 0;
- padding: 10px 0;
+ align-items: center;
}
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+.job-title-location {
+ margin-left: 20px;
}
diff --git a/client/src/App.js b/client/src/App.js
index 41372e1..4f30d81 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -3,16 +3,25 @@ import './App.css';
import Jobs from './Jobs';
-const mockJobs = [
- {title: 'SME 1', company: 'Facebook'},
- {title: 'SME 1', company: 'Google'},
- {title: 'SME 1', company: 'Apple'},
-];
+const JOB_API_URL = '/api/jobs';
+
+const fetchJobs = async updateCb => {
+ const res = await fetch(JOB_API_URL);
+ const json = await res.json();
+
+ updateCb(json);
+};
function App() {
+ const [jobList, updateJobs] = React.useState([]);
+
+ React.useEffect(() => {
+ fetchJobs(updateJobs);
+ }, []);
+
return (
-
+
);
}
diff --git a/client/src/Job.js b/client/src/Job.js
index a63fdb3..2a68cb0 100644
--- a/client/src/Job.js
+++ b/client/src/Job.js
@@ -1,10 +1,47 @@
import React from 'react';
+import Paper from '@material-ui/core/Paper';
+import {Typography} from '@material-ui/core';
-export default function Job({job}) {
+const ONE_DAY_MS = 24 * 3600 * 1000;
+
+// returns a date like Fri Jun 14
+function getMDY(ts) {
+ return ts
+ .toDateString()
+ .split(' ')
+ .slice(0, 3)
+ .join(' ');
+}
+
+// makeDate takes a TS and returns a date like Fri Jun 14
+// if it's today or yesterday, it returns that instead
+function makeDate(timestamp) {
+ const date = new Date(timestamp);
+ const dateStr = getMDY(date);
+ const todayStr = getMDY(new Date());
+ const yesterdayStr = getMDY(new Date(Date.now() - ONE_DAY_MS));
+ if (dateStr === todayStr) {
+ return 'today';
+ } else if (dateStr === yesterdayStr) {
+ return 'yesterday';
+ } else {
+ return dateStr;
+ }
+}
+
+export default function Job({job, onClick}) {
return (
-
- {job.title}
- {job.company}
-
+
+
+
+ {job.title}
+ {job.company}
+ {job.location}
+
+
+ {makeDate(job.created_at)}
+
+
);
}
diff --git a/client/src/JobModal.js b/client/src/JobModal.js
new file mode 100644
index 0000000..abba91d
--- /dev/null
+++ b/client/src/JobModal.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Slide from '@material-ui/core/Slide';
+
+const Transition = React.forwardRef(function Transition(props, ref) {
+ return ;
+});
+
+export default function JobModal({job, open, handleClose}) {
+ if (!job.title) {
+ return ;
+ }
+ return (
+
+
+
-
Entry Level Software Jobs
- {jobs.map(job => (
-
+
+
+ Entry Level Software Jobs
+
+
+ Found {numJobs} Jobs
+
+ {jobsOnPage.map((job, i) => (
+
{
+ handleClickOpen();
+ selectJob(job);
+ }}
+ />
))}
+
+ Page {activeStep + 1} of {numPages}
+
+
+ Next
+
+
+ }
+ backButton={
+
+ }
+ />