111 projects page see more

[zozzzC]

Context

We want the projects page to have a limited number of projects showing at each time, with a button that allows the client to load additional projects.

Closes #111

What Changed?

• Add fetchPaginationStrapi which specifically fetches Strapi project pages within a specified Date range and pagination number.
• Add See More button to projects page.
• Made Projects component a client component.

How To Review

• Start from the Projects component since this has the most changes, mostly using useState and useEffect to fetch data.
• Review fetchPaginationStrapi to see how it works. Note that this had to be a seperate component and also not in the strapi.ts file because I had to make this a server function, otherwise it didn't appear to work.

Notes

• There are a few things that could be changed for better readability, for example:
  • Explictly type the return values in fetchPaginationStrapi
  • Change the naming for said return values
  • Allow Projects component to have first or last day be null/undefined, this just helps the queries to Strapi and makes it so that the range of first and last day dates arent just the arbitrary values I added in.
• I have tried to fix these, however, they involve using a lot of Zod schemas which I am unfamiliar with. I can work on this if need be, but for now the code provided works to specification.

[h4yleysh4rpe]

Will have a look at this PR this weekend!

[zozzzC]

Will have a look at this PR this weekend!

Don't worry, I actually set this as a draft because I actually need to fix some things before I can make the PR!

[Oculux314]

Seen! Will review tonight

[Oculux314]

Recording.2024-10-20.022415.mp4

It's SO good 😍

I've got a few bugs to report before we merge, but I'm so excited.

• fetchPaginationStrapi typesafety
  Yeah, ik you commented on this, I think it's quite important we have type safety/zod checking for this (see a bug later down). Since pagination is only used for this particular route, you're alg to make the pagination logic specific to the projects page (but if so, name it specifically and comment to explain that to avoid confusion)
• First load
  At the moment, it takes a split-second for the client component to load the initial set of projects from useEffect. Might be better if this was passed down from a parent client component then used as the initial state in useState? Will have with no-projects message too I bet
• .toLocaleDateString()
  I think this bug is being caused by our code/types thinking date is a Date type but actually it's a string.
  
  
  You may need to use Strapi to coerce the date type into a string, just like with the regular fetchStrapi.
  
  This goes hand-in-hand with type safety, I'm happy to jump on a call if you'd like!
• Message if no projects
  Just a heads up if we've got no projects in Strapi it looks like this
  
  I kinda liked the 404 page but I think we have a better fix - conditionally render the projects component or a piece of "no projects" text. Probably easier to do after the first load stuff

Amd finally just transitioning from dev to production environments - might be good to up the page size from 2 to say 8? Oh and remove console.logs hehe

[Oculux314]

Maybe rename to createRelativeDate or smth, tripped me up for a sec!

[h4yleysh4rpe]

Yo! This looks awesome! So impressive!!
I don't know nearly as much as Nate does about all of the zod stuff and strapi stuff and all of that, so from a repo architecture POV I don't have much to add. However, I did come across this problem -

which happened when I loaded a page, hit back, and then went back to the page (sorry tried to get a video but apparently it's too big). Should be fairly easy to replicate though I hope!
I agree with Nate about the load times and the lack of projects as well, but all good you already got his feedback on it.
Looks suuuuper awesome though I am SO impressed!! good stuff

[zozzzC]

Yo! This looks awesome! So impressive!! I don't know nearly as much as Nate does about all of the zod stuff and strapi stuff and all of that, so from a repo architecture POV I don't have much to add. However, I did come across this problem - which happened when I loaded a page, hit back, and then went back to the page (sorry tried to get a video but apparently it's too big). Should be fairly easy to replicate though I hope! I agree with Nate about the load times and the lack of projects as well, but all good you already got his feedback on it. Looks suuuuper awesome though I am SO impressed!! good stuff

Hiya, sorry for the month-late reply! I did try to replicate this and I also got an error, but it was a context-related error and I'm not sure how/why this happened since the code I added doesn't have anything to do with context. I will try to replicate yours since the error you attatched would have something to do with the way I structured my code though!

[zozzzC]

Yo! This looks awesome! So impressive!! I don't know nearly as much as Nate does about all of the zod stuff and strapi stuff and all of that, so from a repo architecture POV I don't have much to add. However, I did come across this problem - which happened when I loaded a page, hit back, and then went back to the page (sorry tried to get a video but apparently it's too big). Should be fairly easy to replicate though I hope! I agree with Nate about the load times and the lack of projects as well, but all good you already got his feedback on it. Looks suuuuper awesome though I am SO impressed!! good stuff

Nevermind, I think I was able to get that error after enough fiddling around. Thanks for spotting it! I will try to fix it up (as best I can, since I'm not sure what's causing it LOL)