NextJS ChakraUI Prisma Social Dashboard | Episode 5

NextJS ChakraUI Prisma Social Dashboard | Episode 5

NextJS ChakraUI Prisma Social Dashboard | Episode 5

NextJS ChakraUI Prisma Social Dashboard | Episode 5
Social Dashboard Episode 5 | Create Post Form Component \u0026 APIs.
Hey! In this episode we implement the Create Post Form component and we implement Prisma on routes/api.

Enjoy!

#prisma #nextjs #devcontainer

Environment: TypeScript, Prisma, NextJS, PostgreSQL, VSCode remote container, ChakraUI, ARM64, Node16

Closed captions sponsored by Prisma. Get yours for free here: https://pris.ly/closedcaptions

Work with devcontainer:    • Getting Started with VSCode devcontai…  
I remind you that you can also work locally, devcontainer is not a must.
Mac users: don’t forget to enable access to workspaces in Docker desktop in settings/resources/file sharing and add the /workspaces path.

Demo:    • Social Dashboard New Tutorial Announc…  
Episode 1:    • NextJS ChakraUI Prisma Social Dashboa…  
Episode 2:    • NextJS ChakraUI Prisma Social Dashboa…  
Episode 3:    • NextJS ChakraUI Prisma Social Dashboa…  
Episode 4:    • NextJS ChakraUI Prisma Social Dashboa…  

Timeline:
00:00 intro
01:30 Create Post Form
04:30 usePost Hook with SWR
05:40 post route
11:35 complete CreatePost Form
32:00 api/post/create route
37:00 test post creation


Content

1.41 -> - Hey guys, welcome back to my channel.
3.71 -> This is another episode of the Awesome Dashboard Project.
7.75 -> Before moving on, you want this call to share,
11.49 -> this is from Prisma Ambassador merged gift that I received
16.16 -> when I started to be a Prima Ambassador.
19.045 -> (ethereal music)
19.878 -> This is the prisma.io/ambassador.
22.21 -> Don't hesitate to take part of the program.
25.35 -> Submit an application and you will receive cool stuff
29.52 -> from Prisma and the occasion to teach a lot from Prisma.
36.06 -> Okay.
36.893 -> So let's continue the project.
38.5 -> So where we left last time we created,
43.76 -> we fixed the login and sign up form.
49.49 -> We also had these button from the navbar that works.
55.75 -> So in case we are.
59.553 -> We're registered as a John Doe.
62.51 -> We throw the pop up as user,
65.48 -> whether they may already exist.
67.635 -> 'Cause a login, we'll login.
69.01 -> So we have the call log out button,
74.67 -> Now we want to start to implement
79.098 -> instead of having the create post form simple title.
83.59 -> We want to have a very cool post
88.09 -> as you saw in the introductions.
90.71 -> So let's move on.
94.123 -> The create post, we'll have something like toast.
106.34 -> Use toast from Chakra UI.
112.267 -> What we'll we have?
114.63 -> We have a few hooks text state and logged in.
122.05 -> Array text, setText.
129.673 -> useState.
132.354 -> The state will be an empty string as.
137.99 -> So the second one will be state.
144 -> State itself actually.
149.84 -> Actually, this is something useful for meant
154.66 -> for a chakra component.
157.53 -> You will see in a bit what it does.
163.4 -> I want to set the state of initial and actually in the,
167.83 -> we can type as the initial.
175.3 -> Or just give it a little bit of space.
181.6 -> Submitting.
191.75 -> Success.
194.26 -> I think it's all.
198.51 -> The last one is a logged in.
209.7 -> Set a logged in useState, this time is false.
215.26 -> Okay, queries to bring inside of here are.
226.2 -> You remember useMe from details hooks.
232.41 -> Our equal should be good.
237.36 -> Let's take this one open
238.61 -> because we need to do another one here.
242.76 -> So this one will be open a comment.
252.79 -> What the heck am I doing?
254.53 -> Why I jumped to login?
256.346 -> There's nothing to do.
260.01 -> Const post.
265.138 -> usePost, okay.
267.87 -> Let's grab this one.
272.35 -> Export function usePost.
279.59 -> Sorry, guys, I'm a bit tired as always.
281.97 -> So the create post.
290.55 -> We're gonna have a data as post
299.77 -> UseSWR and we're gonna fetch data from API post.
309.23 -> So we'll basically have to create API post here.
315.89 -> Fetcher.
319.84 -> We return something.
321.94 -> We return the post object.
328.66 -> So we need to create this API post here.
336.2 -> So we will fetch every post for the index page here.
343.37 -> So when we create a post,
345.43 -> we submit and we should refresh the next page
348.21 -> for having all of the posts like feeds.
351.6 -> So in the post here, here comes the magic.
358.63 -> We want to create export default async.
365.744 -> It's not async or a function, async function.
371.844 -> Handler.
382.408 -> NextApiRequests.
391.57 -> NextApiResponse.
394.74 -> Let's create a posts object.
398.69 -> Then await prisma from lib, not from client.
408.18 -> We already instantiated from the client globally.
412.78 -> Post.
416.13 -> We want to findMany, so everything.
422.13 -> We're gonna have orderBy.
428.75 -> Let's orderBy createdAt and descending.
436.95 -> Now, so there is nothing extraordinary to explain here,
444.163 -> it's just Prima stuff.
450.018 -> You will find it in documentation as well.
452.64 -> It's pretty still to understand include.
456.41 -> Nothing tricky here.
457.92 -> Want to include the author.
462.66 -> Select, we want to select.
469.555 -> So the author, should go into Prisma schema, is the user.
476.54 -> Right?
477.64 -> So email and password
488.73 -> True.
491.45 -> So the fields are really suggested.
493.03 -> So if you don't have this,
495.04 -> it means that you have maybe three migrate
497.99 -> or fix your schema.
501.61 -> So after the author, I want to also bring the likes.
512.97 -> So we are in post, and in post,
517.13 -> we can bring author comments and likes.
524.02 -> The likes, we can select the id.
531.46 -> It's useful for us.
534.602 -> In the likes, we can have also the author.
542.81 -> Again, I can actually copy this.
548.78 -> So in the likes, we can select the id
550.96 -> and also the author from this.
555.81 -> So now we'll be careful to this actually.
561.74 -> Nested object here.
565.2 -> As I said, we can also brings the comments.
569.75 -> So the comments, we will select the text,
579.503 -> 'cause we are interested into the texts from the comments.
584.98 -> So text true.
588.85 -> id true.
592.81 -> The author object from comments.
596.91 -> You will see later why this everything is useful.
601.48 -> The author, again.
608.49 -> Format and on save.
610.28 -> So we have the comments, the text, the id
612.87 -> and the author object.
620.16 -> We want to return a response.json.
626.526 -> And the get post.
631.06 -> So every time we fetch the post API post,
635.52 -> we should bring something.
637.11 -> So since we.
643.58 -> Can bring this stuff here
645.82 -> when we can already see the query, I think.
655.15 -> Okay, post.
659.58 -> Okay, sorry, what I'm doing?
662.84 -> So the post.
665.388 -> (ethereal music)
666.221 -> Basically, I think I tried to do some things.
670.54 -> As you can see, I have two objects here.
676.15 -> So two posts, because, of course, trying to do this.
686.2 -> Yeah, I created already two post,
688.88 -> but in your case, maybe you don't have anything.
694.83 -> The hook is okay and let's continue this.
699.54 -> So the post is also wrapped in the curly braces now.
706.85 -> We also want to have the same useEffect for checking this.
713.5 -> So where is it?
715.21 -> I think it's on the index page here.
720.33 -> It's important to also check if the Me query is empty
729.1 -> for updating something important on our create post form.
737.73 -> We start to write some Chakra UI component or the Flex
746.74 -> 20vh, okay.
755.48 -> Align, center and justify.
760.2 -> Also center.
763.63 -> Okay, in the Flex, we will have container, container.
775.02 -> Max width, lg (large), background.
791.541 -> useColorModeValue, white, alpha 200.
808.103 -> 100.
814.84 -> If I save it, maybe I already have no.
819.99 -> Box shadow, xlarge.
826.09 -> I'm unable to format this for going to the new line.
831.48 -> So rounded, large.
836.36 -> Padding, 6.
847.76 -> Yeah, direction.
854.53 -> Not flex direction.
863.6 -> Direction, column.
866.22 -> It's incredible.
867.053 -> This is very opinion yes for my document
870.06 -> with previous.
872.87 -> Direction, column.
878.09 -> I've been missing with Prisma, I don't understand why.
880.57 -> So in the container, we have a heading and as h2,
899.87 -> font size, base is XL.
911.75 -> Small is 2XL.
920.781 -> TextAlign there, center.
926.66 -> Margin in bottom, five.
932.09 -> Your heading will have what do you have in mind?
939.42 -> Like was social network.
946.7 -> After the heading, we can have a Stack.
954.67 -> The stack, we love a direction of.
964.13 -> Okay, the base is column and the row.
980.37 -> Maybe align this one as it was.
982.659 -> (chill upbeat music)
994.154 -> This form and the spacing, 12 pixel.
1008.586 -> onSubmit the async.
1025.74 -> From FormEvent.
1033.1 -> Now we have e.preventDefault
1041.04 -> A try catch block.
1043.26 -> Try, catch, block.
1058.94 -> Await too, because we are in async function.
1062.12 -> So await fetcher, so API, post, create.
1072.739 -> We're gonna create this route soon,
1077.09 -> soon we're finish this.
1082.39 -> So I want to pass an object of text
1085.95 -> and we sent the text here.
1088.853 -> This will link to a form
1090.96 -> because we will have a form here with an input.
1097.7 -> Something more.
1100.58 -> Okay, let's check if the text.length longer than 1.
1119.893 -> setError, I didn't.
1122.951 -> Okay, forget to maybe import this.
1126.168 -> Set error is exactly like this.
1146.006 -> Okay.
1148.121 -> setError to true.
1157.33 -> We create a toast as you have seen before.
1161.26 -> (chill music)
1162.56 -> So we have the position of top.
1170.57 -> We have the title, an error occurred.
1180.24 -> We description, we can put back ticks and dollar.
1191.17 -> Print actually the error from the error
1194.68 -> in case we have error on this fetch.
1200.32 -> The duration.
1209.431 -> isClosable, true.
1211.57 -> So this is for the toast.
1219.1 -> We return.
1226.84 -> In case we are not logged in,
1232.33 -> copy the same toast and descriptions, status.
1238.46 -> I forget the status after the description.
1253.79 -> True an error occurred and it just stop again,
1256.88 -> because it center from the logged in.
1260.037 -> Again, we return and catch error.
1268.107 -> I can maybe console.
1269.92 -> Console log will be maybe useful, like error catch.
1276.51 -> Oh, you know what?
1277.37 -> Forget about this stuff.
1281.71 -> Let's again.
1287.27 -> Yeah, same toast instead of using the other stuff.
1291.971 -> (relaxing music)
1298.248 -> Want the set the error false.
1303.55 -> And setState submitting.
1308.17 -> You will see what this actually does.
1313.71 -> After this, for read, because actually we will have a
1318.47 -> state condition in the form.
1319.99 -> When we submit, after that,
1325.94 -> we can actually set a timeout.
1333.578 -> Just the first set timeout, set,
1338.21 -> we can set the state of success.
1344.25 -> It's kind of a tricky, but I think it's cool to have this.
1351.17 -> The other set time out, we can do setState of initial.
1362.57 -> And then, we can set to the text of the input
1368.09 -> to empty again.
1369.53 -> This will, yeah, that's 2000, I think it's better.
1378.33 -> After all of this, we can call the mutate,
1385.597 -> it's a route that we created.
1388.71 -> So API post.
1394.26 -> Then we want to pass text.
1401.75 -> Text, author of me.
1408.8 -> After this spread operator and all of the post.
1427.71 -> Inside of the stack, let's create the FormControl.
1439.07 -> In the FormControl, we can have an input
1444.12 -> and a few properties also as well here.
1447.89 -> Variant of solid.
1458.74 -> Border width of one.
1462.596 -> (lofi music)
1469.57 -> The color, gray 800.
1475.49 -> Then we have the placeholder and this is the color gray 400.
1492.18 -> Let's see if I can format this.
1504.22 -> Let's continue this line.
1510.79 -> The border color we use useColorModeValue.
1527.737 -> Gray 300.
1533.952 -> Gray 700, yeah.
1538.53 -> It takes a little while to do this,
1539.93 -> but once you have this in place, after this is cool.
1547.981 -> Other properties, okay.
1549.77 -> So the id can also pass inside the curly braces.
1559.74 -> So the texts we type.
1570.09 -> Type text.
1571.34 -> What am I typing?
1572.42 -> I don't know.
1575.58 -> Required placeholder.
1581.34 -> Like a placeholder, yeah.
1592.7 -> Your text here.
1597.98 -> Here we have label.
1604.183 -> Also your text here.
1612.91 -> Then we bind the value.
1616.58 -> So these will be the text.
1620.857 -> The condition for disabling this is state is different
1632.17 -> from initial and state is different from success.
1648.75 -> And then the last thing is onChange, e of type Change.
1665.067 -> ChangeEvent, just ChangeEvent.
1672.264 -> HTMLInputElement, it's good to type this kind of stuff.
1683.33 -> We set the text of e.target.value.
1695.19 -> Sticking the start to sticking start to taking shapes.
1700.02 -> So after these form control, we have another one.
1728.199 -> 40%.
1735.782 -> For the button, colorScheme.
1742.68 -> So here again, as we did before.
1748.98 -> Success, check for this green, otherwise blue.
1761.74 -> Other properties like isLoading equal to state
1774.86 -> equal to success.
1786.56 -> Submitting.
1794.303 -> 100% maybe, single quotes and type the type, the type, yeah.
1804.67 -> Type.
1811.16 -> So if the state easy quote to success, button.
1823.62 -> Or is a submit.
1848.686 -> Actually, inside this,
1850.21 -> we can also have another state for the button itself.
1861.6 -> The CheckIcon, a self-closing tag.
1870.79 -> The check I can tag is from react Chakra UI icons.
1878.079 -> I want just to check this CS.
1892.516 -> On the submit.
1894.26 -> I think it's all for the create post form here.
1905.48 -> Yeah, we have.
1906.313 -> Here some we will have the error.
1911.81 -> Okay, so e have to create basically this route here.
1920.49 -> So api/post/create.
1922.43 -> So API, post and create.ts
1932.65 -> So the create,
1936.737 -> we will have this export default async function handler.
1948.15 -> Something that you already know.
1957.3 -> Request and response.
1962.59 -> Let's create a token object.
1967.742 -> This will be a request.cookies.
1973.09 -> And the text.
1984.34 -> What am I doing?
1988.21 -> Request.body.
1991.98 -> Okay, the first try, catch, block.
1994.58 -> In the try, you want to check.
1999.69 -> If we don't have any text, res.json,
2008.21 -> maybe an object of error.
2015.06 -> You should type some text dude.
2026.68 -> And we return.
2031.13 -> Now, if the token.
2036.908 -> So we get the authenticated user.
2052.97 -> Let's put the id because otherwise the id is going to get
2056.2 -> in conflict with main id.
2060.04 -> Let's put any.
2064.85 -> Let's import jwt from jsonwebtoken.
2076.561 -> The jwt will verify the token and process.env.JWT_SECRET
2092.05 -> or empty string.
2099.899 -> I think, yeah, now we can create the post from Prisma.
2110.5 -> What'd you see, I was wrong.
2112.33 -> So prisma, post, we create.
2119.65 -> This is logically.
2122.928 -> We want to have the data.
2124.49 -> What we want to pass to data is the text.
2132.47 -> The author objects, that's why we can know who created this
2141.09 -> and the author.
2142.12 -> We can connect the field and we can connect the email.
2151.66 -> After this, we want to res.json and send the post.
2162.916 -> (Instructor clearing throat)
2163.77 -> Sorry.
2166.167 -> We can also have else.
2171.43 -> Want to send an error, now the console log error.
2182.8 -> So the error that we own to catch it
2184.68 -> the fact that we are not logged in.
2188.31 -> You must be logged in to post.
2196.42 -> This one also, it should be useful in the catch error close.
2209.34 -> We return. (faintly chattering)
2213.65 -> Let's see if we are able to create a post.
2222.53 -> Basically, now we have just two posts.
2228.28 -> Okay.
2232.07 -> Third post test.
2238.48 -> Okay, so the conditions for resetting submit everything.
2243.89 -> I think that we have three posts now.
2249.87 -> I think so.
2254.98 -> Okay.
2255.813 -> So we have the third post test.
2257.61 -> Author ID is one.
2262.01 -> The author, I think is the only one.
2264.36 -> We have two, but as you can see, we created the post
2268.8 -> with the idea of one that corresponds to John Doe.
2273.67 -> So great.
2274.55 -> So we have this.
2279.61 -> Just to give another shot.
2287.07 -> Also we reset every time.
2290.9 -> So we query here in the hooks.
2294.12 -> So we query every post on your own page.
2297.15 -> In the future, we will have a list of post here,
2299.53 -> automatically refreshing this.
2302.26 -> We have four post called.
2306.65 -> Okay, so I think I'm gonna stop the video.
2309.2 -> As you can see, we are going very progressively.
2312.99 -> Step-by-step, not accelerating anything.
2317.11 -> Even if I don't dig deep in details.
2321.27 -> This is not a beginner project.
2324.52 -> So it's suppose that you have a basic knowledges of queries,
2329.61 -> SQL, Postgres, container, basic of Prisma.
2334.1 -> So I don't explain everything in details.
2338.42 -> Just an intermediate tutorial, let's say.
2343.504 -> Of Prisma and everything that we are going to do
2347.88 -> also about to react.
2352.688 -> We can commit this, I think.
2356.22 -> I think when you want to...
2359.443 -> I think I have something like, yeah.
2364.13 -> You can basically format everything
2367.41 -> based on the prettier here.
2370.51 -> So we can type npx prettier write, --write.
2378.22 -> Need to install the follow-up packages.
2380.7 -> It's going to format everything for us.
2387.35 -> I think we already did it.
2391.99 -> I think we can commit everything.
2395.683 -> This commit, we'll call it create post form & API route.
2409.32 -> Same changes.
2413.26 -> We will continue later about displaying post,
2419.08 -> going on details.
2421.73 -> Really I'm doing this very slowly.
2426.95 -> I hope you appreciate this tutorial, guys.
2429.3 -> Thank you for watching this episode.
2431.15 -> I will catch you in the next one.

Source: https://www.youtube.com/watch?v=qO0g4hTWqQE