Skip to content
This repository has been archived by the owner on Feb 14, 2024. It is now read-only.

Commit

Permalink
Merge pull request #14 from BU-Spark/initial-frontend
Browse files Browse the repository at this point in the history 
Repo merge with updates
  • Loading branch information
@Agedel
Agedel authored Dec 21, 2022
2 parents 2387d4e + 297b145 commit 3e68e0e
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 73 deletions.
10 changes: 10 additions & 0 deletions frontend/src/components/Quiz.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ const Quiz = () => {
//showScore allows us to see the final summary at the very end, once the questions list is exhausted
const [currentQuestion, setCurrentQuestion] = useState(0);
const [showScore, setShowScore] = useState(false);

const handleAnswerButtonClick = (
answerText: string,
currentQuestion: number
Expand All @@ -93,13 +94,22 @@ const Quiz = () => {
const nextQuestions = currentQuestion + 1;

console.log(nextQuestions);

if (nextQuestions < questions.length) {
setCurrentQuestion(nextQuestions);
} else {
setShowScore(true);
}
};

//Local storage hook for remembering answers. Seems to work but current bug relating to the displaying of answers results in duplicate answers
React.useEffect(() => {
localStorage.setItem("leastImp", JSON.stringify(leastImp));
localStorage.setItem("lessImp", JSON.stringify(lessImp));
localStorage.setItem("imp", JSON.stringify(imp));
localStorage.setItem("moreImp", JSON.stringify(moreImp));
}, [leastImp, lessImp, imp, moreImp]);

const showLeast = () => leastImp.map((item) => <li>{item}</li>);
const showLess = () => lessImp.map((item) => <li>{item}</li>);
const showImp = () => imp.map((item) => <li>{item}</li>);
Expand Down
12 changes: 9 additions & 3 deletions frontend/src/components/Select/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,24 @@ import MenuItem from "@mui/material/MenuItem";
import Select, { SelectChangeEvent } from "@mui/material/Select";

export default function BasicSelect() {
const [age, setAge] = React.useState("English");
const [lang, setlang] = React.useState("English");

const handleChange = (event: SelectChangeEvent) => {
setAge(event.target.value as string);
setlang(event.target.value as string);
};
//Used for the dropdown button in the navigation menu, to be a trigger for Strapi content, i.e. when Spanish selected, switches to Spanish version, etc.

//Localstorage
React.useEffect(() => {
localStorage.setItem("selectedLanguage", lang);
}, [lang]);

return (
<Box sx={{ minWidth: 120 }}>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
value={lang}
onChange={handleChange}
>
<MenuItem value={"English"}>English</MenuItem>
Expand Down
233 changes: 163 additions & 70 deletions frontend/src/pages/MyChoices.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,195 @@
import { Grid, ThemeProvider, Typography } from "@mui/material";
import { Box, Divider, Grid, ThemeProvider, Typography } from "@mui/material";
import { CircularProgress } from '@mui/material';
import React from "react";
import Layout from "../components/Layout";
import WelcomeImg from "./pageStyle/welcome.png";
import { ApiHomePageeHomePagee } from "../schemas";
import FavoriteIcon from '@mui/icons-material/Favorite';
import { start } from "repl";

const MyChoices = () => {
const textColor = "#0c3a25";
const lightGreen = "#dff0d8";
const darkGreen = "#0c3a25";
const lightGreen = '#dff0d8';

const titleToDivider = 2;
const toNextSection = 4;

//for strapi purpose:
// interface Response {
// data: [] | ApiHomePageeHomePagee[];
// }
// const defaultResponse = { data: [] };

// const data: Response = useFetch<Response>(
// "http://localhost:1337/api/home-pagees?populate=*", defaultResponse
// );


// console.log("data" + data.data[0].attributes);
return (

<Layout>
{/* section for Title */}
<Grid
container
columns={{ xl: 12, lg: 12, md: 12 }}
item
xl={12}
lg={12}
md={12}
<Grid container columns={{ xl: 12, lg: 12, md: 12 }} item xl={12} lg={12} md={12}
sx={{
backgroundColor: "white",
direction: "column",
pt: 8,
pb: 8,
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
backgroundColor: "white", direction: "column",
mt: 1, pt: 8, pb: 8, display: "flex", alignItems: "center", justifyContent: "center"
}} >
{/* Main title */}

<Grid item xl={5} lg={5} md={5} sx={{ alignItems: "center" }}>
<Typography variant="h2" color={textColor} fontWeight="500">
Compare your choices
</Typography>
<Typography variant="h2" color={darkGreen} fontWeight="500">Compare Your Choices</Typography>
</Grid>

{/* Sub title */}
<Grid
container
item
xl={12}
lg={12}
md={12}
sx={{ alignItems: "center", justifyContent: "center", pt: 6, pb: 8 }}
>
<Grid
container
item
xl={8}
lg={8}
md={8}
sx={{ alignItems: "center", justifyContent: "space-between" }}
>
<Grid container item xl={12} lg={12} md={12} sx={{ alignItems: "center", justifyContent: "center", pt: 6, pb: 8 }}>
<Grid container item xl={7} lg={7} md={7} sx={{ alignItems: "center", justifyContent: "space-between" }}>
<Grid item sx={{ alignItems: "center" }}>
<Typography variant="h5" color={textColor}>
Wait for Labor
</Typography>
<Typography variant="h5" color={darkGreen}>Wait for Labor</Typography>
</Grid>

<Grid item sx={{ alignItems: "center" }}>
<Typography variant="h5" color={textColor}>
41-42 Week Induction
</Typography>
<Typography variant="h5" color={darkGreen}>41-42 Week Induction</Typography>
</Grid>
<Grid item sx={{ alignItems: "center" }}>
<Typography variant="h5" color={textColor}>
39-41 Week Induction
</Typography>
<Typography variant="h5" color={darkGreen}>39-41 Week Induction</Typography>
</Grid>
</Grid>
</Grid>
</Grid>

<Grid container xl={12} lg={12} md={12} sx={{ alignItems: "center" }}>
<Grid item>
<Typography> Time</Typography>
</Grid>
</Grid>
<Grid
container
item
xl={12}
lg={12}
md={12}
sx={{ alignItems: "center" }}
{/* section Timing */}
<Grid item container xl={12} lg={12} md={12}
sx={{ alignItems: "center", justifyContent: "center" }}
>
<Grid item>
<Typography> Most likely to happen between</Typography>
<Grid container item xl={8} lg={8} md={8}
direction="column">
<Grid itemProp="">
<Typography variant="h4" > Timing</Typography>
</Grid>
<Grid item sx={{ pb: titleToDivider }}>
<Typography> Most likely to happen between</Typography>
</Grid>
{/* line */}
<Divider sx={{ backgroundColor: lightGreen }} />
{/* section of data */}
<Grid container item sx={{ pt: 4, justifyContent: "space-between" }}>
<Grid container item xl={3} lg={3} md={3} sx={{ borderRadius: "50%", backgroundColor: lightGreen, alignContent: "center", p: 8 }}>
<Typography sx={{ textAlign: "center" }}> 37 - 42+</Typography>
<Typography sx={{ textAlign: "center" }}> Weeks</Typography>
</Grid>
<Grid container item xl={3} lg={3} md={3} sx={{ borderRadius: "50%", backgroundColor: lightGreen, alignContent: "center" }}>
<Typography sx={{ textAlign: "center" }}> 41 - 42</Typography>

<Typography sx={{ textAlign: "center" }}> Weeks</Typography>
</Grid>
<Grid container item xl={3} lg={3} md={3} sx={{ borderRadius: "50%", backgroundColor: lightGreen, alignContent: "center" }}>
<Typography sx={{ textAlign: "center" }}> 39 - 41</Typography>
<Typography sx={{ textAlign: "center" }}> Weeks</Typography>
</Grid>

</Grid>

{/* section Labor Time */}

<Grid item >
<Typography variant="h4"> Labor Time</Typography>
</Grid>
<Grid item sx={{ pb: titleToDivider, pt: toNextSection }}>
<Typography> Sometimes longer or shorter</Typography>
</Grid>
{/* line */}
<Divider sx={{ backgroundColor: lightGreen }} />

{/* data section */}

<Grid container item sx={{ pt: 4, justifyContent: "space-between" }}>
<Grid container item xl={3} lg={3} md={3} sx={{ borderRadius: "50%", backgroundColor: darkGreen, alignContent: "center", p: 8 }}>
<Typography color={lightGreen} sx={{ textAlign: "center" }}> 8 - 24</Typography>
<Typography color={lightGreen} sx={{ textAlign: "center" }}> Days</Typography>
</Grid>
<Grid container item xl={3} lg={3} md={3} sx={{ borderRadius: "50%", backgroundColor: darkGreen, alignContent: "center" }}>
<Typography color={lightGreen} sx={{ textAlign: "center" }}> 1 - 3</Typography>

<Typography color={lightGreen} sx={{ textAlign: "center" }}> Days</Typography>
</Grid>
<Grid container item xl={3} lg={3} md={3} sx={{ borderRadius: "50%", backgroundColor: darkGreen, alignContent: "center" }}>
<Typography color={lightGreen} sx={{ textAlign: "center" }}> 1 - 3</Typography>
<Typography color={lightGreen} sx={{ textAlign: "center" }}> Days</Typography>
</Grid>

</Grid>

{/* Experience Section */}
<Grid item sx={{ pb: titleToDivider, pt: toNextSection }}>
{/* parallel display */}
<Typography display="inline"
variant="h4"> Experience</Typography>
<Typography display="inline"> 6</Typography>
</Grid>

{/* line */}
<Divider sx={{ backgroundColor: lightGreen }} />
{/* 2 column data section */}
<Grid container item sx={{ pt: 4, justifyContent: "space-between" }}>
<Grid container item xl={4} lg={4} md={4} sx={{ pb: 4, direction: "column", alignItems: "center", justifyContent: "center" }}>
<Grid item ><FavoriteIcon sx={{ fontSize: 50 }} /></Grid>
<Grid item><Typography >More satisfied with care (less waiting, fewer interventions)</Typography></Grid>
</Grid>
<Grid container item xl={6} lg={6} md={6} sx={{ backgroundColor: lightGreen }}>
<Grid item xl={6} lg={6} md={6} ><Divider><FavoriteIcon sx={{ fontSize: 50 }} /></Divider></Grid>
<Grid item><Typography >More satisfied with care (less waiting, fewer interventions)</Typography></Grid>
</Grid>


</Grid>

{/* Pain Medication Section */}
<Grid item sx={{ pb: titleToDivider, pt: toNextSection }}>
{/* parallel display */}
<Typography display="inline" variant="h4"> Pain Medication</Typography>
<Typography display="inline"> 6</Typography>
</Grid>

<Divider sx={{ backgroundColor: lightGreen }} />

{/* two colomn data section */}
{/* Thought about using CircularProgress but it doesn't allow children inside */}

<Grid container item sx={{ pt: 4, justifyContent: "space-between" }}>
<Grid container item xl={4} lg={4} md={4} sx={{ alignContent: "center", p: 8 }}>
<Grid item >
<CircularProgress variant="determinate" value={49} />
<Typography>49 %</Typography>
</Grid>
</Grid>

<Grid container item xl={4} lg={4} md={4} sx={{ alignContent: "center" }}>
<Grid item >
<CircularProgress variant="determinate" value={52} />
<Typography>52 %</Typography>
</Grid>
</Grid>

</Grid>

{/* TODO: for all three options..
Potential Risks
learn about your choice
Source
*/}
</Grid>
</Grid>

<Grid
container
item
xl={8}
lg={8}
md={8}
sx={{ p: 0.2, backgroundColor: lightGreen }}
></Grid>










</Layout>
);
};
Expand Down

0 comments on commit 3e68e0e

Please sign in to comment.