Skip to content

Commit

Permalink
[Pwa] Add welcome screen landing page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@cvanem
cvanem committed Nov 24, 2024
1 parent 71e78a4 commit 35e2854
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 40 deletions.
Binary file added public/images/logo_blue.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
108 changes: 68 additions & 40 deletions src/components/pwa/Pwa.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import * as React from 'react';
import { Button, Grid, Container, LinearProgress, Divider } from '@mui/material';
import { Button, Grid, Container, LinearProgress, Divider, Collapse, Box } from '@mui/material';
import PwaApps from './PwaApps';
import PwaAppBar from './PwaAppBar';
import { useScrollElement } from '../layout/ScrollElementProvider';
import useHeight from '../layout/ViewPort/hooks/useHeight';
import { useHandleTableReset, useTableFilterUpdate, useTableFilterValue } from '../application/GenericTable/store';
import { isEmpty } from '../../helpers';
import { Conditions } from '../../database/models/Application';
import logo from '../../images/logo_blue.png';

const SingleAnswerButtons = ({ value, onChange, onNext, options = [] }) => {
const handleClick = React.useCallback(
Expand Down Expand Up @@ -130,9 +131,11 @@ const getQuestionFilters = values => {
const defaultState = { index: 0, backIndex: 0, values: {} };

export default function Pwa() {
const [{ index, values }, setState] = React.useState(defaultState);
const [{ index, values }, setState] = React.useState({ ...defaultState, index: -1 });
const showWelcome = index < 0 ? true : false;

const question = index <= questions.length - 1 ? questions[index] : { id: undefined, label: '', options: [], Field: () => <></>, onSelect: undefined };
const question =
index >= 0 && index <= questions.length - 1 ? questions[index] : { id: undefined, label: '', options: [], Field: () => <></>, onSelect: undefined };

const searchIndex = questions.length;
const { id, label, options, Field = SingleAnswerButtons, onSelect = undefined } = question;
Expand Down Expand Up @@ -183,7 +186,7 @@ export default function Pwa() {
}, [setState, scrollTop]);

const handleBack = React.useCallback(() => {
setState(p => ({ ...p, index: p?.backIndex, backIndex: p.backIndex > 0 ? p.backIndex - 1 : 0 }));
setState(p => ({ ...p, index: p?.backIndex, backIndex: p.backIndex >= 0 ? p.backIndex - 1 : -1 }));
scrollTop();
}, [setState, scrollTop]);

Expand All @@ -205,46 +208,71 @@ export default function Pwa() {

return (
<Container maxWidth='lg' sx={{ pt: 1, pb: 2, px: 0 }}>
<Grid container spacing={1} alignItems='center' justifyContent='center' sx={{ px: 1 }}>
<Grid item xs={12}>
<PwaAppBar
handleBack={handleBack}
handleNext={handleNext}
handleSearch={handleSearch}
disableBack={index <= 0}
disableNext={showResults}
disableSearch={showResults}
handleReset={handleReset}
/>
</Grid>
<Grid item xs={12}>
<Divider />
</Grid>
</Grid>
{showResults ? (
<PwaApps />
) : (
<Grid container spacing={1} alignItems='center' justifyContent='center' sx={{ px: 1, pt: 1 }}>
<Grid item xs={12}>
<Grid container spacing={1} alignItems='center'>
<Grid item xs>
<LinearProgress value={progress} variant='determinate' sx={{ height: 12, borderRadius: 5 }} />
{showWelcome ? (
<Box sx={{ textAlign: 'center', display: 'flex', justifyContent: 'center', px: 1, py: 2 }}>
<Box sx={{ maxWidth: 400, borderRadius: 5, border: 4, borderColor: 'black', px: 1, py: 4 }}>
<Grid container spacing={6}>
<Grid item xs={12} sx={{ fontWeight: 700, fontSize: 24, textAlign: 'center' }}>
Welcome to MINDapps!
</Grid>
<Grid item sx={{ fontWeight: 'bold', color: 'primary.dark' }}>
{index + 1} / {questions.length}
<Grid item xs={12} sx={{ textAlign: 'center' }}>
<img src={logo} alt='mindapp' style={{ maxWidth: 88 }} />
</Grid>
<Grid item xs={12} sx={{ fontSize: 18, textAlign: 'center' }}>
Take this quiz to find a suitable app.
</Grid>
<Grid item xs={12} sx={{ textAlign: 'center' }}>
<Button onClick={handleNext} variant='contained' size='large' sx={{ minHeight: 64 }}>
Start Quiz!
</Button>
</Grid>
</Grid>
</Box>
</Box>
) : (
<>
<Grid container spacing={1} alignItems='center' justifyContent='center' sx={{ px: 1 }}>
<Grid item xs={12}>
<PwaAppBar
handleBack={handleBack}
handleNext={handleNext}
handleSearch={handleSearch}
//disableBack={index <= 0}
disableNext={showResults}
disableSearch={showResults}
handleReset={handleReset}
/>
</Grid>
<Grid item xs={12}>
<Divider />
</Grid>
</Grid>
<Grid item xs={12}>
<Divider />
</Grid>
<Grid item xs={12} sx={{ textAlign: 'center', fontSize: 32, color: 'primary.dark' }}>
{label}
</Grid>
<Grid item xs={12} sx={{ mt: 0.5 }}>
<Field onChange={onChange(index)} onNext={handleNext} options={options} value={value} />
</Grid>
</Grid>
{showResults ? (
<PwaApps />
) : (
<Grid container spacing={1} alignItems='center' justifyContent='center' sx={{ px: 1, pt: 1 }}>
<Grid item xs={12}>
<Grid container spacing={1} alignItems='center'>
<Grid item xs>
<LinearProgress value={progress} variant='determinate' sx={{ height: 12, borderRadius: 5 }} />
</Grid>
<Grid item sx={{ fontWeight: 'bold', color: 'primary.dark' }}>
{index + 1} / {questions.length}
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Divider />
</Grid>
<Grid item xs={12} sx={{ textAlign: 'center', fontSize: 32, color: 'primary.dark' }}>
{label}
</Grid>
<Grid item xs={12} sx={{ mt: 0.5 }}>
<Field onChange={onChange(index)} onNext={handleNext} options={options} value={value} />
</Grid>
</Grid>
)}
</>
)}
</Container>
);
Expand Down
Binary file added src/images/logo_blue.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 35e2854

Please sign in to comment.