Skip to content

Commit d97dc8e

Browse files
alaaltorosalaaltoros
committed
Contribute, Auth & page 3
1 parent e893f8e commit d97dc8e

File tree

14 files changed

+235
-112
lines changed

14 files changed

+235
-112
lines changed

‎UIcode/client/src/App/index.jsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,19 @@ import DefaultLayout from "Layouts/Default";
55
import Home from "Pages/Home";
66
import API from "Pages/API";
77
import Contribute from "Pages/Contribute";
8+
import AuthProvider from "Providers/AuthProvider";
89

910
const App = () => {
1011
return (
11-
<Router>
12-
<Switch>
13-
<DefaultLayout exact path="/" component={Home} />
14-
<DefaultLayout exact path="/API" component={API} />
15-
<DefaultLayout exact path="/contribute" component={Contribute} />
16-
</Switch>
17-
</Router>
12+
<AuthProvider>
13+
<Router>
14+
<Switch>
15+
<DefaultLayout exact path="/" component={Home} />
16+
<DefaultLayout exact path="/API" component={API} />
17+
<DefaultLayout exact path="/contribute" component={Contribute} />
18+
</Switch>
19+
</Router>
20+
</AuthProvider>
1821
);
1922
};
2023

‎UIcode/client/src/Components/DatePicker/index.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,22 @@ const parseDate = (str, format, locale) => {
2020
return undefined;
2121
};
2222

23-
const DatePicker = ({ className, ...props }) => (
23+
const DatePicker = ({ className, disabled, ...props }) => (
2424
<DayPickerInput
2525
{...props}
2626
classNames={{ container: className, overlay: "" }}
2727
format={DATE_FORMAT}
2828
parseDate={parseDate}
2929
formatDate={formatDate}
30+
inputProps={{ disabled }}
3031
placeholder="MM/DD/YYYY"
3132
dayPickerProps={{
3233
fromMonth: new Date(2019, 11, 1),
3334
toMonth: new Date(),
3435
disabledDays: {
3536
before: new Date(2019, 11, 1),
36-
after: new Date()
37-
}
37+
after: new Date(),
38+
},
3839
}}
3940
/>
4041
);

‎UIcode/client/src/Components/Header/index.jsx‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,24 @@ const StyledNavBar = styled.nav`
2222
const NavUl = styled.ul`
2323
display: flex;
2424
align-items: stretch;
25-
justify-content: space-between;
25+
justify-content: ${(props) =>
26+
props.align === "right" ? `flex-end` : `space-between`};
2627
list-style: none;
2728
margin: 0;
2829
padding: 0;
2930
height: 40px;
30-
flex: 1;
31+
`;
32+
33+
const NavLi = styled.li`
34+
&:not(:first-child):not(:last-child):not(:only-child) {
35+
margin: 0 32px;
36+
}
37+
:first-child:not(:only-child) {
38+
margin-right: 32px;
39+
}
40+
:last-child:not(:only-child) {
41+
margin-left: 32px;
42+
}
3143
`;
3244

3345
const Title = styled.h1`
@@ -38,7 +50,6 @@ const Title = styled.h1`
3850
font-weight: 600;
3951
padding: 0;
4052
margin: 0;
41-
flex: 2;
4253
`;
4354

4455
const StyledNavLink = styled(NavLink)`
@@ -50,27 +61,27 @@ const Header = ({ className }) => {
5061
<HeaderWrapper>
5162
<StyledNavBar>
5263
<NavUl>
53-
<li>
64+
<NavLi>
5465
<StyledNavLink to="/" exact>
5566
Home
5667
</StyledNavLink>
57-
</li>
58-
<li>
68+
</NavLi>
69+
<NavLi>
5970
<StyledNavLink to="/API" exact>
6071
API
6172
</StyledNavLink>
62-
</li>
63-
<li>
73+
</NavLi>
74+
<NavLi>
6475
<StyledNavLink to="/contribute">Contribute</StyledNavLink>
65-
</li>
76+
</NavLi>
6677
</NavUl>
6778

6879
<Title>Covid-19 Safe Trace</Title>
6980

70-
<NavUl>
71-
<li>
81+
<NavUl align="right">
82+
<NavLi>
7283
<LoginLogoutButton />
73-
</li>
84+
</NavLi>
7485
</NavUl>
7586
</StyledNavBar>
7687
</HeaderWrapper>

‎UIcode/client/src/Components/LoginLogoutButton/index.jsx‎

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,47 @@
1-
import React, { useState } from "react";
1+
import React from "react";
22
import { GoogleLogin, GoogleLogout } from "react-google-login";
33
import NavLinkStyle from "Styled/NavLink";
44
import styled from "styled-components";
5-
import Cookies from "js-cookie";
5+
import { googleLoginToApi } from "Services/auth";
6+
import { useContext } from "react";
7+
import { authContext } from "Providers/AuthProvider";
68

79
const StyledButton = styled.button`
810
${NavLinkStyle}
911
`;
1012

11-
const LoginLogoutButton = () => {
12-
const token = Cookies.get("token");
13+
const LoginLogoutButton = ({ defaultButton = false }) => {
14+
const { token, setToken } = useContext(authContext);
1315

14-
const [isLoggedIn, setIsLoggedIn] = useState(!!token);
15-
16-
const loginSuccess = response => {
17-
Cookies.set("token", response.tokenId);
18-
console.log(response)
19-
setIsLoggedIn(true);
16+
const loginSuccess = (response) => {
17+
setToken(response.tokenId);
18+
googleLoginToApi(response.tokenId).then(console.log, console.log);
2019
};
2120

22-
const loginFail = response => {
21+
const loginFail = (response) => {
2322
alert("Login failed");
2423
};
2524

26-
const onLogout = response => {
27-
Cookies.remove("token");
28-
setIsLoggedIn(false);
25+
const onLogout = (response) => {
26+
setToken(null);
2927
};
3028

31-
console.log({ isLoggedIn });
32-
return isLoggedIn ? (
29+
const render = defaultButton
30+
? (text) => undefined
31+
: (text) => ({ onClick, disabled }) => (
32+
<StyledButton onClick={onClick} disabled={disabled}>
33+
{text}
34+
</StyledButton>
35+
);
36+
37+
console.log({ token });
38+
return token ? (
3339
<GoogleLogout
3440
clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
3541
buttonText="Logout"
3642
onLogoutSuccess={onLogout}
3743
onFailure={onLogout}
38-
render={({ onClick, disabled }) => (
39-
<StyledButton onClick={onClick} disabled={disabled}>
40-
Logout
41-
</StyledButton>
42-
)}
44+
render={render("Logout")}
4345
/>
4446
) : (
4547
<GoogleLogin
@@ -48,11 +50,8 @@ const LoginLogoutButton = () => {
4850
onSuccess={loginSuccess}
4951
onFailure={loginFail}
5052
cookiePolicy={"single_host_origin"}
51-
render={({ onClick, disabled }) => (
52-
<StyledButton onClick={onClick} disabled={disabled}>
53-
Login with Google
54-
</StyledButton>
55-
)}
53+
isSignedIn
54+
render={render("Login")}
5655
/>
5756
);
5857
};

‎UIcode/client/src/Pages/Contribute/Step1.jsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
import React from "react";
2-
import styled from "styled-components";
3-
import Col from "Components/Grid/Col";
42
import ListItemButton from "Styled/ListItemButton";
53
import Ul from "Styled/Ul";
64
import Li from "Styled/Li";
7-
8-
const Box = styled.div`
9-
width: 500px;
10-
`;
5+
import Box from "Styled/Box";
116

127
const Step1 = ({ submitReport, viewResults }) => {
138
return (

‎UIcode/client/src/Pages/Contribute/Step2.jsx‎

Lines changed: 29 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,48 @@
11
import React from "react";
22
import RadioGroup from "Components/RadioGroup";
3-
import { useState } from "react";
43
import DatePicker from "Components/DatePicker";
5-
import styled from "styled-components";
6-
import Button from "Components/Common/Button";
7-
import Row from "Components/Grid/Row";
8-
import Col from "Components/Grid/Row";
9-
import ListItemButton from "Styled/ListItemButton";
10-
11-
const Box = styled.div`
12-
width: 500px;
13-
`;
4+
import Box from "Styled/Box";
145

156
const Step2 = ({
167
selectedTestResult,
178
onTestResultChange,
189
testDate,
19-
onTestDateChange
10+
onTestDateChange,
2011
}) => {
2112
return (
2213
<>
2314
<h2>Self Report</h2>
2415
<hr />
25-
<Box>
26-
<h3>Do you have test results for COVID-19?</h3>
27-
<p>
28-
All data is private and anonymous. You can still report your data to
29-
this map if you haven’t taken a test, and update test results later.{" "}
30-
</p>
31-
<RadioGroup selected={selectedTestResult} onChange={onTestResultChange}>
32-
{[
33-
{
34-
label: "Positive",
35-
value: "positive"
36-
},
37-
{
38-
label: "Negative",
39-
value: "negative"
40-
},
41-
{
42-
label: "I have not been tested",
43-
value: "not_tested"
44-
}
45-
]}
46-
</RadioGroup>
47-
</Box>
16+
<h3>Do you have test results for COVID-19?</h3>
17+
<p>
18+
All data is private and anonymous. You can still report your data to
19+
this map if you haven’t taken a test, and update test results later.{" "}
20+
</p>
21+
<RadioGroup selected={selectedTestResult} onChange={onTestResultChange}>
22+
{[
23+
{
24+
label: "Positive",
25+
value: "positive",
26+
},
27+
{
28+
label: "Negative",
29+
value: "negative",
30+
},
31+
{
32+
label: "I have not been tested",
33+
value: "not_tested",
34+
},
35+
]}
36+
</RadioGroup>
37+
4838
<hr />
4939
<Box>
5040
<h2>What date was the test administered?</h2>
51-
<DatePicker selectedDay={testDate} onDayChange={onTestDateChange} />
41+
<DatePicker
42+
value={testDate}
43+
onDayChange={onTestDateChange}
44+
disabled={selectedTestResult === "not_tested"}
45+
/>
5246
</Box>
5347
</>
5448
);

‎UIcode/client/src/Pages/Contribute/Step3.jsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from "react";
2+
import Box from "Styled/Box";
3+
4+
const Step3 = ({ onFileUpload }) => {
5+
return (
6+
<Box>
7+
<h2>Self Report</h2>
8+
<hr />
9+
<h3>Download your Location History</h3>
10+
<p>
11+
Using{" "}
12+
<a href="https://takeout.google.com/settings/takeout">Google Takeout</a>
13+
, find your <b>“Location History”</b> and export your file. Unzip your
14+
downloaded file and locate your most recent month of Location History.
15+
Here is a step-by-step guide below:
16+
</p>
17+
<h3>Step 1</h3>
18+
<p>
19+
Make sure your <b>“Location History”</b> is turned <b>ON</b> at{" "}
20+
<a href="https://takeout.google.com/settings/takeout">Google Takeout</a>
21+
.
22+
</p>
23+
<h3>Step 2</h3>
24+
<p>
25+
Download your “<b>“Location History”</b> from{" "}
26+
<a href="https://takeout.google.com/settings/takeout">Google Takeout</a>
27+
.
28+
</p>
29+
<h3>Step 3</h3>
30+
<p>
31+
Select “export once”, set file type to .zip, and leave the other options
32+
as they are.
33+
</p>
34+
<h3>Step 4</h3>
35+
<p>
36+
When you receive your Takeout order from Google, unzip the file and
37+
locate your most recent month of{" "}
38+
<b>
39+
Location History. Takeout > Location History > Semantic Location
40+
History > 2020 > 2020_MARCH.json
41+
</b>{" "}
42+
Can’t find the file?
43+
</p>
44+
</Box>
45+
);
46+
};
47+
48+
export default Step3;

0 commit comments

Comments
 (0)