From 36648158da39e0fcc9178c870a0d9a36de97aae1 Mon Sep 17 00:00:00 2001 From: padmajabhol Date: Sat, 23 Jul 2022 01:15:25 +0530 Subject: [PATCH 1/4] Component to display individual journals and their policies --- src/components/JournalDetails/Details.js | 26 ++++++++++++++++++++++++ src/components/JournalDetails/styles.js | 7 +++++++ src/components/Journals/JournalList.js | 4 ++++ src/components/Journals/useFetch.js | 18 ++++++++++++---- src/components/index.js | 3 ++- src/config/content/navbar.js | 5 +++-- src/index.js | 5 ++++- 7 files changed, 60 insertions(+), 8 deletions(-) create mode 100644 src/components/JournalDetails/Details.js create mode 100644 src/components/JournalDetails/styles.js diff --git a/src/components/JournalDetails/Details.js b/src/components/JournalDetails/Details.js new file mode 100644 index 0000000..a820467 --- /dev/null +++ b/src/components/JournalDetails/Details.js @@ -0,0 +1,26 @@ +/* eslint-disable no-unused-vars */ +/* eslint-disable prefer-template */ +import React from 'react' +import { useParams } from 'react-router'; +import useFetch from '../Journals/useFetch'; +import { Container } from './styles'; + + +function Details() { + const { id } = useParams(); + const { journalFetch: indv } = useFetch('http://localhost:8000/journals/' + id); + + return ( + +

+ Journal Detail - { id } + { indv && ( +

{ indv.title }

+ )} + + + + ) +} + +export default Details; \ No newline at end of file diff --git a/src/components/JournalDetails/styles.js b/src/components/JournalDetails/styles.js new file mode 100644 index 0000000..90aa688 --- /dev/null +++ b/src/components/JournalDetails/styles.js @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +export const Container = styled.div` +min-height: 100vh; +padding-top: 10%; + +`; \ No newline at end of file diff --git a/src/components/Journals/JournalList.js b/src/components/Journals/JournalList.js index 80c56f5..7fef596 100644 --- a/src/components/Journals/JournalList.js +++ b/src/components/Journals/JournalList.js @@ -4,6 +4,7 @@ /* eslint-disable arrow-body-style */ /* eslint-disable react/function-component-definition */ import React from "react"; +import { Link } from "react-router-dom"; import { Box, Preview, Head2, Authors, Head3, Description } from './styles'; const JournalList = ({journalFetch}) => { @@ -12,6 +13,7 @@ const JournalList = ({journalFetch}) => { {journalFetch.map((blog) => ( { blog.journaltype } + { blog.title } {blog.authors.map((author) => ( @@ -23,6 +25,8 @@ const JournalList = ({journalFetch}) => { ISSN: {blog.issn} First Published: {blog.published} + + ))} diff --git a/src/components/Journals/useFetch.js b/src/components/Journals/useFetch.js index 0829896..25dbada 100644 --- a/src/components/Journals/useFetch.js +++ b/src/components/Journals/useFetch.js @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ /* eslint-disable arrow-body-style */ import { useState, useEffect } from "react"; @@ -7,7 +8,9 @@ const useFetch = (url) => { const [error, setError] = useState(null); useEffect(() => { - fetch(url) + const abortCont = new AbortController(); + + fetch(url, { signal: abortCont.signal }) .then(res => { if(!res.ok){ throw Error("could not fetch the data for that resource"); @@ -20,9 +23,16 @@ const useFetch = (url) => { setError(null); }) .catch(err => { - setError(err.message); - setIsPending(false); - }) + if( err.name === 'AbortError'){ + console.log('fetch aborted'); + } else { + setError(err.message); + setIsPending(false); + } + + }); + + return () => abortCont.abort(); }, [url]); return { journalFetch, isPending, error }; diff --git a/src/components/index.js b/src/components/index.js index 9caa261..42ba8ba 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -5,4 +5,5 @@ export { default as Auth } from './Authentication/Signup/Form'; export { default as Login } from './Authentication/Login/LoginForm'; export { default as Header } from './Landing/Header/Header'; export { default as LandingSection } from './Landing/LandingSection/LandingSection'; -export { default as Journals } from './Journals/Journal'; \ No newline at end of file +export { default as Journals } from './Journals/Journal'; +export { default as JournalDetails} from './JournalDetails/Details'; \ No newline at end of file diff --git a/src/config/content/navbar.js b/src/config/content/navbar.js index 928ba38..adcffe7 100644 --- a/src/config/content/navbar.js +++ b/src/config/content/navbar.js @@ -15,7 +15,7 @@ export default { link: '/home', }, { - id: 'journals', + id: 'journal', name: 'Journals', link: '/journal', }, @@ -38,6 +38,7 @@ export default { id: 'login', name: null, link: '/login', - } + }, + ], }; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 7b8c6a8..75dfd8e 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,7 @@ import './index.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'; import { Journal, Contact, Manifesto, Home } from './pages'; -import { Footer, Auth, Header, Login } from './components'; +import { Footer, Auth, Header, Login, JournalDetails } from './components'; import Navbar from './components/marginals/Navbar/Navbar'; function App() { @@ -16,6 +16,9 @@ function App() { + + + From 75251f9019f4ba3e59109b85b6d9027815a77fb0 Mon Sep 17 00:00:00 2001 From: padmajabhol Date: Sun, 24 Jul 2022 02:33:48 +0530 Subject: [PATCH 2/4] add additional json values --- data/db.json | 130 +++++++++++++++++++++-- src/components/JournalDetails/Details.js | 13 ++- 2 files changed, 132 insertions(+), 11 deletions(-) diff --git a/data/db.json b/data/db.json index 27cbe10..d605ea7 100644 --- a/data/db.json +++ b/data/db.json @@ -9,7 +9,18 @@ "journaltype": "RESEARCH ARTICLE", "topic": "General Computing", "published": "12 July 2022", - "issn": "issn-615-682456" + "issn": "issn-615-682456", + "updated": "16th Aug 2022", + "link": "https://doi.org/10.1002/agg2.20287", + "policies": { + "policy": "Policy 1", + "dataavail": true, + "datashared": true, + "peerreview": true, + "enforced": "Yes - before application", + "enforcedevidence": "Random String" + + } }, { "id": 2, @@ -20,7 +31,18 @@ "journaltype": "RESEARCH ARTICLE", "topic": "General Computing", "published": "12 July 2022", - "issn": "issn-615-682543" + "issn": "issn-615-682543", + "updated": "16th Aug 2022", + "link": "https://doi.org/10.1002/agg2.20287", + "policies": { + "policy": "Policy 1", + "dataavail": true, + "datashared": true, + "peerreview": true, + "enforced": "Yes - before application", + "enforcedevidence": "Random String" + + } }, { "id": 3, @@ -31,7 +53,18 @@ "journaltype": "AI Journal", "topic": "Computer Science", "published": "23 July 2022", - "issn": "issn-615-892543" + "issn": "issn-615-892543", + "updated": "16th Aug 2022", + "link": "https://doi.org/10.1002/agg2.20287", + "policies": { + "policy": "Policy 1", + "dataavail": true, + "datashared": true, + "peerreview": true, + "enforced": "Yes - before application", + "enforcedevidence": "Random String" + + } }, { "id": 4, @@ -42,7 +75,18 @@ "journaltype": "Book", "topic": "Networking / LINUX", "published": "29 January 2008", - "issn": "issn-615-892643" + "issn": "issn-615-892643", + "updated": "16th Aug 2022", + "link": "https://doi.org/10.1002/agg2.20287", + "policies": { + "policy": "Policy 1", + "dataavail": true, + "datashared": true, + "peerreview": true, + "enforced": "Yes - before application", + "enforcedevidence": "Random String" + + } }, { "id": 5, @@ -53,7 +97,18 @@ "journaltype": "RESEARCH ARTICLE", "topic": "General Computing", "published": "12 July 2022", - "issn": "issn-615-682456" + "issn": "issn-615-682456", + "updated": "16th Aug 2022", + "link": "https://doi.org/10.1002/agg2.20287", + "policies": { + "policy": "Policy 1", + "dataavail": true, + "datashared": true, + "peerreview": true, + "enforced": "Yes - before application", + "enforcedevidence": "Random String" + + } }, { "id": 6, @@ -64,7 +119,18 @@ "journaltype": "RESEARCH ARTICLE", "topic": "General Computing", "published": "12 July 2022", - "issn": "issn-615-682543" + "issn": "issn-615-682543", + "updated": "16th Aug 2022", + "link": "https://doi.org/10.1002/agg2.20287", + "policies": { + "policy": "Policy 1", + "dataavail": true, + "datashared": true, + "peerreview": true, + "enforced": "Yes - before application", + "enforcedevidence": "Random String" + + } }, { "id": 7, @@ -75,7 +141,18 @@ "journaltype": "Book", "topic": "Networking / LINUX", "published": "29 January 2008", - "issn": "issn-615-892643" + "issn": "issn-615-892643", + "updated": "16th Aug 2022", + "link": "https://doi.org/10.1002/agg2.20287", + "policies": { + "policy": "Policy 1", + "dataavail": true, + "datashared": true, + "peerreview": true, + "enforced": "Yes - before application", + "enforcedevidence": "Random String" + + } }, { "id": 8, @@ -86,7 +163,18 @@ "journaltype": "RESEARCH ARTICLE", "topic": "General Computing", "published": "12 July 2022", - "issn": "issn-615-682456" + "issn": "issn-615-682456", + "updated": "16th Aug 2022", + "link": "https://doi.org/10.1002/agg2.20287", + "policies": { + "policy": "Policy 1", + "dataavail": true, + "datashared": true, + "peerreview": true, + "enforced": "Yes - before application", + "enforcedevidence": "Random String" + + } }, { "id": 9, @@ -97,7 +185,18 @@ "journaltype": "AI Journal", "topic": "Computer Science", "published": "23 July 2022", - "issn": "issn-615-892543" + "issn": "issn-615-892543", + "updated": "16th Aug 2022", + "link": "https://doi.org/10.1002/agg2.20287", + "policies": { + "policy": "Policy 1", + "dataavail": true, + "datashared": true, + "peerreview": true, + "enforced": "Yes - before application", + "enforcedevidence": "Random String" + + } }, { "id": 10, @@ -108,7 +207,18 @@ "journaltype": "RESEARCH ARTICLE", "topic": "General Computing", "published": "12 July 2022", - "issn": "issn-615-682456" + "issn": "issn-615-682456", + "updated": "16th Aug 2022", + "link": "https://doi.org/10.1002/agg2.20287", + "policies": { + "policy": "Policy 1", + "dataavail": true, + "datashared": true, + "peerreview": true, + "enforced": "Yes - before application", + "enforcedevidence": "Random String" + + } } ] } \ No newline at end of file diff --git a/src/components/JournalDetails/Details.js b/src/components/JournalDetails/Details.js index a820467..b617c98 100644 --- a/src/components/JournalDetails/Details.js +++ b/src/components/JournalDetails/Details.js @@ -15,7 +15,18 @@ function Details() {

Journal Detail - { id } { indv && ( -

{ indv.title }

+ <> +

{indv.title}

+
+

Policy

+

POLICY TYPE: {indv.policies.policy}

+

DATA AVAILABILITY STATEMENT PUBLISHED: {indv.policies.dataavail}

+

DATA SHARED: {indv.policies.datashared}

+

DATA PEER REVIEWED: {indv.policies.peerreview}

+

ENFORCED: {indv.policies.enforced}

+

ENFORCED EVIDENCE: {indv.policies.enforcedevidence}

+
+ )} From 2b208a40b5fd8bd7202d3268e8ac900c758efc4e Mon Sep 17 00:00:00 2001 From: padmajabhol Date: Wed, 27 Jul 2022 00:56:38 +0530 Subject: [PATCH 3/4] add css for individual policies --- data/db.json | 7 +- src/components/JournalDetails/Details.js | 107 +++++++++++++++++--- src/components/JournalDetails/styles.js | 121 ++++++++++++++++++++++- src/components/Journals/JournalList.js | 4 +- src/config/content/navbar.js | 5 + src/index.css | 2 +- src/index.js | 6 +- 7 files changed, 227 insertions(+), 25 deletions(-) diff --git a/data/db.json b/data/db.json index d605ea7..0c8c630 100644 --- a/data/db.json +++ b/data/db.json @@ -15,7 +15,7 @@ "policies": { "policy": "Policy 1", "dataavail": true, - "datashared": true, + "datashared": false, "peerreview": true, "enforced": "Yes - before application", "enforcedevidence": "Random String" @@ -34,9 +34,10 @@ "issn": "issn-615-682543", "updated": "16th Aug 2022", "link": "https://doi.org/10.1002/agg2.20287", + "policies": { "policy": "Policy 1", - "dataavail": true, + "dataavail": false, "datashared": true, "peerreview": true, "enforced": "Yes - before application", @@ -60,7 +61,7 @@ "policy": "Policy 1", "dataavail": true, "datashared": true, - "peerreview": true, + "peerreview": false, "enforced": "Yes - before application", "enforcedevidence": "Random String" diff --git a/src/components/JournalDetails/Details.js b/src/components/JournalDetails/Details.js index b617c98..8fef172 100644 --- a/src/components/JournalDetails/Details.js +++ b/src/components/JournalDetails/Details.js @@ -1,34 +1,113 @@ +/* eslint-disable react/jsx-key */ +/* eslint-disable max-len */ /* eslint-disable no-unused-vars */ /* eslint-disable prefer-template */ import React from 'react' import { useParams } from 'react-router'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import {faBookmark, faSquareCheck, faRectangleXmark, faLink} from '@fortawesome/free-solid-svg-icons'; import useFetch from '../Journals/useFetch'; -import { Container } from './styles'; +import { Container, Head, PolicyContainer, Title, Subhead, Subhead2, Box, List, Que, Misc, UpdateContainer, Icon } from './styles'; +import { Authors, Head3 } from '../Journals/styles'; function Details() { const { id } = useParams(); const { journalFetch: indv } = useFetch('http://localhost:8000/journals/' + id); + const poli = [ + { + ques: 'POLICY TYPE:', + ans: indv && indv.policies.policy, + }, + { + ques: 'DATA AVAILABILITY STATEMENT PUBLISHED:', + ans: indv && indv.policies.dataavail ? : , + }, + { + ques: "DATA SHARED:", + ans: indv && indv.policies.datashared ? : + }, + { + ques: "DATA PEER REVIEWED:", + ans: indv && indv.policies.peerreview ? : + }, + { + ques: "ENFORCED:", + ans: indv && indv.policies.enforced, + }, + { + ques: "ENFORCED EVIDENCE:", + ans: indv && indv.policies.enforcedevidence, + }, + ]; + + const misc = [ + { + ques: "CREATED AT:", + ans: indv && indv.published, + }, + { + ques: "UPDATED AT:", + ans: indv && indv.updated, + }, + { + ques: "CREATED BY:", + ans: indv && indv.authors.map((author) => ( +
+ {author} +
+ )) + }, + ] + return ( -

- Journal Detail - { id } + + Journal policies + { indv && ( - <> -

{indv.title}

+ + {indv.title}
-

Policy

-

POLICY TYPE: {indv.policies.policy}

-

DATA AVAILABILITY STATEMENT PUBLISHED: {indv.policies.dataavail}

-

DATA SHARED: {indv.policies.datashared}

-

DATA PEER REVIEWED: {indv.policies.peerreview}

-

ENFORCED: {indv.policies.enforced}

-

ENFORCED EVIDENCE: {indv.policies.enforcedevidence}

+ + + + + Policies + + + {poli.map((detail) => ( + + + {detail.ques} + + + {detail.ans} + + + ))} + + + {indv.topic} | {indv.link} + + {misc.map((mis) => ( + + + {mis.ques} + +
+ {mis.ans} +
+ + + ))} + +
- + )} - + ) diff --git a/src/components/JournalDetails/styles.js b/src/components/JournalDetails/styles.js index 90aa688..aadcca9 100644 --- a/src/components/JournalDetails/styles.js +++ b/src/components/JournalDetails/styles.js @@ -1,7 +1,126 @@ import styled from 'styled-components'; export const Container = styled.div` +// display: grid; min-height: 100vh; -padding-top: 10%; +padding-bottom: 5%; +background-color: #EFEFF0; +overflow-x: hidden; +`; +export const Head = styled.h1` +margin-top: 100px; +font-size: 2rem; +color: #EC8D20; +text-align: center; +`; + +export const PolicyContainer = styled.div` + width: 65%; + margin: 0px auto 0px auto; + background-color: #FFFF; + padding: 3rem 6rem; + align-self: center; + justify-self: center; + @media (max-width: 1300px) { + width: 78%; + padding: 2rem 4rem; +} +@media (max-width: 800px) { + width: 85%; + padding: 1.4rem 2rem; +} +@media (max-width: 600px) { + width: 88%; + padding: 1.5rem 1.5rem; +} + +`; + +export const Title = styled.h1` + width: 90%; + font-size: 1.4rem; + color: #6B6868; + line-height: 1.4; + @media (max-width: 1000px) { + font-size: 1.6rem; + line-height: 1.2; + } + @media (max-width: 700px) { + font-size: 1.2rem; + line-height: 1.2; + } +`; + +export const Subhead = styled.div` + display: flex; + gap: 5px; +`; + +export const Subhead2 = styled.p` + font-size: 1.4rem; + @media (max-width: 1000px) { + font-size: 1.6rem; + } + @media (max-width: 700px) { + font-size: 1.2rem; + } +`; + +export const Icon = styled.div` + position: relative; + top: 7px; + @media (max-width: 700px) { + top: 4px; + } +`; + +export const Box = styled.div` + display: grid; + color: #A39797; +`; + +export const List = styled.p` + display: ${props => props.primary ? "grid" : "flex"}; + grid-template-columns:${props => props.primary ? "50% 50%" : "none"} ; + border-bottom: ${props => props.primary ? "0.5px solid #DFD3D3" : "none"} ; + font-size: ${props => props.primary ? "0.9375rem" : "0.98rem"}; + gap: ${props => props.primary ? "0px" : "0.5rem"}; + margin-bottom: ${props => props.primary ? "1rem" : "0px"}; + @media (max-width: 1530px) { + gap: ${props => props.primary ? "0rem" : "1rem"}; + } + @media (max-width: 1000px){ + grid-template-columns:${props => props.primary ? "70% 30%" : "none"} ; + } + @media (max-width: 400px) { + font-size: 0.9375rem; + } +`; + +export const Que = styled.p` + width: ${props => props.primary ? "45%" : "none"}; + color: #A39797; + margin-bottom: ${props => props.primary ? "1rem" : "0px"}; + @media (max-width: 1620px) { + width: ${props => props.primary ? "60%" : "none"}; + }; + @media (max-width: 1530px) { + width: ${props => props.primary ? "80%" : "none"}; + } + @media (max-width: 1000px) { + width: ${props => props.primary ? "90%" : "none"}; + } +`; + +export const UpdateContainer = styled.div` + display: grid; + width: 100%; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 5px; + margin-top: 6px; +`; + +export const Misc = styled.div` + `; \ No newline at end of file diff --git a/src/components/Journals/JournalList.js b/src/components/Journals/JournalList.js index 7fef596..6b077e5 100644 --- a/src/components/Journals/JournalList.js +++ b/src/components/Journals/JournalList.js @@ -13,7 +13,7 @@ const JournalList = ({journalFetch}) => { {journalFetch.map((blog) => ( { blog.journaltype } - + { blog.title } {blog.authors.map((author) => ( @@ -26,8 +26,6 @@ const JournalList = ({journalFetch}) => { First Published: {blog.published} - - ))} diff --git a/src/config/content/navbar.js b/src/config/content/navbar.js index adcffe7..b6c07e3 100644 --- a/src/config/content/navbar.js +++ b/src/config/content/navbar.js @@ -39,6 +39,11 @@ export default { name: null, link: '/login', }, + { + id: 'policy', + name: null, + link: '/policy/:id', + } ], }; \ No newline at end of file diff --git a/src/index.css b/src/index.css index c361189..f1bc0f0 100644 --- a/src/index.css +++ b/src/index.css @@ -1,7 +1,7 @@ * { box-sizing: border-box; margin: 0; - padding: 0; + padding-top: 1px; font-family: 'Poppins', sans-serif; } diff --git a/src/index.js b/src/index.js index 75dfd8e..7ee1705 100644 --- a/src/index.js +++ b/src/index.js @@ -5,18 +5,18 @@ import './index.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'; import { Journal, Contact, Manifesto, Home } from './pages'; -import { Footer, Auth, Header, Login, JournalDetails } from './components'; +import { Footer, Auth, Header, Login, JournalDetails, } from './components'; import Navbar from './components/marginals/Navbar/Navbar'; function App() { return ( - + - + From 23888902ac4dca2e03543c6a9fa12fb0c594bfa7 Mon Sep 17 00:00:00 2001 From: padmajabhol Date: Sat, 30 Jul 2022 01:50:42 +0530 Subject: [PATCH 4/4] chore: format project with prettier --- .prettierrc.json => .prettierrc | 0 src/components/AddJournal/AddJournal.js | 106 ++++++----- src/components/Authentication/FormSuccess.js | 2 +- src/components/Authentication/Login/Login.js | 83 +++++---- .../Authentication/Login/LoginForm.js | 10 +- src/components/Authentication/Login/styles.js | 78 ++++----- .../Authentication/Login/useFormLogin.js | 52 +++--- .../Authentication/Login/validateLoginInfo.js | 28 +-- src/components/Authentication/Signup/Form.js | 10 +- .../Authentication/Signup/SignUp.js | 113 ++++++------ .../Authentication/Signup/useForm.js | 56 +++--- .../Authentication/Signup/validateInfo.js | 42 ++--- src/components/Authentication/styles.js | 79 ++++----- src/components/JournalDetails/Details.js | 125 +++++++------ src/components/JournalDetails/styles.js | 107 ++++++------ src/components/Journals/Journal.js | 32 ++-- src/components/Journals/JournalList.js | 41 +++-- src/components/Journals/styles.js | 56 +++--- src/components/Journals/useFetch.js | 63 ++++--- src/components/Landing/Header/Header.js | 5 +- .../Landing/LandingSection/LandingSection.js | 4 +- src/components/index.js | 4 +- src/components/marginals/Footer/Footer.js | 75 ++++---- src/components/marginals/Footer/styles.js | 9 +- src/components/marginals/Navbar/Navbar.js | 51 +++--- src/components/marginals/Navbar/styles.js | 6 +- src/components/marginals/Search/Search.js | 2 +- src/components/marginals/index.js | 6 +- src/config/content/footer.js | 165 +++++++++--------- src/config/content/index.js | 4 +- src/config/content/landingpage.js | 164 ++++++++--------- src/config/content/manifesto.js | 152 ++++++++-------- src/config/content/navbar.js | 89 +++++----- src/config/content/signup.js | 39 ++--- src/helpers/alerts.js | 4 +- src/helpers/validate.js | 69 +++++--- src/index.js | 8 +- src/pages/Contact/Contact.js | 160 +++++++++-------- src/pages/Home.js | 4 +- src/pages/Journal/Journal.js | 4 +- src/pages/Manifesto/Manifesto.js | 10 +- src/pages/index.js | 2 +- 42 files changed, 1074 insertions(+), 1045 deletions(-) rename .prettierrc.json => .prettierrc (100%) diff --git a/.prettierrc.json b/.prettierrc similarity index 100% rename from .prettierrc.json rename to .prettierrc diff --git a/src/components/AddJournal/AddJournal.js b/src/components/AddJournal/AddJournal.js index 3e8b663..56c251c 100644 --- a/src/components/AddJournal/AddJournal.js +++ b/src/components/AddJournal/AddJournal.js @@ -1,7 +1,7 @@ /* eslint-disable no-alert */ import { React, useState } from 'react'; import { Row, Col, Form, Button } from 'react-bootstrap'; -import { showSuccessMessage, showErrorMessage } from "../../helpers/alerts" +import { showSuccessMessage, showErrorMessage } from '../../helpers/alerts'; import { JournalValidation } from '../../helpers/validate'; function AddJournal() { @@ -15,56 +15,62 @@ function AddJournal() { const [lastYear, setLastYear] = useState(''); const [policyType, setPolicyType] = useState(''); const [domain, setDomain] = useState(''); - const [success,setSuccess] = useState(""); - const [error,setError]=useState(""); + const [success, setSuccess] = useState(''); + const [error, setError] = useState(''); - const emptyFields=()=>{ - setTitle(""); - setUrl(""); - setIssn(""); - setRating(""); - setDate(""); - setPolicyTitle(""); - setFirstYear(""); - setLastYear(""); - setPolicyType(""); - setDomain(""); - } + const emptyFields = () => { + setTitle(''); + setUrl(''); + setIssn(''); + setRating(''); + setDate(''); + setPolicyTitle(''); + setFirstYear(''); + setLastYear(''); + setPolicyType(''); + setDomain(''); + }; const handleSubmit = (e) => { e.preventDefault(); - setSuccess(""); - setError(""); - const check = JournalValidation(title, url, issn, rating, policyTitle, firstYear, - lastYear, policyType, domain, date) - if(check){ - const policies = { - title: policyTitle, - first_year: firstYear, - last_year: lastYear, - type: policyType, - }; - const journal = { title, url, issn, rating, date, policies, domain }; + setSuccess(''); + setError(''); + const check = JournalValidation( + title, + url, + issn, + rating, + policyTitle, + firstYear, + lastYear, + policyType, + domain, + date, + ); + if (check) { + const policies = { + title: policyTitle, + first_year: firstYear, + last_year: lastYear, + type: policyType, + }; + const journal = { title, url, issn, rating, date, policies, domain }; - try{ - window.scrollTo(0,0); - fetch('https://journal-policy-tracker.herokuapp.com/api/journals', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(journal), - }) - emptyFields(); - setSuccess("Journal Added Successfuly") - } - catch(err) - { - setError("Cannot Add Journal") + try { + window.scrollTo(0, 0); + fetch('https://journal-policy-tracker.herokuapp.com/api/journals', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(journal), + }); + emptyFields(); + setSuccess('Journal Added Successfuly'); + } catch (err) { + setError('Cannot Add Journal'); + } + } else { + window.scrollTo(0, 0); + setError('Invalid Input'); } - } - else{ - window.scrollTo(0,0); - setError("Invalid Input") - } - }; return ( @@ -84,8 +90,12 @@ function AddJournal() { URL - setUrl(e.target.value)} value={url} /> + setUrl(e.target.value)} + value={url} + /> ISSN diff --git a/src/components/Authentication/FormSuccess.js b/src/components/Authentication/FormSuccess.js index 85cc9dd..094e881 100644 --- a/src/components/Authentication/FormSuccess.js +++ b/src/components/Authentication/FormSuccess.js @@ -12,4 +12,4 @@ const FormSuccess = () => { ); }; -export default FormSuccess; \ No newline at end of file +export default FormSuccess; diff --git a/src/components/Authentication/Login/Login.js b/src/components/Authentication/Login/Login.js index 11347d8..7c7437f 100644 --- a/src/components/Authentication/Login/Login.js +++ b/src/components/Authentication/Login/Login.js @@ -3,61 +3,68 @@ /* eslint-disable jsx-a11y/label-has-associated-control */ /* eslint-disable react/function-component-definition */ /* eslint-disable jsx-a11y/anchor-is-valid */ -import React from 'react' +import React from 'react'; import { Link } from 'react-router-dom'; import useFormLogin from './useFormLogin'; import validateLoginInfo from './validateLoginInfo.js'; -import { FormContentRight, FormDiv, FormH1, FormInputs, FormInputsP, FormLabel, FormInput, FormInputBtn, ButtonContainer, FormH2} from './styles'; +import { + FormContentRight, + FormDiv, + FormH1, + FormInputs, + FormInputsP, + FormLabel, + FormInput, + FormInputBtn, + ButtonContainer, + FormH2, +} from './styles'; import { signup } from '../../../config/content'; - -const FormLogin = ({submitForm}) => { - const {handleChange, values, handleSubmit, errors} = useFormLogin(submitForm, validateLoginInfo); +const FormLogin = ({ submitForm }) => { + const { handleChange, values, handleSubmit, errors } = useFormLogin( + submitForm, + validateLoginInfo, + ); return ( - + {signup.head} {signup.head2} - - {signup.labelEmail} - - - {errors.email && {errors.email}} + {signup.labelEmail} + + {errors.email && {errors.email}} - - {signup.labelPassword} - - - {errors.password && {errors.password}} + {signup.labelPassword} + + {errors.password && {errors.password}} - - {signup.buttonLogin} - - - - {signup.button} + {signup.buttonLogin} + + + {signup.button} - + - + - ); + ); }; -export default FormLogin; \ No newline at end of file +export default FormLogin; diff --git a/src/components/Authentication/Login/LoginForm.js b/src/components/Authentication/Login/LoginForm.js index b6f1b77..37cc860 100644 --- a/src/components/Authentication/Login/LoginForm.js +++ b/src/components/Authentication/Login/LoginForm.js @@ -18,13 +18,9 @@ const LoginForm = () => { return ( <> - {!isSubmitted ? ( - - ) : ( - - )} + {!isSubmitted ? : } - + {signup.formHead} @@ -33,4 +29,4 @@ const LoginForm = () => { ); }; -export default LoginForm; \ No newline at end of file +export default LoginForm; diff --git a/src/components/Authentication/Login/styles.js b/src/components/Authentication/Login/styles.js index 574c243..b5dbc9f 100644 --- a/src/components/Authentication/Login/styles.js +++ b/src/components/Authentication/Login/styles.js @@ -2,44 +2,44 @@ import styled from 'styled-components'; export const FormContentRight = styled.div` border-radius: 50px 50px 50px 50px; - background: #FFFFFF; + background: #ffffff; margin-top: 1rem; padding-left: 2.5rem; padding-bottom: 1rem; position: relative; @media (max-width: 646px) { padding: 10px; - margin : 0px auto 0 auto; + margin: 0px auto 0 auto; } `; export const FormDiv = styled.form` -padding-left: 2.5rem; -padding-top: 5rem; -width: 100%; -display: flex; -flex-direction: column; -gap: 25px; -justify-content: center; -align-items: left; -@media (max-width: 1650px) { - padding-top: 3.5rem; -} -@media (max-width: 1330px) { + padding-left: 2.5rem; + padding-top: 5rem; + width: 100%; + display: flex; + flex-direction: column; + gap: 25px; + justify-content: center; + align-items: left; + @media (max-width: 1650px) { + padding-top: 3.5rem; + } + @media (max-width: 1330px) { padding-top: 2rem; } -@media (max-width: 1000px) { + @media (max-width: 1000px) { gap: 12px; } -@media (max-width: 646px) { - padding: 0.7rem; - gap: 5px; -} + @media (max-width: 646px) { + padding: 0.7rem; + gap: 5px; + } `; export const FormH1 = styled.h1` - color: #52504D; + color: #52504d; font-size: 1.5rem; font-weight: bold; text-align: start; @@ -53,7 +53,7 @@ export const FormH1 = styled.h1` `; export const FormH2 = styled.h1` - color: #52504D; + color: #52504d; font-size: 1rem; font-weight: bold; text-align: start; @@ -67,9 +67,9 @@ export const FormH2 = styled.h1` `; export const FormInputs = styled.div` -margin-bottom: 0.5rem; -display: grid; -grid-template-rows: auto; + margin-bottom: 0.5rem; + display: grid; + grid-template-rows: auto; `; export const FormInput = styled.input` @@ -79,28 +79,28 @@ export const FormInput = styled.input` border-radius: 12px; padding: 2%; width: 60%; - border: 1px solid #7D7A76; + border: 1px solid #7d7a76; :-ms-input-placeholder { color: #595959; font-size: 12px; - } - @media (max-width: 1000px) { - width: 80%; -} - @media (max-width: 646px) { - width: 100%; -} + } + @media (max-width: 1000px) { + width: 80%; + } + @media (max-width: 646px) { + width: 100%; + } `; export const FormLabel = styled.label` font-size: 0.8rem; - color: #7D7A76; + color: #7d7a76; `; export const FormInputsP = styled.p` - color: #E48900; + color: #e48900; font-size: 0.8rem; - margin-bottom:0px; + margin-bottom: 0px; margin-top: 0.2rem; `; @@ -115,15 +115,15 @@ export const FormInputBtn = styled.button` // height: 50px; margin-top: 10px; border-radius: 10px; - background: ${props => props.primary ? 'white' : '#E48900'}; + background: ${(props) => (props.primary ? 'white' : '#E48900')}; outline: none; - border: ${props => props.primary ? '1.5px solid #EA8900' : 'none'}; - color: ${props => props.primary ? '#EA8900' : '#fff'}; + border: ${(props) => (props.primary ? '1.5px solid #EA8900' : 'none')}; + color: ${(props) => (props.primary ? '#EA8900' : '#fff')}; font-size: 1rem; &:hover { cursor: pointer; color: #fff; - background: ${props => props.primary ? '#fff' : '#F6B149'}; + background: ${(props) => (props.primary ? '#fff' : '#F6B149')}; transition: all 0.2s ease-out; } @media (max-width: 1000px) { diff --git a/src/components/Authentication/Login/useFormLogin.js b/src/components/Authentication/Login/useFormLogin.js index 324f5d2..8e7515a 100644 --- a/src/components/Authentication/Login/useFormLogin.js +++ b/src/components/Authentication/Login/useFormLogin.js @@ -1,37 +1,37 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import { useState, useEffect } from "react"; +import { useState, useEffect } from 'react'; const useFormLogin = (callback, validate) => { - const [values, setValues] = useState({ - email: '', - password: '', + const [values, setValues] = useState({ + email: '', + password: '', + }); + + const [errors, setErrors] = useState({}); + const [isSubmitting, setIsSubmitting] = useState(false); + + const handleChange = (e) => { + const { name, value } = e.target; + setValues({ + ...values, + [name]: value, }); + }; - const [errors, setErrors] = useState({}); - const [isSubmitting, setIsSubmitting] = useState(false) + const handleSubmit = (e) => { + e.preventDefault(); - const handleChange = e => { - const { name, value } = e.target; - setValues({ - ...values, - [name]: value, - }); - }; + setErrors(validate(values)); + setIsSubmitting(true); + }; - const handleSubmit = e => { - e.preventDefault(); - - setErrors(validate(values)); - setIsSubmitting(true) + useEffect(() => { + if (Object.keys(errors).length === 0 && isSubmitting) { + callback(); } + }, [errors]); - useEffect(() => { - if(Object.keys(errors).length === 0 && isSubmitting){ - callback(); - } - }, [errors]) - - return {handleChange, values, handleSubmit, errors}; + return { handleChange, values, handleSubmit, errors }; }; -export default useFormLogin; \ No newline at end of file +export default useFormLogin; diff --git a/src/components/Authentication/Login/validateLoginInfo.js b/src/components/Authentication/Login/validateLoginInfo.js index 0194a1e..ec403dc 100644 --- a/src/components/Authentication/Login/validateLoginInfo.js +++ b/src/components/Authentication/Login/validateLoginInfo.js @@ -1,18 +1,18 @@ /* eslint-disable prefer-const */ export default function validateLoginInfo(values) { - let errors = {} + let errors = {}; - if(!values.email){ - errors.email = "Email required" - } else if (!/\S+@\S+\.\S+/.test(values.email)) { - errors.email = 'Email address is invalid'; - } + if (!values.email) { + errors.email = 'Email required'; + } else if (!/\S+@\S+\.\S+/.test(values.email)) { + errors.email = 'Email address is invalid'; + } - if(!values.password){ - errors.password = 'Password required' - } else if (values.password.length < 6){ - errors.password = 'Password needs to be 6 characters or more' - } - - return errors; -} \ No newline at end of file + if (!values.password) { + errors.password = 'Password required'; + } else if (values.password.length < 6) { + errors.password = 'Password needs to be 6 characters or more'; + } + + return errors; +} diff --git a/src/components/Authentication/Signup/Form.js b/src/components/Authentication/Signup/Form.js index 4a8edf2..9c7abf6 100644 --- a/src/components/Authentication/Signup/Form.js +++ b/src/components/Authentication/Signup/Form.js @@ -18,13 +18,9 @@ const Form = () => { return ( <> - {!isSubmitted ? ( - - ) : ( - - )} + {!isSubmitted ? : } - + {signup.formHead} @@ -33,4 +29,4 @@ const Form = () => { ); }; -export default Form; \ No newline at end of file +export default Form; diff --git a/src/components/Authentication/Signup/SignUp.js b/src/components/Authentication/Signup/SignUp.js index 76d6ca7..a5f58b4 100644 --- a/src/components/Authentication/Signup/SignUp.js +++ b/src/components/Authentication/Signup/SignUp.js @@ -4,80 +4,85 @@ /* eslint-disable jsx-a11y/label-has-associated-control */ /* eslint-disable react/function-component-definition */ /* eslint-disable jsx-a11y/anchor-is-valid */ -import React from 'react' +import React from 'react'; import useForm from './useForm'; import validate from './validateInfo'; -import { FormContentRight, FormDiv, FormH1, FormInputs, FormInputsP, FormLabel, FormInput, FormInputBtn, FormInputLogin} from '../styles.js'; +import { + FormContentRight, + FormDiv, + FormH1, + FormInputs, + FormInputsP, + FormLabel, + FormInput, + FormInputBtn, + FormInputLogin, +} from '../styles.js'; import { signup } from '../../../config/content'; -const FormSignup = ({submitForm}) => { - const {handleChange, values, handleSubmit, errors} = useForm(submitForm, validate); +const FormSignup = ({ submitForm }) => { + const { handleChange, values, handleSubmit, errors } = useForm(submitForm, validate); return ( - + {signup.head} - - {signup.labelUsername} - - - {errors.username && {errors.username}} + {signup.labelUsername} + + {errors.username && {errors.username}} - - {signup.labelEmail} - - - {errors.email && {errors.email}} + {signup.labelEmail} + + {errors.email && {errors.email}} - - {signup.labelPassword} - - - {errors.password && {errors.password}} + {signup.labelPassword} + + {errors.password && {errors.password}} - - {signup.labelPassword2} - - - {errors.password2 && {errors.password2}} + {signup.labelPassword2} + + {errors.password2 && {errors.password2}} - {signup.button} + {signup.button} - {signup.login} here + {signup.login}{' '} + + here + - + - ); + ); }; -export default FormSignup; \ No newline at end of file +export default FormSignup; diff --git a/src/components/Authentication/Signup/useForm.js b/src/components/Authentication/Signup/useForm.js index 429d471..d072bbe 100644 --- a/src/components/Authentication/Signup/useForm.js +++ b/src/components/Authentication/Signup/useForm.js @@ -1,39 +1,39 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import { useState, useEffect } from "react"; +import { useState, useEffect } from 'react'; const useForm = (callback, validate) => { - const [values, setValues] = useState({ - username: '', - email: '', - password: '', - password2: '', + const [values, setValues] = useState({ + username: '', + email: '', + password: '', + password2: '', + }); + + const [errors, setErrors] = useState({}); + const [isSubmitting, setIsSubmitting] = useState(false); + + const handleChange = (e) => { + const { name, value } = e.target; + setValues({ + ...values, + [name]: value, }); + }; - const [errors, setErrors] = useState({}); - const [isSubmitting, setIsSubmitting] = useState(false) + const handleSubmit = (e) => { + e.preventDefault(); - const handleChange = e => { - const { name, value } = e.target; - setValues({ - ...values, - [name]: value, - }); - }; + setErrors(validate(values)); + setIsSubmitting(true); + }; - const handleSubmit = e => { - e.preventDefault(); - - setErrors(validate(values)); - setIsSubmitting(true) + useEffect(() => { + if (Object.keys(errors).length === 0 && isSubmitting) { + callback(); } + }, [errors]); - useEffect(() => { - if(Object.keys(errors).length === 0 && isSubmitting){ - callback(); - } - }, [errors]) - - return {handleChange, values, handleSubmit, errors}; + return { handleChange, values, handleSubmit, errors }; }; -export default useForm; \ No newline at end of file +export default useForm; diff --git a/src/components/Authentication/Signup/validateInfo.js b/src/components/Authentication/Signup/validateInfo.js index ff4efe8..43b203d 100644 --- a/src/components/Authentication/Signup/validateInfo.js +++ b/src/components/Authentication/Signup/validateInfo.js @@ -1,28 +1,28 @@ /* eslint-disable prefer-const */ export default function validateInfo(values) { - let errors = {} + let errors = {}; - if(!values.username.trim()){ - errors.username = "Username required" - } + if (!values.username.trim()) { + errors.username = 'Username required'; + } - if(!values.email){ - errors.email = "Email required" - } else if (!/\S+@\S+\.\S+/.test(values.email)) { - errors.email = 'Email address is invalid'; - } + if (!values.email) { + errors.email = 'Email required'; + } else if (!/\S+@\S+\.\S+/.test(values.email)) { + errors.email = 'Email address is invalid'; + } - if(!values.password){ - errors.password = 'Password required' - } else if (values.password.length < 6){ - errors.password = 'Password needs to be 6 characters or more' - } + if (!values.password) { + errors.password = 'Password required'; + } else if (values.password.length < 6) { + errors.password = 'Password needs to be 6 characters or more'; + } - if(!values.password2){ - errors.password2 = 'Password is required' - } else if (values.password2 !== values.password) { - errors.password2 = 'Passwords do not match' - } + if (!values.password2) { + errors.password2 = 'Password is required'; + } else if (values.password2 !== values.password) { + errors.password2 = 'Passwords do not match'; + } - return errors; -} \ No newline at end of file + return errors; +} diff --git a/src/components/Authentication/styles.js b/src/components/Authentication/styles.js index 32b5b3c..6d0ccef 100644 --- a/src/components/Authentication/styles.js +++ b/src/components/Authentication/styles.js @@ -6,7 +6,7 @@ export const FormContainer = styled.div` width: 60%; border-radius: 50px; margin: 8rem auto 4rem auto; - border: 5px solid #50C4ED; + border: 5px solid #50c4ed; @media (max-width: 1200px) { width: 80%; } @@ -18,15 +18,14 @@ export const FormContainer = styled.div` grid-template-columns: 1fr; border-radius: 20px; } - @media (max-width: 450px){ + @media (max-width: 450px) { padding: 2%; width: 90%; } - `; export const FormContentLeft = styled.div` - background: #FFDFC0; + background: #ffdfc0; text-align: center; border-radius: 0px 50px 50px 0px; padding: 2rem; @@ -44,7 +43,7 @@ export const FormImg = styled.img` `; export const RightH2 = styled.h1` - color: #52504D; + color: #52504d; font-size: 1.4rem; @media (max-width: 1300px) { font-size: 1.2rem; @@ -60,33 +59,33 @@ export const Logo = styled.img` export const FormContentRight = styled.div` border-radius: 50px 50px 50px 50px; - background: #FFFFFF; + background: #ffffff; margin-top: 1rem; padding-left: 2.5rem; padding-bottom: 1rem; position: relative; @media (max-width: 646px) { padding: 10px; - margin : 0px auto 0 auto; + margin: 0px auto 0 auto; } `; export const FormDiv = styled.form` -padding-left: 2.5rem; -padding-top: 2rem; -width: 100%; -display: flex; -flex-direction: column; -justify-content: center; -align-items: left; -@media (max-width: 646px) { - padding: 0.7rem; - gap: 8px; -} + padding-left: 2.5rem; + padding-top: 2rem; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: left; + @media (max-width: 646px) { + padding: 0.7rem; + gap: 8px; + } `; export const FormH1 = styled.h1` - color: #52504D; + color: #52504d; font-size: 1.5rem; font-weight: bold; text-align: start; @@ -100,9 +99,9 @@ export const FormH1 = styled.h1` `; export const FormInputs = styled.div` -margin-bottom: 0.5rem; -display: grid; -grid-template-rows: auto; + margin-bottom: 0.5rem; + display: grid; + grid-template-rows: auto; `; export const FormInput = styled.input` @@ -112,28 +111,28 @@ export const FormInput = styled.input` border-radius: 12px; padding: 2%; width: 60%; - border: 1px solid #7D7A76; + border: 1px solid #7d7a76; :-ms-input-placeholder { color: #595959; font-size: 12px; - } - @media (max-width: 1000px) { - width: 80%; -} - @media (max-width: 646px) { - width: 100%; -} + } + @media (max-width: 1000px) { + width: 80%; + } + @media (max-width: 646px) { + width: 100%; + } `; export const FormLabel = styled.label` font-size: 0.8rem; - color: #7D7A76; + color: #7d7a76; `; export const FormInputsP = styled.p` - color: #E48900; + color: #e48900; font-size: 0.8rem; - margin-bottom:0px; + margin-bottom: 0px; margin-top: 0.2rem; `; @@ -143,20 +142,20 @@ export const ButtonContainer = styled.div` `; export const FormInputBtn = styled.button` - width: ${props => props.signup ? '60%' : '34.5%'}; + width: ${(props) => (props.signup ? '60%' : '34.5%')}; padding: 2.2%; // height: 50px; margin-top: 10px; border-radius: 10px; - background: ${props => props.primary ? 'white' : '#E48900'}; + background: ${(props) => (props.primary ? 'white' : '#E48900')}; outline: none; - border: ${props => props.primary ? '1.5px solid #EA8900' : 'none'}; - color: ${props => props.primary ? '#EA8900' : '#fff'}; + border: ${(props) => (props.primary ? '1.5px solid #EA8900' : 'none')}; + color: ${(props) => (props.primary ? '#EA8900' : '#fff')}; font-size: 1rem; &:hover { cursor: pointer; color: #fff; - background: ${props => props.primary ? '#fff' : '#F6B149'}; + background: ${(props) => (props.primary ? '#fff' : '#F6B149')}; transition: all 0.2s ease-out; } @media (max-width: 1000px) { @@ -183,6 +182,4 @@ export const FormSuccessDiv = styled.h1` color: #fff; `; -export const FormImg2 = styled.img` -`; - +export const FormImg2 = styled.img``; diff --git a/src/components/JournalDetails/Details.js b/src/components/JournalDetails/Details.js index 8fef172..1660814 100644 --- a/src/components/JournalDetails/Details.js +++ b/src/components/JournalDetails/Details.js @@ -2,15 +2,32 @@ /* eslint-disable max-len */ /* eslint-disable no-unused-vars */ /* eslint-disable prefer-template */ -import React from 'react' +import React from 'react'; import { useParams } from 'react-router'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import {faBookmark, faSquareCheck, faRectangleXmark, faLink} from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { + faBookmark, + faSquareCheck, + faRectangleXmark, + faLink, +} from '@fortawesome/free-solid-svg-icons'; import useFetch from '../Journals/useFetch'; -import { Container, Head, PolicyContainer, Title, Subhead, Subhead2, Box, List, Que, Misc, UpdateContainer, Icon } from './styles'; +import { + Container, + Head, + PolicyContainer, + Title, + Subhead, + Subhead2, + Box, + List, + Que, + Misc, + UpdateContainer, + Icon, +} from './styles'; import { Authors, Head3 } from '../Journals/styles'; - function Details() { const { id } = useParams(); const { journalFetch: indv } = useFetch('http://localhost:8000/journals/' + id); @@ -18,99 +35,99 @@ function Details() { const poli = [ { ques: 'POLICY TYPE:', - ans: indv && indv.policies.policy, + ans: indv && indv.policies.policy, }, { ques: 'DATA AVAILABILITY STATEMENT PUBLISHED:', - ans: indv && indv.policies.dataavail ? : , + ans: + indv && indv.policies.dataavail ? ( + + ) : ( + + ), }, { - ques: "DATA SHARED:", - ans: indv && indv.policies.datashared ? : + ques: 'DATA SHARED:', + ans: + indv && indv.policies.datashared ? ( + + ) : ( + + ), }, { - ques: "DATA PEER REVIEWED:", - ans: indv && indv.policies.peerreview ? : + ques: 'DATA PEER REVIEWED:', + ans: + indv && indv.policies.peerreview ? ( + + ) : ( + + ), }, { - ques: "ENFORCED:", + ques: 'ENFORCED:', ans: indv && indv.policies.enforced, }, { - ques: "ENFORCED EVIDENCE:", + ques: 'ENFORCED EVIDENCE:', ans: indv && indv.policies.enforcedevidence, }, ]; const misc = [ { - ques: "CREATED AT:", + ques: 'CREATED AT:', ans: indv && indv.published, }, { - ques: "UPDATED AT:", + ques: 'UPDATED AT:', ans: indv && indv.updated, }, { - ques: "CREATED BY:", - ans: indv && indv.authors.map((author) => ( -
- {author} -
- )) + ques: 'CREATED BY:', + ans: indv && indv.authors.map((author) =>
{author}
), }, - ] + ]; return ( - - Journal policies - - { indv && ( - + Journal policies + {indv && ( + {indv.title}
- - - - Policies + + + + Policies {poli.map((detail) => ( - - - {detail.ques} - - - {detail.ans} - - + + {detail.ques} + {detail.ans} + ))} - {indv.topic} | {indv.link} + {indv.topic} |{' '} + {' '} + {indv.link} {misc.map((mis) => ( - - - {mis.ques} - -
- {mis.ans} -
- + + {mis.ques} +
{mis.ans}
 ))}
- - )} - + + )} - - ) + ); } -export default Details; \ No newline at end of file +export default Details; diff --git a/src/components/JournalDetails/styles.js b/src/components/JournalDetails/styles.js index aadcca9..2fdb17f 100644 --- a/src/components/JournalDetails/styles.js +++ b/src/components/JournalDetails/styles.js @@ -1,46 +1,45 @@ import styled from 'styled-components'; export const Container = styled.div` -// display: grid; -min-height: 100vh; -padding-bottom: 5%; -background-color: #EFEFF0; -overflow-x: hidden; + // display: grid; + min-height: 100vh; + padding-bottom: 5%; + background-color: #efeff0; + overflow-x: hidden; `; export const Head = styled.h1` -margin-top: 100px; -font-size: 2rem; -color: #EC8D20; -text-align: center; + margin-top: 100px; + font-size: 2rem; + color: #ec8d20; + text-align: center; `; export const PolicyContainer = styled.div` - width: 65%; - margin: 0px auto 0px auto; - background-color: #FFFF; - padding: 3rem 6rem; - align-self: center; - justify-self: center; - @media (max-width: 1300px) { - width: 78%; - padding: 2rem 4rem; -} -@media (max-width: 800px) { - width: 85%; - padding: 1.4rem 2rem; -} -@media (max-width: 600px) { - width: 88%; - padding: 1.5rem 1.5rem; -} - + width: 65%; + margin: 0px auto 0px auto; + background-color: #ffff; + padding: 3rem 6rem; + align-self: center; + justify-self: center; + @media (max-width: 1300px) { + width: 78%; + padding: 2rem 4rem; + } + @media (max-width: 800px) { + width: 85%; + padding: 1.4rem 2rem; + } + @media (max-width: 600px) { + width: 88%; + padding: 1.5rem 1.5rem; + } `; export const Title = styled.h1` width: 90%; font-size: 1.4rem; - color: #6B6868; + color: #6b6868; line-height: 1.4; @media (max-width: 1000px) { font-size: 1.6rem; @@ -76,22 +75,22 @@ export const Icon = styled.div` `; export const Box = styled.div` - display: grid; - color: #A39797; + display: grid; + color: #a39797; `; export const List = styled.p` - display: ${props => props.primary ? "grid" : "flex"}; - grid-template-columns:${props => props.primary ? "50% 50%" : "none"} ; - border-bottom: ${props => props.primary ? "0.5px solid #DFD3D3" : "none"} ; - font-size: ${props => props.primary ? "0.9375rem" : "0.98rem"}; - gap: ${props => props.primary ? "0px" : "0.5rem"}; - margin-bottom: ${props => props.primary ? "1rem" : "0px"}; + display: ${(props) => (props.primary ? 'grid' : 'flex')}; + grid-template-columns: ${(props) => (props.primary ? '50% 50%' : 'none')}; + border-bottom: ${(props) => (props.primary ? '0.5px solid #DFD3D3' : 'none')}; + font-size: ${(props) => (props.primary ? '0.9375rem' : '0.98rem')}; + gap: ${(props) => (props.primary ? '0px' : '0.5rem')}; + margin-bottom: ${(props) => (props.primary ? '1rem' : '0px')}; @media (max-width: 1530px) { - gap: ${props => props.primary ? "0rem" : "1rem"}; + gap: ${(props) => (props.primary ? '0rem' : '1rem')}; } - @media (max-width: 1000px){ - grid-template-columns:${props => props.primary ? "70% 30%" : "none"} ; + @media (max-width: 1000px) { + grid-template-columns: ${(props) => (props.primary ? '70% 30%' : 'none')}; } @media (max-width: 400px) { font-size: 0.9375rem; @@ -99,28 +98,26 @@ export const List = styled.p` `; export const Que = styled.p` - width: ${props => props.primary ? "45%" : "none"}; - color: #A39797; - margin-bottom: ${props => props.primary ? "1rem" : "0px"}; + width: ${(props) => (props.primary ? '45%' : 'none')}; + color: #a39797; + margin-bottom: ${(props) => (props.primary ? '1rem' : '0px')}; @media (max-width: 1620px) { - width: ${props => props.primary ? "60%" : "none"}; - }; + width: ${(props) => (props.primary ? '60%' : 'none')}; + } @media (max-width: 1530px) { - width: ${props => props.primary ? "80%" : "none"}; + width: ${(props) => (props.primary ? '80%' : 'none')}; } @media (max-width: 1000px) { - width: ${props => props.primary ? "90%" : "none"}; + width: ${(props) => (props.primary ? '90%' : 'none')}; } `; export const UpdateContainer = styled.div` - display: grid; - width: 100%; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - gap: 5px; - margin-top: 6px; + display: grid; + width: 100%; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 5px; + margin-top: 6px; `; -export const Misc = styled.div` - -`; \ No newline at end of file +export const Misc = styled.div``; diff --git a/src/components/Journals/Journal.js b/src/components/Journals/Journal.js index 9b9a7b1..b84bd37 100644 --- a/src/components/Journals/Journal.js +++ b/src/components/Journals/Journal.js @@ -1,23 +1,21 @@ /* eslint-disable arrow-body-style */ /* eslint-disable react/function-component-definition */ -import React from "react"; -import JournalList from "./JournalList"; -import useFetch from "./useFetch"; -import { JContainer, Head } from "./styles"; +import React from 'react'; +import JournalList from './JournalList'; +import useFetch from './useFetch'; +import { JContainer, Head } from './styles'; const Journal = () => { + const { journalFetch, isPending, error } = useFetch('http://localhost:8000/journals/'); - const { journalFetch, isPending, error } = useFetch('http://localhost:8000/journals/'); - - - return ( - - Journals - { error &&
{ error }
} - { isPending &&
Loading...
} - {journalFetch && } - - ); -} + return ( + + Journals + {error &&
{error}
} + {isPending &&
Loading...
} + {journalFetch && } + + ); +}; -export default Journal; \ No newline at end of file +export default Journal; diff --git a/src/components/Journals/JournalList.js b/src/components/Journals/JournalList.js index 6b077e5..cf3e10a 100644 --- a/src/components/Journals/JournalList.js +++ b/src/components/Journals/JournalList.js @@ -3,33 +3,36 @@ /* eslint-disable react/destructuring-assignment */ /* eslint-disable arrow-body-style */ /* eslint-disable react/function-component-definition */ -import React from "react"; -import { Link } from "react-router-dom"; +import React from 'react'; +import { Link } from 'react-router-dom'; import { Box, Preview, Head2, Authors, Head3, Description } from './styles'; -const JournalList = ({journalFetch}) => { - return ( - - {journalFetch.map((blog) => ( +const JournalList = ({ journalFetch }) => { + return ( + + {journalFetch.map((blog) => ( - { blog.journaltype } - - { blog.title } + {blog.journaltype} + + {blog.title} - {blog.authors.map((author) => ( + {blog.authors.map((author) => ( {author}, - ))} + ))} - {blog.topic} | - ISSN: {blog.issn} + {blog.topic} | + ISSN: {blog.issn} - First Published: {blog.published} - + + First Published: + {blog.published} + + - ))} + ))} - ) -} + ); +}; -export default JournalList; \ No newline at end of file +export default JournalList; diff --git a/src/components/Journals/styles.js b/src/components/Journals/styles.js index a0aeb61..605838f 100644 --- a/src/components/Journals/styles.js +++ b/src/components/Journals/styles.js @@ -1,9 +1,9 @@ import styled from 'styled-components'; export const Container = styled.div` -min-height: 100vh; -background-color: #EFEFF0; -padding-bottom: 3%; + min-height: 100vh; + background-color: #efeff0; + padding-bottom: 3%; `; export const JContainer = styled.div` @@ -26,10 +26,10 @@ export const JContainer = styled.div` `; export const Head = styled.div` -margin-top: 100px; -font-size: 2rem; -color: #EC8D20; -@media (max-width: 1000px) { + margin-top: 100px; + font-size: 2rem; + color: #ec8d20; + @media (max-width: 1000px) { font-size: 1.6rem; } @media (max-width: 700px) { @@ -38,46 +38,46 @@ color: #EC8D20; `; export const Box = styled.div` -display: grid; -gap: 15px; + display: grid; + gap: 15px; `; export const Preview = styled.div` - display: grid; - background-color: #FFFFFF; - padding: 23px; + display: grid; + background-color: #ffffff; + padding: 23px; `; export const Authors = styled.div` - display: flex; - gap: 5px; + display: flex; + gap: 5px; `; export const Description = styled.div` - display: flex; - gap: 5px; + display: flex; + gap: 5px; `; export const Head2 = styled.h1` -font-size: 1.3rem; -width: 100%; -color: ${props => props.primary ? '#7D7A76' : '#EC8D20'}; -@media (max-width: 1000px) { + font-size: 1.3rem; + width: 100%; + color: ${(props) => (props.primary ? '#7D7A76' : '#EC8D20')}; + @media (max-width: 1000px) { font-size: 1.2rem; } -@media (max-width: 700px) { + @media (max-width: 700px) { font-size: 1rem; - width: 100%; + width: 100%; } `; export const Head3 = styled.h1` -font-size: 1rem; -color: ${props => props.secondary ? '#7D7A76' : '#504D4D'}; -@media (max-width: 1000px) { + font-size: 1rem; + color: ${(props) => (props.secondary ? '#7D7A76' : '#504D4D')}; + @media (max-width: 1000px) { font-size: 0.9rem; } -@media (max-width: 700px) { + @media (max-width: 700px) { font-size: 0.8rem; - }; -`; \ No newline at end of file + } ; +`; diff --git a/src/components/Journals/useFetch.js b/src/components/Journals/useFetch.js index 25dbada..f23aa3d 100644 --- a/src/components/Journals/useFetch.js +++ b/src/components/Journals/useFetch.js @@ -1,41 +1,40 @@ /* eslint-disable no-console */ /* eslint-disable arrow-body-style */ -import { useState, useEffect } from "react"; +import { useState, useEffect } from 'react'; const useFetch = (url) => { - const [journalFetch, setJournalFetch] = useState(null); - const [isPending, setIsPending] = useState(true); - const [error, setError] = useState(null); + const [journalFetch, setJournalFetch] = useState(null); + const [isPending, setIsPending] = useState(true); + const [error, setError] = useState(null); - useEffect(() => { - const abortCont = new AbortController(); + useEffect(() => { + const abortCont = new AbortController(); - fetch(url, { signal: abortCont.signal }) - .then(res => { - if(!res.ok){ - throw Error("could not fetch the data for that resource"); - } - return res.json(); - }) - .then((data) => { - setJournalFetch(data); - setIsPending(false); - setError(null); - }) - .catch(err => { - if( err.name === 'AbortError'){ - console.log('fetch aborted'); - } else { - setError(err.message); - setIsPending(false); - } - - }); + fetch(url, { signal: abortCont.signal }) + .then((res) => { + if (!res.ok) { + throw Error('could not fetch the data for that resource'); + } + return res.json(); + }) + .then((data) => { + setJournalFetch(data); + setIsPending(false); + setError(null); + }) + .catch((err) => { + if (err.name === 'AbortError') { + console.log('fetch aborted'); + } else { + setError(err.message); + setIsPending(false); + } + }); - return () => abortCont.abort(); - }, [url]); + return () => abortCont.abort(); + }, [url]); - return { journalFetch, isPending, error }; -} + return { journalFetch, isPending, error }; +}; -export default useFetch; \ No newline at end of file +export default useFetch; diff --git a/src/components/Landing/Header/Header.js b/src/components/Landing/Header/Header.js index 422e67a..c4e8faa 100644 --- a/src/components/Landing/Header/Header.js +++ b/src/components/Landing/Header/Header.js @@ -3,15 +3,14 @@ import React from 'react'; import './Header.css'; import { Button, Jumbotron } from 'react-bootstrap'; import Container from 'react-bootstrap/Container'; -import {Link} from "react-router-dom"; +import { Link } from 'react-router-dom'; function Header() { - return (
- +
diff --git a/src/components/Landing/LandingSection/LandingSection.js b/src/components/Landing/LandingSection/LandingSection.js index 633f833..324c1c0 100644 --- a/src/components/Landing/LandingSection/LandingSection.js +++ b/src/components/Landing/LandingSection/LandingSection.js @@ -13,7 +13,7 @@ function LandingSection() { - people working with laptops + people working with laptops

Premise

@@ -50,7 +50,7 @@ function LandingSection() { That’s easier said than done. Getting there requires awareness, culture shift, and adherence to best practices.

- animated talking girls + animated talking girls diff --git a/src/components/index.js b/src/components/index.js index 42ba8ba..663607c 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,9 +1,9 @@ export * from './marginals'; -export { default as AddJournal} from './AddJournal/AddJournal'; +export { default as AddJournal } from './AddJournal/AddJournal'; export { default as Auth } from './Authentication/Signup/Form'; export { default as Login } from './Authentication/Login/LoginForm'; export { default as Header } from './Landing/Header/Header'; export { default as LandingSection } from './Landing/LandingSection/LandingSection'; export { default as Journals } from './Journals/Journal'; -export { default as JournalDetails} from './JournalDetails/Details'; \ No newline at end of file +export { default as JournalDetails } from './JournalDetails/Details'; diff --git a/src/components/marginals/Footer/Footer.js b/src/components/marginals/Footer/Footer.js index 548fb39..c05b52b 100644 --- a/src/components/marginals/Footer/Footer.js +++ b/src/components/marginals/Footer/Footer.js @@ -1,65 +1,62 @@ /* eslint-disable max-len */ /* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { FooterContainer, SecondaryContainer, UpperDiv, Logo, LinksContainer, Heading2, Heading3, NoStyleNav, SocialDiv, LowerDiv } from './styles'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { + FooterContainer, + SecondaryContainer, + UpperDiv, + Logo, + LinksContainer, + Heading2, + Heading3, + NoStyleNav, + SocialDiv, + LowerDiv, +} from './styles'; import { footer } from '../../../config/content'; - function Footer() { return ( - - - {footer.col1.head} - - {footer.col1.links.map(({ id, sub, link }) => ( - - {sub} - - ))} + {footer.col1.head} + {footer.col1.links.map(({ id, sub, link }) => ( + + {sub} + + ))} - - {footer.col2.head} - - {footer.col2.links.map(({ id, sub, link }) => ( - - {sub} - - ))} + {footer.col2.head} + {footer.col2.links.map(({ id, sub, link }) => ( + + {sub} + + ))} - - {footer.socials.head} - - {footer.socials.links.map(({ id, icon, head, link, color }) => ( - - - - {head} - - - ))} + {footer.socials.head} + {footer.socials.links.map(({ id, icon, head, link, color }) => ( + + + + {head} + + + ))} - - - - - - Copyright © {new Date().getFullYear()} Code is Science - + Copyright © {new Date().getFullYear()} Code is Science ); } -export default Footer; \ No newline at end of file +export default Footer; diff --git a/src/components/marginals/Footer/styles.js b/src/components/marginals/Footer/styles.js index de4c29c..c2e5708 100644 --- a/src/components/marginals/Footer/styles.js +++ b/src/components/marginals/Footer/styles.js @@ -14,7 +14,6 @@ export const SecondaryContainer = styled.div` justify-content: center; `; - export const UpperDiv = styled.div` width: 100%; display: grid; @@ -24,7 +23,7 @@ export const UpperDiv = styled.div` @media (max-width: 990px) { grid-template-columns: repeat(2, minmax(100px, 1fr)); gap: 1.5rem 10rem; - }; + } @media (max-width: 484px) { grid-template-columns: repeat(1, minmax(100px, 1fr)); gap: 1.5rem 10rem; @@ -44,7 +43,7 @@ export const LinksContainer = styled.div` export const Heading2 = styled.h1` font-size: 1.3rem; margin-bottom: 1rem; -` +`; export const NoStyleNav = styled.a` no-underline @@ -58,7 +57,7 @@ export const Heading3 = styled.p` `; export const SocialDiv = styled.div` - display:flex; + display: flex; gap: 5px; `; @@ -71,4 +70,4 @@ export const LowerDiv = styled.div` color: #fff; text-align: center; padding: 1rem 0rem 1rem 0; -`; \ No newline at end of file +`; diff --git a/src/components/marginals/Navbar/Navbar.js b/src/components/marginals/Navbar/Navbar.js index 9813b59..ac3b8b0 100644 --- a/src/components/marginals/Navbar/Navbar.js +++ b/src/components/marginals/Navbar/Navbar.js @@ -1,37 +1,30 @@ /* eslint-disable react/jsx-curly-brace-presence */ /* eslint-disable react/self-closing-comp */ /* eslint-disable no-unused-vars */ -import React, { useState } from "react"; -import { Link } from "react-router-dom"; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import React, { useState } from 'react'; +import { Link } from 'react-router-dom'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Nav, Logo, Menu, MenuLink, Button, Items } from './styles'; -import { navbar } from '../../../config/content'; +import { navbar } from '../../../config/content'; function Navbar() { - const [isOpen, setIsOpen] = useState(false); + const [isOpen, setIsOpen] = useState(false); - return ( - - ); -}; + return ( + + ); +} -export default Navbar \ No newline at end of file +export default Navbar; diff --git a/src/components/marginals/Navbar/styles.js b/src/components/marginals/Navbar/styles.js index f966b2b..a8f695d 100644 --- a/src/components/marginals/Navbar/styles.js +++ b/src/components/marginals/Navbar/styles.js @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled from 'styled-components'; export const Button = styled.button` display: none; @@ -52,7 +52,7 @@ export const Menu = styled.div` @media (max-width: 1032px) { overflow: hidden; flex-direction: column; - max-height: ${({ isOpen }) => (isOpen ? "300px" : "0")}; + max-height: ${({ isOpen }) => (isOpen ? '300px' : '0')}; transition: max-height 0.1s ease-in; width: 100%; gap: 1rem; @@ -72,4 +72,4 @@ export const Items = styled.li` :hover { color: #3d9dd9; } -`; \ No newline at end of file +`; diff --git a/src/components/marginals/Search/Search.js b/src/components/marginals/Search/Search.js index e49e9c7..b8b7d83 100644 --- a/src/components/marginals/Search/Search.js +++ b/src/components/marginals/Search/Search.js @@ -4,7 +4,7 @@ import '../../../index.css'; function SearchBar() { return ( -
+
diff --git a/src/components/marginals/index.js b/src/components/marginals/index.js index 1d4ab30..68ab2e0 100644 --- a/src/components/marginals/index.js +++ b/src/components/marginals/index.js @@ -1,5 +1,5 @@ /* eslint-disable import/no-cycle */ -export { default as Footer } from "./Footer/Footer"; -export { default as Navbar } from "./Navbar/Navigation"; -export { default as SearchBar } from "./Search/Search"; \ No newline at end of file +export { default as Footer } from './Footer/Footer'; +export { default as Navbar } from './Navbar/Navigation'; +export { default as SearchBar } from './Search/Search'; diff --git a/src/config/content/footer.js b/src/config/content/footer.js index c0b2c50..2fd75e9 100644 --- a/src/config/content/footer.js +++ b/src/config/content/footer.js @@ -1,85 +1,84 @@ /* eslint-disable import/no-unresolved */ -import {faTwitter, faGithub, faSlack} from '@fortawesome/free-brands-svg-icons'; -import {faEnvelope} from '@fortawesome/free-solid-svg-icons'; +import { faTwitter, faGithub, faSlack } from '@fortawesome/free-brands-svg-icons'; +import { faEnvelope } from '@fortawesome/free-solid-svg-icons'; - -export default{ - img: { - src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702085/CiS/rocket_vkcatz.png', - alt: 'Code Is Science', - }, - copyright: 'Copyright © {{ new Date().getFullYear() }} Code is Science', - col1: { - head: 'Useful Links', - links: [ - { - id:1, - sub: 'Contribute', - link: 'https://github.com/codeisscience', - }, - { - id: 2, - sub: 'Manifesto', - link: 'https://codeisscience.github.io/manifesto/manifesto.html', - }, - { - id: 3, - sub: 'Code of Conduct', - link: '/home', - }, - ] - }, - col2: { - head: 'Resources', - links: [ - { - id: 1, - sub: 'Authors', - link: '/home', - }, - { - id: 2, - sub: 'Open Science', - link: '/home', - }, - { - id: 3, - sub: 'Contributors', - link: '/home', - } - ] - }, - socials: { - head: 'Contact Us', - links: [ - { - id: 1, - icon: faEnvelope, - head: 'Email', - link: 'mailto:contact@codeisscience.com', - color: 'white', - }, - { - id: 2, - icon: faTwitter, - head: 'Twitter', - link: 'https://twitter.com/codeisscience', - color: '#00acee', - }, - { - id: 3, - icon: faGithub, - head: 'Github', - link: 'https://github.com/codeisscience', - color: 'black', - }, - { - id: 4, - icon: faSlack, - head: 'Slack', - link: '', - color: '#e01e5a', - } - ] - } -} \ No newline at end of file +export default { + img: { + src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702085/CiS/rocket_vkcatz.png', + alt: 'Code Is Science', + }, + copyright: 'Copyright © {{ new Date().getFullYear() }} Code is Science', + col1: { + head: 'Useful Links', + links: [ + { + id: 1, + sub: 'Contribute', + link: 'https://github.com/codeisscience', + }, + { + id: 2, + sub: 'Manifesto', + link: 'https://codeisscience.github.io/manifesto/manifesto.html', + }, + { + id: 3, + sub: 'Code of Conduct', + link: '/home', + }, + ], + }, + col2: { + head: 'Resources', + links: [ + { + id: 1, + sub: 'Authors', + link: '/home', + }, + { + id: 2, + sub: 'Open Science', + link: '/home', + }, + { + id: 3, + sub: 'Contributors', + link: '/home', + }, + ], + }, + socials: { + head: 'Contact Us', + links: [ + { + id: 1, + icon: faEnvelope, + head: 'Email', + link: 'mailto:contact@codeisscience.com', + color: 'white', + }, + { + id: 2, + icon: faTwitter, + head: 'Twitter', + link: 'https://twitter.com/codeisscience', + color: '#00acee', + }, + { + id: 3, + icon: faGithub, + head: 'Github', + link: 'https://github.com/codeisscience', + color: 'black', + }, + { + id: 4, + icon: faSlack, + head: 'Slack', + link: '', + color: '#e01e5a', + }, + ], + }, +}; diff --git a/src/config/content/index.js b/src/config/content/index.js index bb3fff2..c3d0c75 100644 --- a/src/config/content/index.js +++ b/src/config/content/index.js @@ -1,5 +1,5 @@ export { default as landingpage } from './landingpage'; export { default as footer } from './footer'; export { default as manifesto } from './manifesto'; -export { default as navbar } from './navbar'; -export { default as signup } from './signup'; \ No newline at end of file +export { default as navbar } from './navbar'; +export { default as signup } from './signup'; diff --git a/src/config/content/landingpage.js b/src/config/content/landingpage.js index f26350c..49c0199 100644 --- a/src/config/content/landingpage.js +++ b/src/config/content/landingpage.js @@ -1,90 +1,90 @@ /* eslint-disable max-len */ export default { - landing: { - head: 'Read and Sign the Manifesto', - img: { - src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702025/CiS/bg_jhdw6s.png', - alt: 'landing' - } + landing: { + head: 'Read and Sign the Manifesto', + img: { + src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702025/CiS/bg_jhdw6s.png', + alt: 'landing', + }, + }, + section1: { + head: 'Premise', + img: { + src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702092/CiS/section-img_pkjqly.png', + alt: 'laptops', }, - section1: { - head: 'Premise', - img: { - src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702092/CiS/section-img_pkjqly.png', - alt: 'laptops', - }, - content: [ - { - id: 1, - subhead: 'Science is often computing', - para: 'Much of modern science involves code these days, in large part due to the amount of data available - it would be almost impossible to analyse without computational assistance.' - }, - { - id: 2, - subhead: 'Science requires peer review', - para: 'One of the basic prerequisites for any published scientific results is that it be reviewed by peers, to ensure the research and conclusions are valid.' - } - ] - }, - section2: { content: [ - { - id: 1, - head: 'Code == Science', - para: 'If software is required to perform science, it stands to reason that errors in your software mean errors in your science.', - img: { - src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702030/CiS/clock_dryc5d.png', - alt: 'clock', - }, + { + id: 1, + subhead: 'Science is often computing', + para: 'Much of modern science involves code these days, in large part due to the amount of data available - it would be almost impossible to analyse without computational assistance.', + }, + { + id: 2, + subhead: 'Science requires peer review', + para: 'One of the basic prerequisites for any published scientific results is that it be reviewed by peers, to ensure the research and conclusions are valid.', + }, + ], + }, + section2: { + content: [ + { + id: 1, + head: 'Code == Science', + para: 'If software is required to perform science, it stands to reason that errors in your software mean errors in your science.', + img: { + src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702030/CiS/clock_dryc5d.png', + alt: 'clock', }, - { - id: 2, - head: 'Possible Solution?', - para: 'Scientific code needs to be peer reviewed, and ideally open source.That’s easier said than done. Getting there requires awareness, culture shift, and adherence to best practices.', - img: { - src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702098/CiS/talking_q54knb.png', - alt: 'humans', - } + }, + { + id: 2, + head: 'Possible Solution?', + para: 'Scientific code needs to be peer reviewed, and ideally open source.That’s easier said than done. Getting there requires awareness, culture shift, and adherence to best practices.', + img: { + src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702098/CiS/talking_q54knb.png', + alt: 'humans', }, - ] - }, + }, + ], + }, - section3: { + section3: { content: [ - { - head: 'Looking to Contribute?', - para: [ - { - id: 1, - sub: 'Do you wish more code was open source? Have you wished in the past that a DB of open source journals existed? Share your story.' - }, - { - id: 2, - sub: 'Add more journals to our list Right now it’s a google form, but hopefully we’ll have the full site up and running soon!' - }, - { - id: 3, - sub: 'Pick up a technical or design task on GitHub: https://github.com/codeisscience/code-is-science' - } - ] - }, - { - head: 'Latest Posts', - links: [ - { - title: 'Good practices & good quality code', - link: '', - }, - { - title: 'Mozfest Session 2017', - link: '', - }, - { - title: 'Mozfest Is Coming', - link: '', - } - ] - } - ] - } -} \ No newline at end of file + { + head: 'Looking to Contribute?', + para: [ + { + id: 1, + sub: 'Do you wish more code was open source? Have you wished in the past that a DB of open source journals existed? Share your story.', + }, + { + id: 2, + sub: 'Add more journals to our list Right now it’s a google form, but hopefully we’ll have the full site up and running soon!', + }, + { + id: 3, + sub: 'Pick up a technical or design task on GitHub: https://github.com/codeisscience/code-is-science', + }, + ], + }, + { + head: 'Latest Posts', + links: [ + { + title: 'Good practices & good quality code', + link: '', + }, + { + title: 'Mozfest Session 2017', + link: '', + }, + { + title: 'Mozfest Is Coming', + link: '', + }, + ], + }, + ], + }, +}; diff --git a/src/config/content/manifesto.js b/src/config/content/manifesto.js index 61eafbf..ef5bd61 100644 --- a/src/config/content/manifesto.js +++ b/src/config/content/manifesto.js @@ -2,84 +2,82 @@ import { ImTwitter, ImMail, ImGithub } from 'react-icons/im'; export default { - title: 'Manifesto', - section1: { - img: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702069/CiS/manifesto-img-1_tsnufg.png', - alt: 'manifesto image', - head: 'Code is Science Manifesto', - sub: 'Through working with scientific code, we agree that scientific code needs to be treated as a genuine research output. For this reason we have created a manifesto, which will allow both individuals and organisations to sign up and agree to make genuine efforts to both make their own scientific code open, as well as sharing the manifesto mission with others.', - link: 'https://codeisscience.github.io/manifesto/manifesto.html', - }, - section2: { - head: 'I want to express my support for the manifesto! Tell me how', - cards: [ - { - id:1, - img: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702103/CiS/walking-man_ncunny.png', - alt: 'Card Image', - head: 'Sign the manifesto as an individual', - link : 'https://docs.google.com/forms/d/e/1FAIpQLSeaDLDaREkUyOwpvbQf41hxT12ixoBToTdBhlgTj_YoW0tSgw/viewform', - }, - { - id: 2, - img: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702076/CiS/peers_m0fgdd.png', - alt: 'Card Image', - head: 'Sign the manifesto as an organisation or institution.', - sub: 'Please make sure you have authority to sign on behalf of your organisation before you sign on behalf of an organisation.', - link: 'https://docs.google.com/forms/d/e/1FAIpQLSdUPKlP__5saaYMyEJwkHF3gRNAHiKihOlp6zd6QK4vUqs3gg/viewform', - }, - { - id: 3, - img: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702037/CiS/hands-icon_omk7ug.png', - alt: 'Card Image', - sub: 'We’re particularly interested in adding logos and links indicating organisational support from publishers, funders, and research institutions.' - } - ] + title: 'Manifesto', + section1: { + img: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702069/CiS/manifesto-img-1_tsnufg.png', + alt: 'manifesto image', + head: 'Code is Science Manifesto', + sub: 'Through working with scientific code, we agree that scientific code needs to be treated as a genuine research output. For this reason we have created a manifesto, which will allow both individuals and organisations to sign up and agree to make genuine efforts to both make their own scientific code open, as well as sharing the manifesto mission with others.', + link: 'https://codeisscience.github.io/manifesto/manifesto.html', + }, + section2: { + head: 'I want to express my support for the manifesto! Tell me how', + cards: [ + { + id: 1, + img: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702103/CiS/walking-man_ncunny.png', + alt: 'Card Image', + head: 'Sign the manifesto as an individual', + link: 'https://docs.google.com/forms/d/e/1FAIpQLSeaDLDaREkUyOwpvbQf41hxT12ixoBToTdBhlgTj_YoW0tSgw/viewform', + }, + { + id: 2, + img: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702076/CiS/peers_m0fgdd.png', + alt: 'Card Image', + head: 'Sign the manifesto as an organisation or institution.', + sub: 'Please make sure you have authority to sign on behalf of your organisation before you sign on behalf of an organisation.', + link: 'https://docs.google.com/forms/d/e/1FAIpQLSdUPKlP__5saaYMyEJwkHF3gRNAHiKihOlp6zd6QK4vUqs3gg/viewform', + }, + { + id: 3, + img: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702037/CiS/hands-icon_omk7ug.png', + alt: 'Card Image', + sub: 'We’re particularly interested in adding logos and links indicating organisational support from publishers, funders, and research institutions.', + }, + ], + }, + section3: [ + { + head: 'How can I contribute?', + list: [ + { + id: 1, + sub: 'Sign the manifesto and share with all your friends!', + }, + { + id: 2, + sub: 'Add links to your personal and institutional sites.', + }, + { + id: 3, + sub: 'You can also look at the issues on GitHub and see if there’s anything else you can pick up. You can also look at our roadmap to get an understanding of our timeline.', + }, + ], }, - section3: [ + ], + section4: [ + { + head: 'Contact', + links: [ { - head: 'How can I contribute?', - list: [ - { - id: 1, - sub: 'Sign the manifesto and share with all your friends!', - }, - { - id: 2, - sub: 'Add links to your personal and institutional sites.', - }, - { - id: 3, - sub: 'You can also look at the issues on GitHub and see if there’s anything else you can pick up. You can also look at our roadmap to get an understanding of our timeline.', - } - ] + id: 1, + icon: ImTwitter, + sub: 'Twitter: @codeisscience', + link: 'https://twitter.com/codeisscience', }, - ], - section4: [ { - head: 'Contact', - links: [ - { - id: 1, - icon: ImTwitter, - sub: 'Twitter: @codeisscience', - link: 'https://twitter.com/codeisscience', - }, - { - id: 2, - icon: ImMail, - sub: 'Email: contact@codeisscience.com', - link: 'mailto:contact@codeisscience.com', - }, - { - id: 3, - icon: ImGithub, - sub: 'Github: You can also create issues on the manifesto repository', - link: 'https://github.com/codeisscience', - } - ] - } - ] - - -} \ No newline at end of file + id: 2, + icon: ImMail, + sub: 'Email: contact@codeisscience.com', + link: 'mailto:contact@codeisscience.com', + }, + { + id: 3, + icon: ImGithub, + sub: 'Github: You can also create issues on the manifesto repository', + link: 'https://github.com/codeisscience', + }, + ], + }, + ], +}; diff --git a/src/config/content/navbar.js b/src/config/content/navbar.js index b6c07e3..b410395 100644 --- a/src/config/content/navbar.js +++ b/src/config/content/navbar.js @@ -1,49 +1,48 @@ import { faBars, faXmark } from '@fortawesome/free-solid-svg-icons'; export default { - title: 'Navbar', - logo: { - src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702059/CiS/logo_ch4fzv.png', - alt: 'Code Is Science', + title: 'Navbar', + logo: { + src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702059/CiS/logo_ch4fzv.png', + alt: 'Code Is Science', + }, + icon: faBars, + icon2: faXmark, + navItems: [ + { + id: 'home', + name: 'Home', + link: '/home', }, - icon: faBars, - icon2: faXmark, - navItems: [ - { - id: 'home', - name: 'Home', - link: '/home', - }, - { - id: 'journal', - name: 'Journals', - link: '/journal', - }, - { - id: 'manifesto', - name: 'Manifesto', - link: '/manifesto', - }, - { - id: 'contact', - name: 'Contact', - link: '/contact', - }, - { - id: 'signup', - name: 'Signup', - link: '/signup', - }, - { - id: 'login', - name: null, - link: '/login', - }, - { - id: 'policy', - name: null, - link: '/policy/:id', - } - - ], -}; \ No newline at end of file + { + id: 'journal', + name: 'Journals', + link: '/journal', + }, + { + id: 'manifesto', + name: 'Manifesto', + link: '/manifesto', + }, + { + id: 'contact', + name: 'Contact', + link: '/contact', + }, + { + id: 'signup', + name: 'Signup', + link: '/signup', + }, + { + id: 'login', + name: null, + link: '/login', + }, + { + id: 'policy', + name: null, + link: '/policy/:id', + }, + ], +}; diff --git a/src/config/content/signup.js b/src/config/content/signup.js index 50c5ba7..4193a53 100644 --- a/src/config/content/signup.js +++ b/src/config/content/signup.js @@ -1,22 +1,21 @@ /* eslint-disable max-len */ export default { - head: 'Welcome to Code Is Science', - head2: 'Welcome back, please log in to your account', - labelUsername: 'Enter your username', - labelEmail: 'Enter your email', - labelPassword: 'Enter your password', - labelPassword2: 'Confirm your password', - button: 'Sign Up', - buttonLogin: 'Login', - login: 'Already have an account? Login', - logo: { - src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702059/CiS/logo_ch4fzv.png', - alt: 'Form Image', - }, - img: { - src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1656711379/CiS/branding-and-marketing-for-product-of-startup-business_wdzfmj.png', - alt: 'spaceship', - }, - formHead: 'Scientific Code Should Be Open', - -} \ No newline at end of file + head: 'Welcome to Code Is Science', + head2: 'Welcome back, please log in to your account', + labelUsername: 'Enter your username', + labelEmail: 'Enter your email', + labelPassword: 'Enter your password', + labelPassword2: 'Confirm your password', + button: 'Sign Up', + buttonLogin: 'Login', + login: 'Already have an account? Login', + logo: { + src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702059/CiS/logo_ch4fzv.png', + alt: 'Form Image', + }, + img: { + src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1656711379/CiS/branding-and-marketing-for-product-of-startup-business_wdzfmj.png', + alt: 'spaceship', + }, + formHead: 'Scientific Code Should Be Open', +}; diff --git a/src/helpers/alerts.js b/src/helpers/alerts.js index 08cdb9a..8b3dd19 100644 --- a/src/helpers/alerts.js +++ b/src/helpers/alerts.js @@ -1,4 +1,4 @@ import React from 'react'; -export const showSuccessMessage = success =>
{success}
; -export const showErrorMessage = error =>
{error}
; +export const showSuccessMessage = (success) =>
{success}
; +export const showErrorMessage = (error) =>
{error}
; diff --git a/src/helpers/validate.js b/src/helpers/validate.js index 0b65264..5980be2 100644 --- a/src/helpers/validate.js +++ b/src/helpers/validate.js @@ -1,36 +1,51 @@ /* eslint-disable-next-line max-len */ // ----------------------------------Journal Validation------------------------------ -export const JournalValidation = (title, url, issn, rating, policyTitle, -firstYear, lastYear, policyType, domain, date) =>{ - if(title.length<3 || url.length < 5 || issn.length<1 || rating.length<1 || - date.length<1 || policyTitle.length<1 || firstYear.length<1 || lastYear.length<1 || - policyType.length<1 || domain.length<1 || !date){ - - return false - - } - - return true; - -} +export const JournalValidation = ( + title, + url, + issn, + rating, + policyTitle, + firstYear, + lastYear, + policyType, + domain, + date, +) => { + if ( + title.length < 3 || + url.length < 5 || + issn.length < 1 || + rating.length < 1 || + date.length < 1 || + policyTitle.length < 1 || + firstYear.length < 1 || + lastYear.length < 1 || + policyType.length < 1 || + domain.length < 1 || + !date + ) { + return false; + } + + return true; +}; // ----------------------------------Signup Validation------------------------------ -export const SignupValidation = ({username,email,password}) => { - if(username<1||email<1||password<1) - { - return false; - } - return true; -} +export const SignupValidation = ({ username, email, password }) => { + if (username < 1 || email < 1 || password < 1) { + return false; + } + return true; +}; // ----------------------------------Login Validation------------------------------ -export const LoginValidation = ({email,password}) => { - if(email<1||password<1) - { - return false; - } - return true; -} \ No newline at end of file +export const LoginValidation = ({ email, password }) => { + if (email < 1 || password < 1) { + return false; + } + return true; +}; diff --git a/src/index.js b/src/index.js index 7ee1705..d5570cc 100644 --- a/src/index.js +++ b/src/index.js @@ -5,26 +5,26 @@ import './index.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'; import { Journal, Contact, Manifesto, Home } from './pages'; -import { Footer, Auth, Header, Login, JournalDetails, } from './components'; +import { Footer, Auth, Header, Login, JournalDetails } from './components'; import Navbar from './components/marginals/Navbar/Navbar'; function App() { return ( - + - + - +