-
Notifications
You must be signed in to change notification settings - Fork 189
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
Port SearchPage from Gatsby to NextJS #1583
Conversation
src/frontend/next/package.json
Outdated
@@ -15,7 +15,8 @@ | |||
"react": "^16.13.1", | |||
"react-dom": "^16.13.1", | |||
"react-use": "^15.3.8", | |||
"swr": "^0.4.0" | |||
"swr": "^0.4.0", |
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.
I think this is in master right now, so you can rebase to get it.
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.
Yep, I just haven't pushed the newest commits yet and stuff
Are going to get this in today for 1.5? |
@humphd I doubt it, but 1.6 for sure. |
Still failing a few things:
|
import { useSWRInfinite } from 'swr'; | ||
import { Container, Box, Grid, Typography, ListSubheader } from '@material-ui/core'; | ||
import useSiteMetadata from '../../hooks/use-site-metadata'; | ||
import Timeline from '../Timeline'; |
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.
Timeline is in now, can we get this rebased so I can test?
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.
Rebased!
const prepareUrl = (index: number) => | ||
text | ||
? `${telescopeUrl}/query?text=${encodeURIComponent(text)}&filter=${filter}&page=${index}` | ||
: // Should we return an empty string? or null here? |
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.
Why would text ever be null? Should we not always have it be a valid string, perhaps ''
in the case that the user hasn't done anything yet?
@@ -80,9 +80,9 @@ const useStyles = makeStyles((theme: Theme) => | |||
); | |||
|
|||
type searchBarProps = { | |||
text: string; | |||
text: string | null; |
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.
All these null types: can we not assume that text/string values are either a string of ''
(empty string) so nothing breaks, and it will simplify a bunch of code later?
Some minor styling issues. This mostly works except for when you directly paste a url such as Also need to fix styling |
event.preventDefault(); | ||
setTextParam(text); | ||
setFilterParam(filter); | ||
router.push(`http://localhost:8000/search?text=${text}&filter=${filter}`); |
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.
localhost:8000?
console.log('testing params'); | ||
console.log(router.query); | ||
console.log(textParam); | ||
console.log(filterParam); |
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.
Remove all this
); | ||
}; | ||
|
||
export default withRouter(SearchPage); |
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.
Why not just use the useRouter()
hook?
Adding @rjayroso and @chrispinkney to the reviewers list, since this overlaps with #1546 and #1621. I'd love to get all of this merged into 1.6. Let's co-ordinate on Slack in the next few days, as all of this is quite close. |
import SearchBar from '../components/SearchBar'; | ||
import BackToTopButton from '../components/BackToTopButton'; | ||
|
||
enum FilterParamType { |
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.
Do it like https://github.com/Seneca-CDOT/telescope/blob/master/src/frontend/next/src/components/SearchResults.tsx#L45, and in a follow-up, we can synchronize all of these to use a common definition of the filter params.
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.
Ah so something like
type FilterProp = {
filter: 'post' | 'author';
};
and to type the hooks I use
const [filter, setFilter] = useState<FilterProp['filter']>('post');
import SearchBar from '../components/SearchBar'; | ||
import BackToTopButton from '../components/BackToTopButton'; | ||
|
||
// Required to type filter or else TS lint will yell at you |
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.
This can be removed, it's standard with TS to need this.
folder changes changes added use-query-params package
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.
Loved the comments, really helping me understand a lot of this code which is otherwise pretty foreign to me. 😄
Thanks for doing this @c3ho, land ho! |
The buttons are going to look bad, but I guess that's a separate issue |
Issue This PR Addresses
Fixes #1438
Type of Change
Description
Recreating PR, previous PR was changed to port the Spinner only.
I had to add null typing to some of the other components to accommodate this PR
This ports the SearchPage from Gatsby to Next
Checklist