Remove server side rendering #36
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/dotcms/dotcms-documentation/4kjkzQ17fh7KvzG9sCTbvrVZJvXa |
components/Pagination.tsx
Outdated
| <button | ||
| className={classNames(buttonClasses, arrowButtons)} | ||
| onClick={() => changePage(page - 1)} | ||
| > | ||
| <ArrowSVG className={leftArrowClasses} /> | ||
| </button> |
components/Pagination.tsx
Outdated
| <button | ||
| className={classNames( | ||
| buttonClasses, | ||
| page == pagNumber && buttonClassesActive | ||
| )} | ||
| onClick={() => changePage(pagNumber)} | ||
| > | ||
| {pagNumber} | ||
| </button> |
| @@ -10,7 +10,7 @@ export const Search = (): JSX.Element => { | |||
| const handlerInput = ({ target }) => setSearch(target.value); | |||
| const handlerSubmit = (e) => { | |||
| e.preventDefault(); | |||
| router.push(`/search/${search}/1`); | |||
| router.push(`/search/?search=${search}&pag=1`); | |||
There was a problem hiding this comment.
| router.push(`/search/?search=${search}&pag=1`); | |
| router.push(`/search/?search=${search}&page=1`); |
| CodeshareCollection( | ||
| limit: 10, | ||
| limit: 100000, |
There was a problem hiding this comment.
Ask Daniel if we can pass a wildcard for "all" here.
There was a problem hiding this comment.
Apparently, there isn't.
components/Pagination.tsx
Outdated
| const { buttonCount, pagStart } = PaginationLenght({ | ||
| totalPages, | ||
| page, | ||
| paginationLimit | ||
| }); |
There was a problem hiding this comment.
This looks like the perfect candidate for you to learn how to create your own react hooks, I mean, you don't have to but I know you want it: https://reactjs.org/docs/hooks-custom.html 😂
next.config.js
Outdated
| images: { | ||
| loader: 'imgix', | ||
| path: 'https://noop/' | ||
| }, |
There was a problem hiding this comment.
Does this affect images in general?
There was a problem hiding this comment.
I've been reading and so far, it doesn't seem like it's going to affect the images. I took this solution from a problem they had here
pages/codeshare/topic/[topic].tsx
Outdated
| interface paramsUrlTitle { | ||
| link: string; | ||
| } | ||
|
|
||
| interface UrlTitleParams { | ||
| params: { | ||
| topic: string; | ||
| }; | ||
| } |
There was a problem hiding this comment.
I think next have types for this.
If not, move this to the top.
pages/codeshare/topic/[topic].tsx
Outdated
| const buildParams = (data: paramsUrlTitle[], paths: UrlTitleParams[]): UrlTitleParams[] => { | ||
| data.forEach((item: paramsUrlTitle) => { | ||
| paths.push({ params: { topic: item.link } }); | ||
| }); | ||
| return paths; | ||
| }; |
hook/pagination.tsx
Outdated
| @@ -22,7 +22,8 @@ export const PaginationLenght = ({ | |||
| const pagEnd = totalPages > paginationLimit ? paginationLimit : totalPages; | |||
| setButtonCount(new Array(pagEnd).fill(0)); | |||
| setLoaded(true); | |||
| }, [page, totalPages, paginationLimit]); | |||
| // eslint-disable-next-line react-hooks/exhaustive-deps | |||
There was a problem hiding this comment.
We need to stop disabling things, why we have to here?
components/Pagination.tsx
Outdated
| import classNames from 'classnames'; | ||
|
|
||
| // Helper | ||
| import { PaginationLenght } from '@hook/pagination'; |
There was a problem hiding this comment.
| import { PaginationLenght } from '@hook/pagination'; | |
| import { PaginationLenght } from '@hooks/pagination'; |
components/Pagination.tsx
Outdated
| totalCount: number; | ||
| totalPages: number; | ||
| baseUrl?: string; | ||
| state?: Dispatch<SetStateAction<number>>; |
There was a problem hiding this comment.
This is not a state is more like a function to update something no?
There was a problem hiding this comment.
Yeah, you are right.
components/Pagination.tsx
Outdated
| const changePage = (page) => { | ||
| if (state) { | ||
| state(() => page); | ||
| } else { | ||
| router.push(baseUrl + page); | ||
| } |
There was a problem hiding this comment.
For what I can tell here, this function will update the page client side OR just navigating? so we are using the same Pagination for both cases?
There was a problem hiding this comment.
Yes, we are using the same component for both cases. Should we make two different paginations? If we do that, the code will be more readable.
components/Pagination.tsx
Outdated
| <button | ||
| className={classNames(buttonClasses, arrowButtons)} | ||
| onClick={() => changePage(page - 1)} | ||
| > | ||
| <ArrowSVG className={leftArrowClasses} /> | ||
| </button> |
hook/pagination.tsx
Outdated
| interface PaginationLenghtReturn { | ||
| pageStart: number; | ||
| buttonCount: number[]; | ||
| loaded: boolean; |
hook/pagination.tsx
Outdated
| } | ||
| }; | ||
|
|
||
| const totalPagesIsLowerThanLimit = (totalPages: number, limit: number): boolean => { |
There was a problem hiding this comment.
| const totalPagesIsLowerThanLimit = (totalPages: number, limit: number): boolean => { | |
| const isTotalPagesLowerThanLimit = (totalPages: number, limit: number): boolean => { |
hook/pagination.tsx
Outdated
| return totalPages < limit; | ||
| }; | ||
|
|
||
| const lowerThanHalfLimit = (page: number, halfLimit: number): boolean => { |
There was a problem hiding this comment.
| const lowerThanHalfLimit = (page: number, halfLimit: number): boolean => { | |
| const isLowerThanHalfLimit = (page: number, halfLimit: number): boolean => { |
next.config.js
Outdated
| images: { | ||
| loader: 'imgix', | ||
| path: '' | ||
| }, |
There was a problem hiding this comment.
Image optimization with the next/Image component is not enabled for exported applications because optimization is done on demand, so we cannot use the default configuration.
If we are going to do an export and we want to use next/Image we must use an Optimization cloud provider different from default, nextJS gives a list here
pages/codeshare/[urlTitle].tsx
Outdated
| }); | ||
| return paths; | ||
| const buildParams = (data: paramsUrlTitle[]): UrlTitleParams[] => { | ||
| return data.map((item: paramsUrlTitle) => ({ params: { urlTitle: item.urlTitle } })); |
There was a problem hiding this comment.
FYI
| return data.map((item: paramsUrlTitle) => ({ params: { urlTitle: item.urlTitle } })); | |
| return data.map(({ urlTitle }: paramsUrlTitle) => ({ params: { urlTitle } })); |
No description provided.