Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create v2 filter #342

Merged
merged 6 commits into from
Sep 27, 2023
Merged

Create v2 filter #342

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b2dfe85
Visuals
astoppop Aug 22, 2023
534e033
Clicking on filter tag implemented
astoppop Aug 22, 2023
60ebd1a
Visuals done
astoppop Sep 5, 2023
36de2ac
Fixed merge conflicts
astoppop Sep 5, 2023
e6e4326
Added actual filter functionality
astoppop Sep 13, 2023
a780f1f
Changed AddResourceModalV2 and Filter from connect to useDispatch and…
astoppop Sep 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 76 additions & 60 deletions src/components/AddResourceModal/AddResourceModalV2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,32 @@
import React, { createRef, useEffect, useRef } from 'react';
import ChooseResource from './ChooseResource';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
import { Box, DialogContent, Paper } from '@mui/material';
import { ReactComponent as CloseIcon } from '../icons/CloseIcon.svg';
import IconButton from '@mui/material/IconButton';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import React, { createRef, useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
TOOLBAR_MODAL_NONE,
TOOLBAR_MODAL_RESOURCE
} from '../../actions/actions';
import { ReactComponent as CloseIcon } from '../icons/CloseIcon.svg';
import ChooseResource from './ChooseResource';

export default function AddResourceModalV2(props) {
const dispatch = useDispatch();
const toolbarModal = useSelector(state => state.toolbarModal);

const setToolbarModal = modal => {
dispatch({ type: 'SET_TOOLBAR_MODAL', modal: modal });
};

const AddResourceModalV2 = props => {
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down('md'));

const onClose = () => props.setOpen(false);
const onClose = () => {
if (toolbarModal == TOOLBAR_MODAL_RESOURCE) {
setToolbarModal(TOOLBAR_MODAL_NONE);
}
};

const refNode = createRef();
//useOnClickOutside(refNode, () => onClose());
Expand All @@ -19,21 +35,23 @@ const AddResourceModalV2 = props => {
* Hook that alerts clicks outside of the passed ref
* Source: https://stackoverflow.com/a/42234988
*/
function useOutsideAlerter(ref) {
function useOutsideAlerter(ref) {
useEffect(() => {
/**
* Alert if clicked on outside of element
*/
function handleClickOutside(event) {
if (ref.current && !ref.current.contains(event.target)) {
props.setOpen(false);
if (toolbarModal == TOOLBAR_MODAL_RESOURCE) {
setToolbarModal(TOOLBAR_MODAL_NONE);
}
}
}
// Bind the event listener
document.addEventListener("mousedown", handleClickOutside);
document.addEventListener('mousedown', handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener('mousedown', handleClickOutside);
};
}, [ref]);
}
Expand All @@ -43,59 +61,57 @@ const AddResourceModalV2 = props => {

return (
<>
{fullScreen ? (
props.open && (
<Box
ref={refNode}
style={{ display: props.open ? 'inline' : 'none' }}
bgcolor={'white'}
sx={{
borderRadius: '10px',
position: 'absolute',
top: '840px',
left: '20px',
boxShadow: 3
}}
>
<ChooseResource setFormStep={() => {}} />
</Box>
)
) : (
props.open && (
<Paper
ref={wrapperRef}
open={props.open}
onClose={onClose}
sx={{
position: 'absolute',
left: '32px',
bottom: '133px'
}}
>
{fullScreen && (
<IconButton
aria-label="close"
onClick={onClose}
{fullScreen
? toolbarModal == TOOLBAR_MODAL_RESOURCE && (
<Box
ref={refNode}
style={{
display:
toolbarModal == TOOLBAR_MODAL_RESOURCE ? 'inline' : 'none'
}}
bgcolor={'white'}
sx={{
borderRadius: '10px',
position: 'absolute',
right: 20,
top: 48,
color: theme => theme.palette.grey[500]
top: '840px',
left: '20px',
boxShadow: 3
}}
size="large"
>
<CloseIcon />
</IconButton>
)}
<ChooseResource setFormStep={() => {}} />
</Box>
)
: toolbarModal == TOOLBAR_MODAL_RESOURCE && (
<Paper
ref={wrapperRef}
onClose={onClose}
sx={{
position: 'absolute',
left: '32px',
bottom: '133px'
}}
>
{fullScreen && (
<IconButton
aria-label="close"
onClick={onClose}
sx={{
position: 'absolute',
right: 20,
top: 48,
color: theme => theme.palette.grey[500]
}}
size="large"
>
<CloseIcon />
</IconButton>
)}

<DialogContent>
<ChooseResource setFormStep={() => {}} />
</DialogContent>
</Paper>
)
)}
<DialogContent>
<ChooseResource setFormStep={() => {}} />
</DialogContent>
</Paper>
)}
</>
);
};

export default AddResourceModalV2;
}
16 changes: 8 additions & 8 deletions src/components/AddTapModal/AddTapModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import styles from './AddTapModal.module.scss';
import { faPlus } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import firebase from 'firebase/compat/app';
import React, { Component } from 'react';
import {
Modal,
Accordion,
Button,
Form,
Modal,
OverlayTrigger,
Popover,
Accordion
Popover
} from 'react-bootstrap';
import ImageUploader from 'react-images-upload';
import firebase from 'firebase/compat/app';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus } from '@fortawesome/free-solid-svg-icons';
import { isMobile } from 'react-device-detect';
import ImageUploader from 'react-images-upload';
import styles from './AddTapModal.module.scss';

export class AddTapModal extends Component {
constructor(props) {
Expand Down
182 changes: 182 additions & 0 deletions src/components/Filter/Filter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
import { Box, Button, Collapse, Paper } from '@mui/material';
import React, { useState } from 'react';
import { isMobile } from 'react-device-detect';
import { useDispatch, useSelector } from 'react-redux';
import { TOOLBAR_MODAL_FILTER } from '../../actions/actions';
import styles from './Filter.module.scss';

const FilterTags = props => (
<Box className={styles.filterTags}>
{props.tags.map((tag, key) => (
<Box
key={key}
className={
styles.filterTag +
(props.activeTags[props.filterType][props.index][key]
? ' ' + styles.filterTagSelected
: '')
}
onClick={() => {
props.handleTag(0, props.filterType, props.index, key);
props.forceUpdate();
}}
>
<p>{tag}</p>
</Box>
))}
</Box>
);

const FilterTagsExclusive = props => (
<Box className={styles.filterTagsExclusive}>
{props.tags.map((tag, key) => (
<Box
key={key}
className={
styles.filterTagExclusive +
(props.activeTags[props.filterType][props.index] == key
? ' ' + styles.filterTagSelected
: '')
}
onClick={() => {
props.handleTag(1, props.filterType, props.index, key);
props.forceUpdate();
}}
>
<p>{tag}</p>
</Box>
))}
</Box>
);

const filterTypes = {
WATER: 'Water Filter',
FOOD: 'Food Filter',
FORAGING: 'Foraging Filter',
BATHROOM: 'Bathroom Filter'
};
export { filterTypes };

let filterType = filterTypes.WATER;

function useForceUpdate() {
const [value, setValue] = useState(0);
return () => setValue(value => value + 1);
}

export default function Filter(props) {
const forceUpdate = useForceUpdate();
const dispatch = useDispatch();
const toolbarModal = useSelector(state => state.toolbarModal);
return (
<>
{!isMobile && (
<Paper
sx={{
position: 'absolute',
left: '32px',
bottom: '133px',
width: '526.25px',
borderRadius: '10px'
}}
>
<Collapse
in={toolbarModal == TOOLBAR_MODAL_FILTER}
orientation="vertical"
timeout="auto"
>
{
<>
<Box className={styles.header}>
<h1>{props.filters[filterType].title}</h1>
</Box>

<Box sx={{ margin: '20px' }}>
{props.filters[filterType].categories.map(
(category, index) => {
return (
<>
<h2 className={styles.label}>{category.header}</h2>
{category.type == 0 ? (
<FilterTags
tags={category.tags}
filterType={filterType}
index={index}
handleTag={props.handleTag}
activeTags={props.activeTags}
forceUpdate={forceUpdate}
/>
) : (
<FilterTagsExclusive
tags={category.tags}
filterType={filterType}
index={index}
handleTag={props.handleTag}
activeTags={props.activeTags}
forceUpdate={forceUpdate}
/>
)}
</>
);
}
)}
</Box>
<Box
sx={{
marginBottom: '10px',
display: 'grid',
gridTemplateColumns: 'repeat(2, 1fr)',
fontSize: '16.8px',
fontFamily: "'Inter', sans-serif"
}}
>
<Box
sx={{
margin: '10px 20px'
}}
>
<p
onClick={props.clearAll}
style={{
margin: 0,
width: 'fit-content',
position: 'relative',
top: '50%',
transform: 'translateY(-50%)',
borderBottom: '2px solid #2D3748',
fontWeight: '500',
cursor: 'pointer',
userSelect: 'none'
}}
>
Clear All
</p>
</Box>
<Box>
<Button
onClick={props.applyTags}
style={{
marginRight: '20px',
padding: '10px 20px',
width: 'fit-content',
position: 'relative',
float: 'right',
border: '1px solid #09A2E5',
borderRadius: '8px',
fontWeight: '600',
color: '#09A2E5'
}}
>
Apply
</Button>
</Box>
</Box>
</>
}
</Collapse>
</Paper>
)}
{isMobile && <Paper></Paper>}
</>
);
}
Loading
Loading