-
Notifications
You must be signed in to change notification settings - Fork 188
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.
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
[next] Issue 1470 - Port SearchBar to NEXT.js #1581
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,152 @@ | ||
import { MouseEvent } from 'react'; | ||
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; | ||
import SearchIcon from '@material-ui/icons/Search'; | ||
import { | ||
Grid, | ||
MenuItem, | ||
TextField, | ||
FormControl, | ||
Paper, | ||
IconButton, | ||
Box, | ||
Typography, | ||
} from '@material-ui/core'; | ||
|
||
import SearchInput from './SearchInput/SearchInput'; | ||
import SearchHelp from './SearchHelp'; | ||
|
||
const useStyles = makeStyles((theme: Theme) => | ||
createStyles({ | ||
root: { | ||
overflow: 'visible', | ||
maxWidth: '785px', | ||
padding: 0, | ||
marginTop: '10rem', | ||
marginLeft: 'auto', | ||
marginRight: 'auto', | ||
marginBottom: theme.spacing(6), | ||
}, | ||
card: { | ||
padding: theme.spacing(2, 4, 2, 4), | ||
backgroundColor: theme.palette.background.default, | ||
}, | ||
header: { | ||
padding: 0, | ||
marginBottom: theme.spacing(2), | ||
backgroundColor: theme.palette.primary.main, | ||
}, | ||
h1: { | ||
display: 'block', | ||
transition: 'all linear 350ms', | ||
fontWeight: 600, | ||
color: theme.palette.text.secondary, | ||
[theme.breakpoints.between('xs', 'sm')]: { | ||
fontSize: '3rem', | ||
}, | ||
[theme.breakpoints.between('md', 'lg')]: { | ||
fontSize: '4rem', | ||
}, | ||
[theme.breakpoints.up('xl')]: { | ||
fontSize: '5rem', | ||
}, | ||
}, | ||
iconButton: { | ||
backgroundColor: theme.palette.secondary.main, | ||
'&:hover': { | ||
backgroundColor: theme.palette.secondary.dark, | ||
}, | ||
'& * > .MuiSvgIcon-root': { | ||
fontSize: '2rem', | ||
color: theme.palette.primary.contrastText, | ||
}, | ||
margin: 0, | ||
position: 'absolute', | ||
right: '10px', | ||
top: '6px', | ||
}, | ||
selectControl: { | ||
'& > *': { | ||
fontSize: '1.2rem', | ||
textTransform: 'capitalize', | ||
color: theme.palette.primary.main, | ||
}, | ||
}, | ||
selectItem: { | ||
fontSize: '1.4rem', | ||
textTransform: 'capitalize', | ||
color: theme.palette.primary.main, | ||
}, | ||
}) | ||
); | ||
|
||
type searchBarProps = { | ||
text: string; | ||
onTextChange: Function; | ||
filter: string; | ||
onFilterChange: Function; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. similar thing here, we should probably be more specific by specifying any parameters it may take or "()" for nothing, as well as the return type for this function There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Also, this is for the FilterChange and TextChange functions, text and filter are fine |
||
onSubmit: (e: MouseEvent<HTMLButtonElement>) => void; | ||
}; | ||
|
||
const SearchBar = ({ text, onTextChange, onFilterChange, filter, onSubmit }: searchBarProps) => { | ||
const classes = useStyles(); | ||
|
||
const searchOptions = ['post', 'author']; | ||
|
||
return ( | ||
<Box className={classes.root} boxShadow={2}> | ||
<Paper component="form" className={classes.card} elevation={0}> | ||
<Grid | ||
container | ||
className={classes.header} | ||
direction="row" | ||
spacing={8} | ||
alignItems="center" | ||
justify="flex-start" | ||
> | ||
<Grid item> | ||
<Typography variant="h1" className={classes.h1}> | ||
Search | ||
</Typography> | ||
</Grid> | ||
<SearchHelp /> | ||
</Grid> | ||
<Grid container direction="row" spacing={2} alignItems="center" justify="flex-start"> | ||
<Grid item xs={12} sm={2} lg={2}> | ||
<FormControl fullWidth> | ||
<TextField | ||
id="standard-select-search-type" | ||
select | ||
label="Filter" | ||
value={filter} | ||
variant="outlined" | ||
className={classes.selectControl} | ||
onChange={(event) => onFilterChange(event.target.value)} | ||
> | ||
{searchOptions.map((option) => ( | ||
<MenuItem key={option} value={option} className={classes.selectItem}> | ||
{option} | ||
</MenuItem> | ||
))} | ||
</TextField> | ||
</FormControl> | ||
</Grid> | ||
<Grid item xs={12} sm={10} lg={10}> | ||
<FormControl fullWidth> | ||
<SearchInput searchFilter={filter} text={text} onTextChange={onTextChange} /> | ||
<IconButton | ||
className={classes.iconButton} | ||
type="submit" | ||
onClick={onSubmit} | ||
aria-label="search" | ||
> | ||
<SearchIcon /> | ||
</IconButton> | ||
</FormControl> | ||
</Grid> | ||
</Grid> | ||
</Paper> | ||
</Box> | ||
); | ||
}; | ||
|
||
export default SearchBar; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import PostSearchInput from './PostSearchInput'; | ||
import AuthorSearchInput from './AuthorSearchInput'; | ||
|
||
type searchInputProps = { | ||
text: string; | ||
onTextChange: Function; | ||
searchFilter: string; | ||
}; | ||
|
||
const SearchInput = ({ text, onTextChange, searchFilter }: searchInputProps) => { | ||
return searchFilter === 'author' ? ( | ||
<AuthorSearchInput text={text} onChange={(event) => onTextChange(event.target.value)} /> | ||
) : ( | ||
<PostSearchInput text={text} onChange={(event) => onTextChange(event.target.value)} /> | ||
); | ||
}; | ||
|
||
export default SearchInput; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
for
onTextChange
should we be clearer than just Function. It is an onChange event handler and I believe in TS you have ChangeEventHandler/EventHandler type too. Whats your thought?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It should be changed to a ChangeEvent function that returns void
Since it's for an input element, we can type it to
HTMLInputElement
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's do it in a follow-up PR, because we are drilling a lot of stuff here. After getting everything working we will need to create an interface to
SearchPage
's components and acontext.
These functions are connected to how we build the URL query of a search. So I believe that we need to be care full with that. It's working now. Let's keep this for now.I'm opening an issue for the next step (interface and context) now.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
#1584