Welcome to skateshop Discussions!

[sadmann7]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

[baibhavKumar1]

Hi, I'm a explorer, learner and moderator . Building a brain for robots (might be rewarding in future) . I was asking if you have a video tutorial for this project? Or any youtube channel where you will be uploading this...? Please I am unable to understand the flow.

[sadmann7]

I don't make youtube videos. If any youtuber would like to go over the repo and explain stuffs that will be great.

Let me know, which part is difficult for you. I will provide vidoes and docs about that. I mostly learn from them.

[dejoma]

Hi there! First of all, loving the repo!

I am getting the 'no foreign key allowed error' when adding a foreign key, there are some discussions here.

These lines of code e.g.

export const storesRelations = relations(stores, ({ many }) => ({
  products: many(products),
}))

That's just for the db client to get type-safety, am I right? I am wondering how you generated the MySQL migration files, because with the drizzle-ORM kit I keep getting 'foreign key relations' in those files which throw the above error.

Thanks!

[sadmann7]

Yes this is for db client type-safety. You can also use leftJoin and stuffs for these.

For foreign key realtions, i think you need to do this:

[dejoma]

So I've spent about a morning on figuring all of this stuff out, and some notes:

• foreign keys are not used by planetscale
• that's not an issue at all, but if you want to have the full ability of joins/relations you need to specify stuff like relations(..) example:

export const booksRelations = relations(books, ({ one }) => ({
  institution: one(institutions, {
    fields: [books.institutionId],
    references: [institutions.id]
  })
}));

• also there are no indexes being created on these foreign keys - make sure to specify that, e.g. in the table callback in your above code or my preferred way:

 index('idx_table-name_column-name')
  .on(table-name.column-name)
  .algorythm('default')
  .using('btree') // more options available
  .lock('default');

I've got quite some relations examples now for many-to-many, one-to-many, and a combination of both. If anybody wants them shoot me a message ;)

[scape76]

Hey there, I was curious why do you check dynamically the types (I can see you do this in your server actions functions)? Doesn't typescript ensure the types for us?

for example:
export async function checkProductAction(input: { name: string; id?: number }) {
if (typeof input.name !== "string") {
throw new Error("Invalid input.")
}

[sadmann7]

Yes need to remove those. I was using route handler before.

[scape76]

I can suggest using https://github.com/pingdotgg/zact for validation tho

[Duckinm]

Hi there. Since the project appears similar to what I'm currently working on, would you like me to implement a carousel on the product info page instead of just making progress on my project? Right now, it only supports the first image in an array. If you're fine with it, I'll open a pull request for this.

The lib for carousel that I used called "Embla-Carousel"

References:
Mantine/Carousel
Embla

[sadmann7]

I am only showing the carousel if number of image is greater than 1.

Carousel libraries are typically heavy, so i made it using state and effects.

Feel free to try it out. And let me know if it need any improvement

[itspinky95]

hey, first of all thank you for an amazing repo and for building an amazing build. im getting an error when i run pnpm run build while tyring to deploy to server.

`./src/components/shells/products-table-shell.tsx
37:10 Warning: '_isPending' is assigned a value but never used. @typescript-eslint/no-unused-vars

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules

• info Linting and checking validity of types
• info Collecting page data
• info Creating an optimized production build ..
  Error occurred prerendering page "/sitemap.xml". Read more: https://nextjs.org/docs/messages/prerender-error
  Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.
  at Y (D:\p1mk1\node_modules.pnpm\next@13.4.9_@babel+core@7.22.9_@opentelemetry+api@1.4.1_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\react-server-dom-webpack-experimental\cjs\react-server-dom-webpack-client.edge.production.min.js:35:211)
  at c (D:\p1mk1\node_modules.pnpm\next@13.4.9_@babel+core@7.22.9_@opentelemetry+api@1.4.1_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\react-server-dom-webpack-experimental\cjs\react-server-dom-webpack-client.edge.production.min.js:19:82)
  at sitemap (D:\p1mk1.next\server\app\sitemap.xml\route.js:233:39)
  at GET (D:\p1mk1.next\server\app\sitemap.xml\route.js:302:22)
  at D:\p1mk1.next\server\chunks\7034.js:3644:43
  at D:\p1mk1.next\server\chunks\9030.js:4926:36
  at NoopContextManager.with (D:\p1mk1.next\server\chunks\9030.js:685:19)
  at ContextAPI.with (D:\p1mk1.next\server\chunks\9030.js:63:46)
  at NoopTracer.startActiveSpan (D:\p1mk1.next\server\chunks\9030.js:2053:31)
  at ProxyTracer.startActiveSpan (D:\p1mk1.next\server\chunks\9030.js:2140:24)
• info Generating static pages (23/23)

Export encountered errors on following paths:
/sitemap.xml/route: /sitemap.xml

• info Creating an optimized production build `

i was wondering if you would be able to point me in the right direction ?

[sadmann7]

I fixed it.

Thanks for letting me know about it.

[gnllucena]

Hello, @sadmann7, great job you're doing here!

I have a question regarding the server-side-generic-datatable you posted on twitter.

Is the component ready? If it's not, anyway I can help you?

Thank you very much

[sadmann7]

Yes I am using it on the project.

Here is the repo with the table only:
https://github.com/sadmann7/shadcn-table-v2

[wenyongqd]

Hey @sadmann7
Just wan to know, for the products table under the store on dashboard, how the sort/search functionality works, I didn't see there's any backend service for that, but I can see that you use router.push. For example:

router.push(
      `${pathname}?${createQueryString({
        page,
        sort: sorting[0]?.id
          ? `${sorting[0]?.id}.${sorting[0]?.desc ? "desc" : "asc"}`
          : null,
      })}`,
      {
        scroll: false,
      }
    )

[tunedsphere]

Dear @sadmann7

Bravo, Clap Clap and Thank You for sharing this project.

I was thinking it would be awsome to be able to see the Name, Image and Rating of the Store inside the product Card. Maybe adding more relations between the product and the store, and store with user.

All the best. I have been learning a lot thanks to this project!
Once again Great work