add dynamic route for a specific event.

[kaf-lamed-beyt]

When anyone clicks on a particular event, they should be routed to the event details page where they can see the description of the event and an appealing UI.

Here's the Figma design for this page here

For context, the file you'll be working with is already located in the pages folder here: pages/events/[slug].tsx

An ideal way to get started is to rebuild all the paths by looping through the events array, obtaining the name property of each event to use as a slug like so:

export async function getStaticPaths() {
 return {
   paths: [], 
   fallback: "blocking",
 }
}

The first approach will prevent us from generating these dynamic event pages on demand because we assigned an empty array to the paths property, which may lead to slower page loads.

Since our case is different, as we have an internal API. You should just fetch the list of events with the getEvents() module, obtain the name property and format the string in a way that slugs are presented, generally.

export async function getStaticPaths() {
  const events = await getEvents()

  const paths = events.map(({name}) => ({
    const sluggifiedName = "do some string/array manipulation stuff here with the `name` key"
    params: { slug: sluggifiedName },
  }))

  return { paths, fallback: false }
}

This approach above pre-renders all the paths based on the available lists of events, leading to faster initial page loads. You can learn more about getStaticProps and getStaticPaths to attempt this issue.

That's all for this issue. Good luck! 🚀

[kaf-lamed-beyt]

@Petsamuel @orionEsu @Jemeni11 @PrimeFord which one of you would love to work on this issue?

[orionEsu]

I'll love to take this up.

[kaf-lamed-beyt]

Awesome!! 🚀

I'm assigning you now.

[tonievictor]

Hello @orionEsu have you been able to setup the project on your local machine?

[kaf-lamed-beyt]

Are you experiencing any difficulty in setting it up? @Tonie-NG

[tonievictor]

@kaf-lamed-beyt yeah. I just wanted to confirm if it was network error from my end. The installation with yarn is taking forever

[kaf-lamed-beyt]

Oh! It could be network issues. Sorry about that.

[orionEsu]

Chief, was also having difficulties with the installations. if you have sometime we could jump on a call.

On Thu, Jul 20, 2023 at 1:38 PM alubọsa @.***> wrote:

Oh! It could be network issues. Sorry about that.

— Reply to this email directly, view it on GitHub https://github.com/kaf-lamed-beyt/ng-tech-events/issues/61#issuecomment-1643850657, or unsubscribe https://github.com/notifications/unsubscribe-auth/AM6XHCWI4UUNLY64NFM6CPTXRERDHANCNFSM6AAAAAA2N7AHYE . You are receiving this because you were mentioned.Message ID: @.***>

[kaf-lamed-beyt]

Oh really?

First are you guys inside the /frontend dir? Secondly? do y'all have Yarn installed?

[kaf-lamed-beyt]

I'd love to see some screenshots too🤲🏽

[tonievictor]

@kaf-lamed-beyt yeah. I just wanted to confirm if it was network error from my end. The installation with yarn is taking forever

[kaf-lamed-beyt]

Omorr!

Let's get a response from @orionEsu first, hopefully we'd be able narrow it down.

[orionEsu]

Here:

[kaf-lamed-beyt]

Dang! Dang! Apologies @orionEsu @Tonie-NG for my oversight. ☹️

It's an issue from my end. The husky configuration messed it up.

[tonievictor]

Alright @kaf-lamed-beyt do let me know when you resolve it. We should also add a contributing.md file to the frontend directory where we would explain how to set up the project locally.

[kaf-lamed-beyt]

Yes, I will.

The README inside /frontend actually contains information on how to get started. I think what it may be missing are the command to get someone up and running.

Stuffs like yarn install etc. Please feel free to add them in your PR. 🙏🏼

[PrimeFord]

prolly you guys should pull before running..... or use 'npm install' (i don't know yarn installation code) in your terminal to install the node modules.....

[kaf-lamed-beyt]

Oh wow! This is another development. Thanks, @PrimeFord!

I am surprised that npm worked for a yarn project.

[PrimeFord]

Oh wow! This is another development. Thanks, @PrimeFord!

I am surprised that npm worked for a yarn project.

Thanks chief...... Nice UI by the way.... na work you do oooo

[kaf-lamed-beyt]

Oh wow! This is another development. Thanks, @PrimeFord! I am surprised that npm worked for a yarn project.

Thanks chief...... Nice UI by the way.... na work you do oooo

Ah! Thanks 😄

But, it's all the designer's effort on the UI. I just pressed some keys.

[kaf-lamed-beyt]

BTW, my chiefs @orionEsu and @Tonie-NG.

I just pushed a fixed that may have disabled husky temporarily. Kindly pull and let me know how it goes 🙌🏼

[tonievictor]

@PrimeFord it's advisable to stick with one package manager especially when other engineers will also access and work on the project. Just good practice to enforce consistency.

[tonievictor]

@kaf-lamed-beyt I've successfully set-up the project now. About the documentation and set-up guide, the README.md in the frontend directory doesn't contain much. Most of it is just explaining the project structure. I'll look at it

[orionEsu]

I just pulled and i don't know why i'm being told that my branch is 4 commits ahead of the master branch

[PrimeFord]

@PrimeFord it's advisable to stick with one package manager especially when other engineers will also access and work on the project. Just good practice to enforce consistency.

ohhh thanks boss....buh its only NPM I'm using

[tonievictor]

The project uses yarn. When you push your code and it's eventually merged, the next developer using yarn will have an "unnecessary" package-lock.json file. You see how conflicting it gets? Plus there are some known issues with using multiple package managers in a single project

[kaf-lamed-beyt]

I just pulled and i don't know why i'm being told that my branch is 4 commits ahead of the master branch

Yes. That's how it'll be. Since you've already made some changes and committed them previously. Yes, your branch would be ahead of master.

cc: @orionEsu

[orionEsu]

I've made 0 changes to this frontend repo

On Thu, Jul 20, 2023 at 5:27 PM alubọsa @.***> wrote:

I just pulled and i don't know why i'm being told that my branch is 4 commits ahead of the master branch

Yes. That's how it'll be. Since you've already made some changes and committed them previously. Yes, your branch would be ahead of master.

cc: @orionEsu https://github.com/orionEsu

— Reply to this email directly, view it on GitHub https://github.com/kaf-lamed-beyt/ng-tech-events/issues/61#issuecomment-1644229721, or unsubscribe https://github.com/notifications/unsubscribe-auth/AM6XHCQ2HKKE755W7PFU3ODXRFL7JANCNFSM6AAAAAA2N7AHYE . You are receiving this because you were mentioned.Message ID: @.***>

[kaf-lamed-beyt]

The project uses yarn. When you push your code and it's eventually merged, the next developer using yarn will have an "unnecessary" package-lock.json file. You see how conflicting it gets? Plus there are some known issues with using multiple package managers in a single project

@PrimeFord, I think @Tonie-NG is actually right here. It did not occur to me immediately that we may encounter some issues in the future if you're doing npm install instead of yarn.

You may have to switch to yarn.

[kaf-lamed-beyt]

I've made 0 changes to this frontend repo … On Thu, Jul 20, 2023 at 5:27 PM alubọsa @.> wrote: I just pulled and i don't know why i'm being told that my branch is 4 commits ahead of the master branch Yes. That's how it'll be. Since you've already made some changes and committed them previously. Yes, your branch would be ahead of master. cc: @orionEsu https://github.com/orionEsu — Reply to this email directly, view it on GitHub <#61 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AM6XHCQ2HKKE755W7PFU3ODXRFL7JANCNFSM6AAAAAA2N7AHYE . You are receiving this because you were mentioned.Message ID: @.>

Mysterious things are just happening mehnn!! 😄

Can you do git status and share a screenshot?

[PrimeFord]

The project uses yarn. When you push your code and it's eventually merged, the next developer using yarn will have an "unnecessary" package-lock.json file. You see how conflicting it gets? Plus there are some known issues with using multiple package managers in a single project

ohhh okay... so is there anything i have to do now or just that going further i should be using yarn

[PrimeFord]

The project uses yarn. When you push your code and it's eventually merged, the next developer using yarn will have an "unnecessary" package-lock.json file. You see how conflicting it gets? Plus there are some known issues with using multiple package managers in a single project

@PrimeFord, I think @Tonie-NG is actually right here. It did not occur to me immediately that we may encounter some issues in the future if you're doing npm install instead of yarn.

You may have to switch to yarn.

on it boss

[orionEsu]

I'm up to date with master. And by the way i'm done with the setup and i just discovered this. Do i do an upstream or?

On Thu, Jul 20, 2023 at 5:30 PM alubọsa @.***> wrote:

I've made 0 changes to this frontend repo … <#m5488072659270131880> On Thu, Jul 20, 2023 at 5:27 PM alubọsa @.> wrote: I just pulled and i don't know why i'm being told that my branch is 4 commits ahead of the master branch Yes. That's how it'll be. Since you've already made some changes and committed them previously. Yes, your branch would be ahead of master. cc: @orionEsu https://github.com/orionEsu https://github.com/orionEsu https://github.com/orionEsu — Reply to this email directly, view it on GitHub <#61 (comment) https://github.com/kaf-lamed-beyt/ng-tech-events/issues/61#issuecomment-1644229721>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AM6XHCQ2HKKE755W7PFU3ODXRFL7JANCNFSM6AAAAAA2N7AHYE https://github.com/notifications/unsubscribe-auth/AM6XHCQ2HKKE755W7PFU3ODXRFL7JANCNFSM6AAAAAA2N7AHYE . You are receiving this because you were mentioned.Message ID: @.>

Mysterious things are just happening mehnn!! 😄

Can you do git status and share a screenshot?

— Reply to this email directly, view it on GitHub https://github.com/kaf-lamed-beyt/ng-tech-events/issues/61#issuecomment-1644234544, or unsubscribe https://github.com/notifications/unsubscribe-auth/AM6XHCTW2ZOMFPTBSKUEJQLXRFMMHANCNFSM6AAAAAA2N7AHYE . You are receiving this because you were mentioned.Message ID: @.***>

[tonievictor]

Nothing much, just delete the package-lock.json and node_modules folders. Then run "yarn" in the terminal, should fix it.

[orionEsu]

I don't have a package-lock.json file

On Thu, Jul 20, 2023 at 5:40 PM Tonie @.***> wrote:

Nothing much, just delete the package-lock.json and node_modules files. Then run "yarn" in the terminal, should fix it.

— Reply to this email directly, view it on GitHub https://github.com/kaf-lamed-beyt/ng-tech-events/issues/61#issuecomment-1644247432, or unsubscribe https://github.com/notifications/unsubscribe-auth/AM6XHCSDPAWIEIRMINV4V4LXRFNPJANCNFSM6AAAAAA2N7AHYE . You are receiving this because you were mentioned.Message ID: @.***>

[PrimeFord]

I'm at where @Tonie-NG was.... what did you do next bruv

[orionEsu]

He's made some update to the code on the end, so you need to pull his changes

On Thu, Jul 20, 2023 at 5:50 PM Muhammedfuad Bashar < @.***> wrote:

[image: yarn] https://user-images.githubusercontent.com/115805335/254952597-da4a02e0-750f-4753-b531-46e221c0a51f.png I'm at where @Tonie-NG https://github.com/Tonie-NG was.... what did you do next bruv

— Reply to this email directly, view it on GitHub https://github.com/kaf-lamed-beyt/ng-tech-events/issues/61#issuecomment-1644260853, or unsubscribe https://github.com/notifications/unsubscribe-auth/AM6XHCSHQXPIVZT5JAQWITTXRFOUDANCNFSM6AAAAAA2N7AHYE . You are receiving this because you were mentioned.Message ID: @.***>

[kaf-lamed-beyt]

I'm up to date with master. And by the way i'm done with the setup and i just discovered this. Do i do an upstream or?

If you're up to date with master. I don't think there'll be a need to set an upstream if you do not want to. The new github UI allows us to sync changes from the main repo onto our forked version.

[orionEsu]

I'm up to date with master. And by the way i'm done with the setup and i just discovered this. Do i do an upstream or? … On Thu, Jul 20, 2023 at 5:30 PM alubọsa @.> wrote: I've made 0 changes to this frontend repo … <#m5488072659270131880> On Thu, Jul 20, 2023 at 5:27 PM alubọsa @.> wrote: I just pulled and i don't know why i'm being told that my branch is 4 commits ahead of the master branch Yes. That's how it'll be. Since you've already made some changes and committed them previously. Yes, your branch would be ahead of master. cc: @orionEsu https://github.com/orionEsu https://github.com/orionEsu https://github.com/orionEsu — Reply to this email directly, view it on GitHub <#61 (comment) <#61 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AM6XHCQ2HKKE755W7PFU3ODXRFL7JANCNFSM6AAAAAA2N7AHYE https://github.com/notifications/unsubscribe-auth/AM6XHCQ2HKKE755W7PFU3ODXRFL7JANCNFSM6AAAAAA2N7AHYE . You are receiving this because you were mentioned.Message ID: @.> Mysterious things are just happening mehnn!! 😄 Can you do git status and share a screenshot? — Reply to this email directly, view it on GitHub <#61 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AM6XHCTW2ZOMFPTBSKUEJQLXRFMMHANCNFSM6AAAAAA2N7AHYE . You are receiving this because you were mentioned.Message ID: @.>

If you're up to date with master. I don't think there'll be a need to set an upstream if you do not want to. The new github UI allows us to sync changes from the main repo onto our forked version.

Okay, if you say so. I just wanted to be sure before I checkout to a new branch and start working

[Jemeni11]

Here:

I had this same error Running the prepare command fixed it

yarn prepare

The prepare command in the package.json file

    "prepare": "cd .. && husky install frontend/.husky"

[Jemeni11]

Oh wow! This is another development. Thanks, @PrimeFord!

I am surprised that npm worked for a yarn project.

I don't think this matters The problem is with yarn.lock vs package-lock.json And I think all the yarn wahala is because of their latest version It has broken a lot of stuff Now I just use Npm or Pnpm

[tonievictor]

@Jemeni11 I was just trying to point out the need for consistency. Even yarn advises against using more than one package manager in one project

[kaf-lamed-beyt]

The prepare command in the package.json file "prepare": "cd .. && husky install frontend/.husky"

I guess we'd have to setup husky again, in the future. Thanks for this @Jemeni11

[kaf-lamed-beyt]

@orionEsu, when should we expect a PR?

[orionEsu]

Everything being equal by the end of tomorrow

[kaf-lamed-beyt]

Alright chief! I'll be on the lookout for it.

[kaf-lamed-beyt]

@orionEsu, what's the issue?

Any ~luck~ progress?

[orionEsu]

Yes. It's still in the works. Just light limitations

[kaf-lamed-beyt]

Oh okay... if the light issues still persists for much longer and you're not able to work on it anymore.

Feel free to let me know so I can take it up.

[kaf-lamed-beyt]

Hi @orionEsu,

I'm assuming that the light issue still persists since I did not get any feedback from you. So, I'll be taking this up now.

Thanks for the input you made! 🚀