Building The Storypage With Tailwind and Next.js

[00:00 - 00:09] Alright, you already created the home page and now we have this button start creating. So when you click on this button it goes to Storyboard.

[00:10 - 00:20] Right now it's empty page and the page is not found. So basically what we want to do is create a page where users can add stories and share with others then they can also add stories.

[00:21 - 00:41] So in order to do that with Nextures you go inside the app folder and create a new folder called Storyboard and inside here now you need a page. It's X5 and first thing is you need to export a new function.

[00:42 - 01:01] You can call it index or you can call it Storyboard and let's return something here. And now if you go back to the browser now you see our Storyboard page.

[01:02 - 01:21] And here what we want to do first is to check if user logged in and if user not logged in we need to redirect them back to the login page. So as you already seen in the main page you can use the same super best method to check if the user is there.

[01:22 - 01:52] So I'm going to copy this part and I'm going to import this and import this and now we have users and now what we can do we can check if user, let's say if not user then we redirect redirect to login. Storydirect is a function that you get with Next Navigation.

[01:53 - 02:02] Let's see if it works. So I'm logged in and I'm still here so if I go to a private window go to the same page and it redirect me to the login page.

[02:03 - 02:19] So same and I'm going to homepage and there's login but in our other case we have the user email and say hey I log out button but here we have a login button and you can click here and it's going back to the login page. Great.

[02:20 - 02:25] Next step is to add our layout. So first thing is we want to have a header.

[02:26 - 02:36] So I'm going to bring hub, yes code. I'm going to paste this.

[02:37 - 03:11] The share component I will build later. So it looks like this but now we have a back button only thing this one is doing, adding a back button and what we need is we need a few more things here and right now we don't have these components so you can have, can comment this and come in soon and here there is the body and what we need to do is we need to build all these different components.

[03:12 - 03:17] So let's start with share component. This component has two functions.

[03:18 - 03:40] One is to show user if they are sharing or not with another user or if it's not sharing we need to show a modal and let them enter an email address and then start sharing. So first thing you need to do, you are in the storyboard page and you can start creating a file called share.tsx and here let's create a simple function.

[03:41 - 03:47] This will return a button, start sharing. Okay, this is the basic function.

[03:48 - 04:00] So let's uncomment this and we need to import it and right now it's not accepting any user ID so I'm going to command it out. Let's go back.

[04:01 - 04:10] So on the right side we have a start sharing button. I'm going to add simple styling as a button here using tailwind CSS.

[04:11 - 04:19] Let's go back. Yeah, it looks like this now.

[04:20 - 04:28] So I also want to show an icon of an eye. So if it's sharing so a GIF that linking eyes so it looks much nicer.

[04:29 - 04:49] So I'm going to do it so I'm going to wrap this inside a span and here I can add another deal, the class name. And so you can use image from my next JS image.

[04:50 - 04:55] I have prepared an image. So share.

[04:56 - 05:01] I will call this eye. I need to import this image component from next JS.

[05:02 - 05:13] And now if you look back there is a missing image so I'm going to find that image. When you have an image in next JS you need to put it in the public folder.

[05:14 - 05:16] Let's see if you have a public folder. No, there's no public folder.

[05:17 - 05:24] So I'm going to create a public folder here. And I'm going to also create folder called images.

[05:25 - 05:29] And here I'm going to paste my image. It looks like this.

[05:30 - 05:36] And this should work. Yes, if I give a refresh, there's the image.

[05:37 - 05:52] So just to add a little bit of spacing here, class name here, ml means margin left to, so there should be, this should be perfect now. So I want to show this image only when you start sharing.

[05:53 - 06:04] So I'm going to create a user, create a locally state called e-sharing. So by default it's false.

[06:05 - 06:16] I need to import user state. And now I can, what I can do from here, I can check the image if user sharing.

[06:17 - 06:25] I can do like this and move everything inside. We get this error because our component is a server component by default.

[06:26 - 06:31] We need to change it to client component. Just add a use client on top of your file.

[06:32 - 06:37] And this will change to a client component. Yes, now you can see the start sharing button.

[06:38 - 06:49] Now we can add an on click handle to our button to update set is sharing state. So whenever you use a click on the button, the set sharing will be toggled.

[06:50 - 06:56] So as you can see, now when you click, you see the eye. Now we can also switch the word, stop and start sharing.

[06:57 - 07:07] Just like we did with the icon, we can say start when use is not sharing and when use is sharing, we can say stop sharing. Just like that.

[07:08 - 07:21] So one thing left to do is we need to show a model and when user click on start sharing, we need to ask their email address. So in order to do this, we need to create another state, maybe let's call it show model.

[07:22 - 07:36] And what we need to do is when this show model is true, we need to show a model asking for user's email and with the email address who they want to share with. So here we can do show model if show model is true, then we are showing the show model component.

[07:37 - 07:42] So in the on click handler, we are going to change it later. We are going to set the show model true.

[07:43 - 07:48] First of all, we need to wrap this render return with the fragment. So the first error is gone.

[07:49 - 07:54] And the second thing is we need to create the share model component. Let's start building the share model component.

[07:55 - 08:02] You can call it share model. And here basically, same case, you have to always use use client.

[08:03 - 08:09] If the component is a client component. And here I'm going to have props here.

[08:10 - 08:19] So we need to do something on submit and we need to close here. And what is yeah, that's basically it.

[08:20 - 08:26] And we can just create a prop. Yeah, now return here.

[08:27 - 08:32] Just a simple do. Can see it here.

[08:33 - 08:53] Ah, yeah, because we need to start using it here and we need to pass these two props. I'm going to change these two props to now instead of accepting any except proper function with the parameter data where you pass the data with the submit.

[08:54 - 08:59] You can pass any data. And we don't avoid same goes here.

[09:00 - 09:03] Actually, you don't need really anything here. Any props.

[09:04 - 09:15] And I have prepared basic HTML. And so yeah, you're basically just a wrapper with the styling using a tailwind CSS.

[09:16 - 09:25] And when there's a button for close, when you use a click on close, a close button, it will trigger the on close that we can trigger this from the parent component . And handle submit.

[09:26 - 09:32] And for this, we need to use some kind of package for sending forms. So I'm using something called react hook forms.

[09:33 - 09:41] There are a bunch of packages you can choose whatever you can import use from here. Here in use form, you can do register and handle submit.

[09:42 - 09:48] I think I did not install this. You need to install this package also.

[09:49 - 09:54] Yeah. Now there is gone.

[09:55 - 09:59] Everything is here. And then let's go back here in the share model.

[10:00 - 10:07] Now we need to pass on submit model. First we need to import the share model on submit.

[10:08 - 10:13] We need to do something. I will create another function called on model submit on close also.

[10:14 - 10:19] We need to pass something on model close. So we need to create these two functions.

[10:20 - 10:31] What I'm going to do is submit model close. So you have this two now.

[10:32 - 10:42] So if you go back, the idea is when you click on this button, the model will turn on. So how can we do that?

[10:43 - 10:52] So here show model is always kind of off right now. So here we are doing something called set sharing.

[10:53 - 11:10] So I would instead of doing this, I'm going to create two functions called start sharing and stop sharing. So let's go back.

[11:11 - 11:19] Here and it's just there and if I click here, it's closest. So you can stop sharing.

[11:20 - 11:23] You can also say on close model. Yeah.

[11:24 - 11:34] This model share model. So this is just part of the basic UI.

[11:35 - 11:48] And what we are going to do next is we are going back to the page and start creating the new story. So basically with new story, you will be able to, in this part of the page, you will be able to click and add a new story.