From 7ac6eab08921560accad93eeb9899ded47e68f83 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 16:24:27 +0545 Subject: [PATCH 01/28] feat(api): Enable cors for localhost:3000 client --- api/index.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/api/index.js b/api/index.js index d84d94a..5f7f93d 100644 --- a/api/index.js +++ b/api/index.js @@ -7,6 +7,15 @@ 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) => { const jobs = await getAsync('github'); From de892ef6453f20de3d45124fb36578e7e8be0322 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 16:25:28 +0545 Subject: [PATCH 02/28] feat(client): Fetch jobs from api --- client/src/App.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/client/src/App.js b/client/src/App.js index 41372e1..2f68dc8 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -3,12 +3,21 @@ import './App.css'; import Jobs from './Jobs'; +const JOB_API_URL = 'http://localhost:5000/jobs'; + const mockJobs = [ {title: 'SME 1', company: 'Facebook'}, {title: 'SME 1', company: 'Google'}, {title: 'SME 1', company: 'Apple'}, ]; +const fetchJobs = async () => { + const res = await fetch(JOB_API_URL); + const json = await res.json(); + + console.log({json}); +}; + function App() { return (
From 1ed7d2a00639b847053f08486c6e6b30dbcde444 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 16:27:15 +0545 Subject: [PATCH 03/28] feat(client): Add the react useEffect to fetch and call update Jobs Remove the mock Data --- client/src/App.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/client/src/App.js b/client/src/App.js index 2f68dc8..12f54b3 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -5,12 +5,6 @@ import Jobs from './Jobs'; const JOB_API_URL = 'http://localhost:5000/jobs'; -const mockJobs = [ - {title: 'SME 1', company: 'Facebook'}, - {title: 'SME 1', company: 'Google'}, - {title: 'SME 1', company: 'Apple'}, -]; - const fetchJobs = async () => { const res = await fetch(JOB_API_URL); const json = await res.json(); @@ -19,9 +13,15 @@ const fetchJobs = async () => { }; function App() { + const [jobList, updateJobs] = React.useState([]); + + React.useEffect(() => { + fetchJobs(); + }, []); + return (
- +
); } From b1c2fc708877691e96e873304a73846b06091320 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 17:03:24 +0545 Subject: [PATCH 04/28] feat(client): Update Jobs on obtaining latest jobs --- client/src/App.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/App.js b/client/src/App.js index 12f54b3..7ad9c70 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -5,18 +5,18 @@ import Jobs from './Jobs'; const JOB_API_URL = 'http://localhost:5000/jobs'; -const fetchJobs = async () => { +const fetchJobs = async updateCb => { const res = await fetch(JOB_API_URL); const json = await res.json(); - console.log({json}); + updateCb(json); }; function App() { const [jobList, updateJobs] = React.useState([]); React.useEffect(() => { - fetchJobs(); + fetchJobs(updateJobs); }, []); return ( From 0ad1053bf5b8846c32f86b0a60d5fec74b95da04 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 17:10:41 +0545 Subject: [PATCH 05/28] feat(job): Apply css to job --- client/src/Job.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/client/src/Job.js b/client/src/Job.js index a63fdb3..54f39e1 100644 --- a/client/src/Job.js +++ b/client/src/Job.js @@ -1,10 +1,11 @@ import React from 'react'; +import {Paper, Typography} from '@material-ui/core'; export default function Job({job}) { return ( -
- {job.title} - {job.company} -
+ + {job.title} + {job.company} + ); } From 1e8a7044cf4ef0bd26d542e00b21c52222d246ac Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 17:15:14 +0545 Subject: [PATCH 06/28] feat(jobs): Modify the header to h1 --- client/src/Jobs.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/src/Jobs.js b/client/src/Jobs.js index b08e6df..2513a7b 100644 --- a/client/src/Jobs.js +++ b/client/src/Jobs.js @@ -6,7 +6,9 @@ import Job from './Job'; export default function Jobs({jobs}) { return (
- Entry Level Software Jobs + + Entry Level Software Jobs + {jobs.map(job => ( ))} From d315bbd0600c50f101270907f8af24786f6f2200 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 17:15:57 +0545 Subject: [PATCH 07/28] feat(job): Add job company and created at --- client/src/App.css | 2 +- client/src/Job.js | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/client/src/App.css b/client/src/App.css index 6cfd7e5..e16edb2 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -31,7 +31,7 @@ .job { width: 80%; display: flex; - justify-content: space-around; + justify-content: space-between; margin: 10px 0; padding: 10px 0; } diff --git a/client/src/Job.js b/client/src/Job.js index 54f39e1..fb42c08 100644 --- a/client/src/Job.js +++ b/client/src/Job.js @@ -4,8 +4,14 @@ import {Paper, Typography} from '@material-ui/core'; export default function Job({job}) { return ( - {job.title} - {job.company} +
+ {job.title} + {job.company} + {job.location} +
+
+ {job.created_at.split(' ').slice(0, 3).join(' ')} +
); } From 7e224c83e01026a5b9e30c245066919c32f178bc Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 17:18:25 +0545 Subject: [PATCH 08/28] feat(job): Add css --- client/src/App.css | 34 ++++------------------------------ client/src/Job.js | 4 ++-- 2 files changed, 6 insertions(+), 32 deletions(-) diff --git a/client/src/App.css b/client/src/App.css index e16edb2..f8e320c 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -1,39 +1,13 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.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; -} - -.App-link { - color: #61dafb; +body { + margin: 20 40px; } .job { width: 80%; display: flex; justify-content: space-between; - margin: 10px 0; - padding: 10px 0; + margin: 20px 0; + padding: 20px 10px; } @keyframes App-logo-spin { diff --git a/client/src/Job.js b/client/src/Job.js index fb42c08..4db44eb 100644 --- a/client/src/Job.js +++ b/client/src/Job.js @@ -5,8 +5,8 @@ export default function Job({job}) { return (
- {job.title} - {job.company} + {job.title} + {job.company} {job.location}
From 6263a435bcf0e8b6bbb624b092a5924d5b592eb8 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 17:25:20 +0545 Subject: [PATCH 09/28] feat: Add materialUI icon package --- client/package.json | 1 + client/yarn.lock | 9 ++++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/client/package.json b/client/package.json index c93adbf..5a69a79 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", diff --git a/client/yarn.lock b/client/yarn.lock index 8a6827b..da80d82 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -1091,6 +1091,13 @@ react-is "^16.8.0" react-transition-group "^4.3.0" +"@material-ui/icons@4.5.1": + version "4.5.1" + resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.5.1.tgz#6963bad139e938702ece85ca43067688018f04f8" + integrity sha512-YZ/BgJbXX4a0gOuKWb30mBaHaoXRqPanlePam83JQPZ/y4kl+3aW0Wv9tlR70hB5EGAkEJGW5m4ktJwMgxQAeA== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/styles@^4.7.1": version "4.7.1" resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.7.1.tgz#48fa70f06441c35e301a9c4b6c825526a97b7a29" @@ -9204,7 +9211,7 @@ serialize-javascript@^1.7.0: resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb" integrity sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A== -serialize-javascript@^2.1.1: +serialize-javascript@^2.1.0: version "2.1.2" resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61" integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ== From 8e78d34ecc2783aef626f0f4d1c4c719d6450a34 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 17:25:33 +0545 Subject: [PATCH 10/28] feat(jobs): Add stepper for pagination --- client/src/Jobs.js | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/client/src/Jobs.js b/client/src/Jobs.js index 2513a7b..4aec0f0 100644 --- a/client/src/Jobs.js +++ b/client/src/Jobs.js @@ -1,9 +1,26 @@ import React from 'react'; import {Typography} from '@material-ui/core'; +import MobileStepper from '@material-ui/core/MobileStepper'; +import Button from '@material-ui/core/Button'; +import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'; +import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'; + import Job from './Job'; export default function Jobs({jobs}) { + const [activeStep, setActiveStep] = React.useState(0); + + const handleNext = () => { + setActiveStep(prevActiveStep => prevActiveStep + 1); + }; + + const handleBack = () => { + setActiveStep(prevActiveStep => prevActiveStep - 1); + }; + + console.log(jobs[0]); + return (
@@ -12,6 +29,24 @@ export default function Jobs({jobs}) { {jobs.map(job => ( ))} + + Next + + + } + backButton={ + + } + />
); } From f03738a98a648778ce572833172bf6730c3bf8ed Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 17:31:00 +0545 Subject: [PATCH 11/28] feat(jobs): Add key to job div --- client/src/Jobs.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/Jobs.js b/client/src/Jobs.js index 4aec0f0..75465bc 100644 --- a/client/src/Jobs.js +++ b/client/src/Jobs.js @@ -26,8 +26,8 @@ export default function Jobs({jobs}) { Entry Level Software Jobs - {jobs.map(job => ( - + {jobs.map((job, i) => ( + ))} Date: Sun, 22 Dec 2019 17:33:28 +0545 Subject: [PATCH 12/28] feat(jobs): Handle the page number and stepper --- client/src/Jobs.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/client/src/Jobs.js b/client/src/Jobs.js index 75465bc..d154afd 100644 --- a/client/src/Jobs.js +++ b/client/src/Jobs.js @@ -9,8 +9,14 @@ import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'; import Job from './Job'; export default function Jobs({jobs}) { + // pagination + const numJobs = jobs.length; + const numPages = Math.ceil(numJobs / 50); const [activeStep, setActiveStep] = React.useState(0); + // step == 0, show 0-49 + // step == 1, show 50-99 + const handleNext = () => { setActiveStep(prevActiveStep => prevActiveStep + 1); }; @@ -29,13 +35,20 @@ export default function Jobs({jobs}) { {jobs.map((job, i) => ( ))} +
+ Page {activeStep + 1} of {numPages} +
+ From ea0ff1e440873aed6b109d32a05390eb85757e4a Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 17:35:15 +0545 Subject: [PATCH 13/28] feat(jobs): Add number of jobs --- client/src/Jobs.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/client/src/Jobs.js b/client/src/Jobs.js index d154afd..888b19d 100644 --- a/client/src/Jobs.js +++ b/client/src/Jobs.js @@ -32,6 +32,9 @@ export default function Jobs({jobs}) { Entry Level Software Jobs + + Found {numJobs} Jobs + {jobs.map((job, i) => ( ))} From d91fe7d6566b8948113e5b49a7ea74adc0cbe84a Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 17:38:03 +0545 Subject: [PATCH 14/28] feat(jobs): Slice to jobs of 50 each --- client/src/Jobs.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/src/Jobs.js b/client/src/Jobs.js index 888b19d..7f5dc40 100644 --- a/client/src/Jobs.js +++ b/client/src/Jobs.js @@ -13,6 +13,7 @@ export default function Jobs({jobs}) { const numJobs = jobs.length; const numPages = Math.ceil(numJobs / 50); const [activeStep, setActiveStep] = React.useState(0); + const jobsOnPage = jobs.slice(activeStep * 50, activeStep * 50 + 50); // step == 0, show 0-49 // step == 1, show 50-99 @@ -35,7 +36,7 @@ export default function Jobs({jobs}) { Found {numJobs} Jobs - {jobs.map((job, i) => ( + {jobsOnPage.map((job, i) => ( ))}
From 89a1a663ecdb841fc9b46ab2d4f404c8ab017738 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 17:39:44 +0545 Subject: [PATCH 15/28] feat(jobs): Add job on hover css --- client/src/App.css | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/client/src/App.css b/client/src/App.css index f8e320c..c8d1849 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -10,11 +10,7 @@ body { padding: 20px 10px; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.job:hover { + cursor: pointer; + color: #666666; } From cd8f77bb7f80a5f96cc03b589dcfbecf9135f425 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 17:54:19 +0545 Subject: [PATCH 16/28] feat(jobs): Add Job Modal - On Click opens the modal - On button click performs action --- client/src/Job.js | 15 ++++++++----- client/src/JobModal.js | 48 ++++++++++++++++++++++++++++++++++++++++++ client/src/Jobs.js | 21 +++++++++++++++++- 3 files changed, 78 insertions(+), 6 deletions(-) create mode 100644 client/src/JobModal.js diff --git a/client/src/Job.js b/client/src/Job.js index 4db44eb..bea03b0 100644 --- a/client/src/Job.js +++ b/client/src/Job.js @@ -1,16 +1,21 @@ import React from 'react'; import {Paper, Typography} from '@material-ui/core'; -export default function Job({job}) { +export default function Job({job, onClick}) { return ( - +
- {job.title} - {job.company} + {job.title} + {job.company} {job.location}
- {job.created_at.split(' ').slice(0, 3).join(' ')} + + {job.created_at + .split(' ') + .slice(0, 3) + .join(' ')} +
); diff --git a/client/src/JobModal.js b/client/src/JobModal.js new file mode 100644 index 0000000..422a77b --- /dev/null +++ b/client/src/JobModal.js @@ -0,0 +1,48 @@ +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 ( +
+ + + {"Use Google's location service?"} + + + + Let Google help apps determine location. This means sending + anonymous location data to Google, even when no apps are running. + + + + + + + +
+ ); +} diff --git a/client/src/Jobs.js b/client/src/Jobs.js index 7f5dc40..48daf6c 100644 --- a/client/src/Jobs.js +++ b/client/src/Jobs.js @@ -7,8 +7,19 @@ import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'; import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'; import Job from './Job'; +import JobModal from './JobModal'; export default function Jobs({jobs}) { + // modal + const [open, setOpen] = React.useState(false); + const [selectedJob, selectJob] = React.useState([]); + const handleClickOpen = () => { + setOpen(true); + }; + const handleClose = () => { + setOpen(false); + }; + // pagination const numJobs = jobs.length; const numPages = Math.ceil(numJobs / 50); @@ -30,6 +41,7 @@ export default function Jobs({jobs}) { return (
+ Entry Level Software Jobs @@ -37,7 +49,14 @@ export default function Jobs({jobs}) { Found {numJobs} Jobs {jobsOnPage.map((job, i) => ( - + { + handleClickOpen(); + selectJob(job); + }} + /> ))}
Page {activeStep + 1} of {numPages} From d585335681b3af1f5bc0d5ba29d3ee99b6d9abc8 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 17:58:34 +0545 Subject: [PATCH 17/28] feat(job): Add company and company logo in modal --- client/src/App.css | 5 +++++ client/src/JobModal.js | 4 +++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/client/src/App.css b/client/src/App.css index c8d1849..4c76311 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -14,3 +14,8 @@ body { cursor: pointer; color: #666666; } + +.detail-logo { + height: 30px; + float: right; +} diff --git a/client/src/JobModal.js b/client/src/JobModal.js index 422a77b..a98048f 100644 --- a/client/src/JobModal.js +++ b/client/src/JobModal.js @@ -26,7 +26,9 @@ export default function JobModal({job, open, handleClose}) { aria-describedby="alert-dialog-slide-description" > - {"Use Google's location service?"} + {job.title} + {job.company} + From 626499d7dcefaf93373fa9b38ff50b3d8b053ec4 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 17:58:58 +0545 Subject: [PATCH 18/28] feat(job): Add description as dangerous html --- client/src/JobModal.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/src/JobModal.js b/client/src/JobModal.js index a98048f..c8b9e5f 100644 --- a/client/src/JobModal.js +++ b/client/src/JobModal.js @@ -32,8 +32,7 @@ export default function JobModal({job, open, handleClose}) { - Let Google help apps determine location. This means sending - anonymous location data to Google, even when no apps are running. +
From 3f3424ab35d5a42bb62bd364fffb2082537edeb9 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 18:03:03 +0545 Subject: [PATCH 19/28] refactor(jobs): Remove the consoele log --- client/src/Jobs.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/client/src/Jobs.js b/client/src/Jobs.js index 48daf6c..b422656 100644 --- a/client/src/Jobs.js +++ b/client/src/Jobs.js @@ -37,8 +37,6 @@ export default function Jobs({jobs}) { setActiveStep(prevActiveStep => prevActiveStep - 1); }; - console.log(jobs[0]); - return (
From 81179fd0ef1b6f5bbd4dca9d48bf38882e11bcec Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 18:03:33 +0545 Subject: [PATCH 20/28] refactor(job): The title and company space --- client/src/JobModal.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/client/src/JobModal.js b/client/src/JobModal.js index c8b9e5f..e9147df 100644 --- a/client/src/JobModal.js +++ b/client/src/JobModal.js @@ -26,14 +26,14 @@ export default function JobModal({job, open, handleClose}) { aria-describedby="alert-dialog-slide-description" > - {job.title} - {job.company} - + {job.title} - {job.company} + - -
- + - + + +
From 3e24713faa5eed7079963412ab86e0996f6a758a Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 18:04:39 +0545 Subject: [PATCH 22/28] feat(job): Open the apply link in different tab --- client/src/JobModal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/JobModal.js b/client/src/JobModal.js index 48a29ef..61ca941 100644 --- a/client/src/JobModal.js +++ b/client/src/JobModal.js @@ -39,7 +39,7 @@ export default function JobModal({job, open, handleClose}) { - + From 637b403df296727b1511394723dfea44c7f4e28b Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 18:20:05 +0545 Subject: [PATCH 23/28] feat(jobs): Scroll to Top on Next or Back --- client/src/Jobs.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/client/src/Jobs.js b/client/src/Jobs.js index b422656..8afdea9 100644 --- a/client/src/Jobs.js +++ b/client/src/Jobs.js @@ -1,6 +1,5 @@ import React from 'react'; import {Typography} from '@material-ui/core'; - import MobileStepper from '@material-ui/core/MobileStepper'; import Button from '@material-ui/core/Button'; import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'; @@ -29,12 +28,22 @@ export default function Jobs({jobs}) { // step == 0, show 0-49 // step == 1, show 50-99 + function scrollToTop() { + const c = document.documentElement.scrollTop || document.body.scrollTop; + if (c > 0) { + window.requestAnimationFrame(scrollToTop); + window.scrollTo(0, c - c / 8); + } + } + const handleNext = () => { setActiveStep(prevActiveStep => prevActiveStep + 1); + scrollToTop(); }; const handleBack = () => { setActiveStep(prevActiveStep => prevActiveStep - 1); + scrollToTop(); }; return ( From 837cd84ce4d848b4b3da58e67ba07665597cd9b7 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 18:29:56 +0545 Subject: [PATCH 24/28] feat(jobs): Apply css to job --- client/src/App.css | 9 +++++++++ client/src/Job.js | 12 +++++++----- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/client/src/App.css b/client/src/App.css index 4c76311..2be5e9f 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -19,3 +19,12 @@ body { height: 30px; float: right; } + +.flex-align-mid { + display: flex; + align-items: center; +} + +.job-title-location { + margin-left: 20px; +} diff --git a/client/src/Job.js b/client/src/Job.js index bea03b0..72e6f06 100644 --- a/client/src/Job.js +++ b/client/src/Job.js @@ -4,12 +4,14 @@ import {Paper, Typography} from '@material-ui/core'; export default function Job({job, onClick}) { return ( -
- {job.title} - {job.company} - {job.location} +
+
+ {job.title} + {job.company} + {job.location} +
-
+
{job.created_at .split(' ') From f6bb3738087b8ba2ba3a9f4ccffbe46cb11ec1c4 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 18:33:01 +0545 Subject: [PATCH 25/28] feat(job): Add fuzzy timestamp for today and yesterday --- client/src/Job.js | 37 ++++++++++++++++++++++++++++++------- 1 file changed, 30 insertions(+), 7 deletions(-) diff --git a/client/src/Job.js b/client/src/Job.js index 72e6f06..2a68cb0 100644 --- a/client/src/Job.js +++ b/client/src/Job.js @@ -1,5 +1,33 @@ import React from 'react'; -import {Paper, Typography} from '@material-ui/core'; +import Paper from '@material-ui/core/Paper'; +import {Typography} from '@material-ui/core'; + +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 ( @@ -12,12 +40,7 @@ export default function Job({job, onClick}) {
- - {job.created_at - .split(' ') - .slice(0, 3) - .join(' ')} - + {makeDate(job.created_at)}
); From 19d77bdb0d5d2ee37e59c2a11d1adbf4bfa2aa73 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 18:38:37 +0545 Subject: [PATCH 26/28] refactor(worker): Remove the function call --- worker/tasks/fetch-github.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/worker/tasks/fetch-github.js b/worker/tasks/fetch-github.js index 191eeda..39a4b2e 100644 --- a/worker/tasks/fetch-github.js +++ b/worker/tasks/fetch-github.js @@ -43,6 +43,4 @@ const fetchGithub = async () => { console.log(successs); }; -fetchGithub(); - module.exports = fetchGithub; From 1b9d088da455f99b899422ff95fd196623730050 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 18:42:31 +0545 Subject: [PATCH 27/28] fix: Handle the security issue --- client/src/JobModal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/JobModal.js b/client/src/JobModal.js index 61ca941..abba91d 100644 --- a/client/src/JobModal.js +++ b/client/src/JobModal.js @@ -39,7 +39,7 @@ export default function JobModal({job, open, handleClose}) { - + From 733c1bc9cb59504fe9dca5332e040a7f9a596a70 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Sun, 22 Dec 2019 18:44:35 +0545 Subject: [PATCH 28/28] refactor: Change the API to api/jobs - Add proxy to API server --- api/index.js | 2 +- client/package.json | 3 ++- client/src/App.js | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/api/index.js b/api/index.js index 5f7f93d..fdf3bc2 100644 --- a/api/index.js +++ b/api/index.js @@ -17,7 +17,7 @@ app.use(function(req, res, 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 5a69a79..8e7f12c 100644 --- a/client/package.json +++ b/client/package.json @@ -21,6 +21,7 @@ "eslintConfig": { "extends": "react-app" }, + "proxy": "http://localhost:5000", "browserslist": { "production": [ ">0.2%", @@ -33,4 +34,4 @@ "last 1 safari version" ] } -} +} \ No newline at end of file diff --git a/client/src/App.js b/client/src/App.js index 7ad9c70..4f30d81 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -3,7 +3,7 @@ import './App.css'; import Jobs from './Jobs'; -const JOB_API_URL = 'http://localhost:5000/jobs'; +const JOB_API_URL = '/api/jobs'; const fetchJobs = async updateCb => { const res = await fetch(JOB_API_URL);