Skip to content

Commit e893f8e

Browse files
alaaltorosalaaltoros
committed
Contribute page steps
1 parent 5bda34a commit e893f8e

File tree

9 files changed

+173
-81
lines changed

9 files changed

+173
-81
lines changed

‎UIcode/client/src/Components/Grid/Col.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import styled from "styled-components";
33
const Col = styled.div`
44
display: flex;
55
flex-direction: column;
6-
padding: 0 12px;
76
`;
87

98
export default Col;

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

Lines changed: 9 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,9 @@
11
import React from "react";
22
import styled from "styled-components";
33
import colors from "Theme/colors";
4-
5-
const RadioList = styled.ul`
6-
list-style: none;
7-
display: flex;
8-
flex-direction: column;
9-
margin: 0;
10-
padding: 0;
11-
`;
12-
const RadioListItem = styled.li`
13-
margin: 10px 0;
14-
`;
15-
16-
const RadioButton = styled.button`
17-
display: flex;
18-
align-items: center;
19-
border: 1px solid
20-
${props => (props.selected ? colors.primary.main : colors.grey.light)};
21-
height: 60px;
22-
width: 100%;
23-
padding: 10px;
24-
border-radius: 6px;
25-
background: none;
26-
cursor: pointer;
27-
transition .5s;
28-
&:active,
29-
&:focus {
30-
outline: none;
31-
}
32-
`;
4+
import ListItemButton from "Styled/ListItemButton";
5+
import Ul from "Styled/Ul";
6+
import Li from "Styled/Li";
337

348
const CheckBox = styled.div`
359
border-radius: 50%;
@@ -58,19 +32,19 @@ const CheckBox = styled.div`
5832
const RadioGroup = ({ children, selected, onChange }) => {
5933
const handleRadioButtonClick = value => () => onChange(value);
6034
return (
61-
<RadioList>
35+
<Ul>
6236
{children.map(({ label, value }) => (
63-
<RadioListItem key={value}>
64-
<RadioButton
37+
<Li key={value}>
38+
<ListItemButton
6539
onClick={handleRadioButtonClick(value)}
6640
selected={value === selected}
6741
>
6842
<CheckBox selected={value === selected} />
6943
{label}
70-
</RadioButton>
71-
</RadioListItem>
44+
</ListItemButton>
45+
</Li>
7246
))}
73-
</RadioList>
47+
</Ul>
7448
);
7549
};
7650

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import styled from "styled-components";
2+
3+
export default styled.div`
4+
width: 500px;
5+
`;

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import Col from "Components/Grid/Col";
4+
import ListItemButton from "Styled/ListItemButton";
5+
import Ul from "Styled/Ul";
6+
import Li from "Styled/Li";
7+
8+
const Box = styled.div`
9+
width: 500px;
10+
`;
11+
12+
const Step1 = ({ submitReport, viewResults }) => {
13+
return (
14+
<Box>
15+
<h2>What would you like to do?</h2>
16+
<Ul>
17+
<Li>
18+
<ListItemButton onClick={submitReport}>
19+
I want to Self Report
20+
</ListItemButton>
21+
</Li>
22+
<Li>
23+
<ListItemButton onClick={viewResults}>View my results</ListItemButton>
24+
</Li>
25+
</Ul>
26+
</Box>
27+
);
28+
};
29+
30+
export default Step1;

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from "react";
2+
import RadioGroup from "Components/RadioGroup";
3+
import { useState } from "react";
4+
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+
`;
14+
15+
const Step2 = ({
16+
selectedTestResult,
17+
onTestResultChange,
18+
testDate,
19+
onTestDateChange
20+
}) => {
21+
return (
22+
<>
23+
<h2>Self Report</h2>
24+
<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>
48+
<hr />
49+
<Box>
50+
<h2>What date was the test administered?</h2>
51+
<DatePicker selectedDay={testDate} onDayChange={onTestDateChange} />
52+
</Box>
53+
</>
54+
);
55+
};
56+
57+
export default Step2;

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

Lines changed: 38 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,52 @@
11
import React from "react";
2-
import RadioGroup from "Components/RadioGroup";
32
import { useState } from "react";
4-
import DatePicker from "Components/DatePicker";
53
import styled from "styled-components";
64
import Button from "Components/Common/Button";
75
import Row from "Components/Grid/Row";
6+
import Step1 from "./Step1";
7+
import Step2 from "./Step2";
88

9-
const Box = styled.div`
10-
width: 500px;
9+
const Wrapper = styled.div`
10+
padding-top: 50px;
1111
`;
12+
1213
const Contribute = () => {
13-
const [selected, setSelected] = useState("positive");
14-
const [date, setDate] = useState(new Date());
14+
const [step, setStep] = useState(0);
15+
const [selectedTestResult, setSelectedTestResult] = useState("positive");
16+
const [testDate, setTestDate] = useState(new Date());
17+
18+
const showButtons = step !== 0;
19+
20+
const handleNextClick = () => setStep(step => step + 1);
21+
const handleBackClick = () => setStep(step => step - 1);
1522

16-
const handleDayChange = day => {
17-
setDate(day);
18-
};
23+
const steps = [
24+
() => <Step1 submitReport={handleNextClick} viewResults={() => {}} />,
25+
() => (
26+
<Step2
27+
selectedTestResult={selectedTestResult}
28+
onTestResultChange={setSelectedTestResult}
29+
testDate={testDate}
30+
onTestDateChange={setTestDate}
31+
/>
32+
)
33+
];
34+
const CurrentStep = steps[step];
1935

2036
return (
21-
<div>
22-
<h2>Self Report</h2>
23-
<hr />
24-
<Box>
25-
<h3>Do you have test results for COVID-19?</h3>
26-
<p>
27-
All data is private and anonymous. You can still report your data to
28-
this map if you haven’t taken a test, and update test results later.{" "}
29-
</p>
30-
<RadioGroup selected={selected} onChange={setSelected}>
31-
{[
32-
{
33-
label: "Positive",
34-
value: "positive"
35-
},
36-
{
37-
label: "Negative",
38-
value: "negative"
39-
},
40-
{
41-
label: "I have not been tested",
42-
value: "not_tested"
43-
}
44-
]}
45-
</RadioGroup>
46-
</Box>
47-
<hr />
48-
<Box>
49-
<h2>What date was the test administered?</h2>
50-
<DatePicker selectedDay={date} onDayChange={handleDayChange} />
51-
</Box>
52-
<Row>
53-
<Button color="secondary">Back</Button>
54-
<Button color="primary">Next</Button>
55-
</Row>
56-
</div>
37+
<Wrapper>
38+
<CurrentStep />
39+
{showButtons && (
40+
<Row>
41+
<Button color="secondary" onClick={handleBackClick}>
42+
Back
43+
</Button>
44+
<Button color="primary" onClick={handleNextClick}>
45+
Next
46+
</Button>
47+
</Row>
48+
)}
49+
</Wrapper>
5750
);
5851
};
5952

‎UIcode/client/src/Styled/Li.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import styled from "styled-components";
2+
3+
export default styled.li`
4+
margin: 10px 0;
5+
`;

‎UIcode/client/src/Styled/ListItemButton.jsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import styled from "styled-components";
2+
import colors from "Theme/colors";
3+
4+
export default styled.button`
5+
display: flex;
6+
align-items: center;
7+
border: 1px solid
8+
${props => (props.selected ? colors.primary.main : colors.grey.light)};
9+
height: 60px;
10+
width: 100%;
11+
padding: 10px;
12+
border-radius: 6px;
13+
background: none;
14+
cursor: pointer;
15+
transition .5s;
16+
&:active,
17+
&:focus {
18+
outline: none;
19+
}
20+
`;

‎UIcode/client/src/Styled/Ul.jsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import styled from "styled-components";
2+
3+
export default styled.ul`
4+
list-style: none;
5+
display: flex;
6+
flex-direction: column;
7+
margin: 0;
8+
padding: 0;
9+
`;

0 commit comments

Comments
 (0)