Build Joke Generator App in ReactJS ⚛️ (2024)" #nextjs #nextjsproject #reactjs

okay so what I'm going to do today is create this react app just go here let's paste this thing npx create react app my app okay fine I wanted to I forgot to give a better name to my project uh I think I should have gave different name but it's fine whatever next CHS is a popular and light word framework for static Sur rendering Gatsby is the best way to create a static website with react it lets you use react component but outputs pre- render HTML and cscs to guarantee the faster load time unnecessary so uh what we want to do today is create uh react app which will tell you jokes it will tell you programming jokes it will tell you dark jokes it will tell you spooky jokes right it will tell you Christmas jokes and so on we can select language do you want your jokes in Spanish frano Portuguese germanish know you can choose the language here Espanola uh you can also CH choose the flag right you can choose whether you don't want to get a religious joke or political jokes or a racist jokes or or a sexist joke what a stupid API just remove it who want to racist joke to it maybe people do but yeah if you don't want all of these jokes you can put this into Blacklist list as well then we have a response format default is but we can get the response in XML EML PL text and so on select at least one joke type okay single or two part or whatever uh search for a joke that contains this search string not necessary search for jokes in this ID range okay so there is 1,368 jokes here you can use any amount of jokes one okay let's try I want custom I want a programming joke obviously I have to select English but because I don't know any other languages select flag to Blacklist okay I don't want racist jokes uh sexist I'm okay with it explicit I'm political I'm okay with it religious I'm okay with it I don't know what this is so I'll just say Blacklist this things as well selection format I can select uh Json format here okay so select at least one joke type uh I prefer two part uh search for a joke that contain string okay not the string required let's just send request so this will be the result right is ER or false category is Programming type is two part setup is why do Java programmers hate communism and the delivery is they don't want to live in a classless society very good joke I didn't like it okay but yeah I think this is how the joke API work the jokes will come in two part and you can display it in your app using this free API okay obviously the link is here of this API just look at it in type it type it yourself I'm not going to put the link in the description below because that's we don't do that here so if I go out here this is little bit highly zoomed out let's zoom in let's zoom in a little bit more okay is my react app done yes my react app is done so I'll just close this I'll go to my terminal I'm going to open a folder and I'll go to my desktop and what what happened what happened what happened I'll go here and inside here I think there is my app I'll just open the project okay so this is the project now I'm going to open my terminal and I'll just say npm start like this now we have this spinning react logo and everything so what I think I should do is remove everything from here so why can I select this T right get lost like this and I will just give a S1 tag which will say don't cry it's just uh joke okay right this looks good in my ADD CSS remove everything we don't need anything great so what else what else should we do now I'm getting don't cry it's just a joke right let's face through the API first now to face from the API uh we have a lot of of option we can just do we can use a lot of things this is very simple kind of project so obviously we don't want to use react queries let's uh let me give you uh like uh option like how to F in react properly like this right I want to see different option I was looking for different option obviously let's see this one uh we can f it like this using use effect that's one option F jokes yeah we can use I will just s like different ways of fing data in react okay yeah this I think this article is the best one um H transfer protocol I don't need to know about all of these just show me the way so we have one method called still while revalidate method this method is used to phas data from a s server and is used in react it manage any Su that may arise when obtaining the data and helps to manage storage s SWR include use State and use effect so there is no need to import them right so we can use this s SWR package right so the the react provide this s SWR package which will helps in data fing you can provide the URL here like this and a fature function and then it will give you this data error and is loading and everything looks kind of like react query to me yeah but you can definitely use this good way to face data and react other than that let's see the second option using JavaScript face right okay so you can just use the normal JavaScript phase in use effect and then set the state and show the value so that's the second option third option is react query now react query is for medium to large level project but it is the I think really great tool I love R query and R query is one of the best tools for fishing if you are in the medium size or large project we obviously don't need that in our small little tiny project but really good option for large projects react query okay react query also known as 10 stack query is useful for managing data in react application the difference between the two name is the version using react query is easy and makes handling data in your app feel almost automatic like it's taking care of everything for you for instance fetching catching synchronizing and operating server States in your application advantage of react query method there are a lot of Advantage so I will not go through each and every one of them but you can just read it by yourself so basically react query is also a really good option that you can use right so I think these are all the options but I think what we are going to do is we are not going to use any packages we are going to do something like this where we create our own uh us effect US state and f by ourself in our future right but we are going to do this a little bit differently by creating our own custom hook okay now let's go to our project inside my source folder my I have I'm I'm having a neck pain for some reason all right because I'm not in a natural coding position here I'm sleeping on my bed and writing code anyway so I'll just create a folder called custom hooks like this inside a custom hook I'll create a file I'll just say use fure JS okay uh let's create export default function use fer okay so the important thing here is the use facer obviously we have to put use in front of a hook uh so that you can fix now we can create a state here so say const and the state will be uh first thing it will return return is data because we are going to fix and again the response so I I want to put the response in data and say set data or better way is uh we can say jokes right because jokes is the data that we are getting but if you want to generalize then I think data is the best option okay let's create a general kind of fure function or fure custom hook so I'll just say equals to use State and it will be empty or I think I can just give it null for the first time so that we are definitely sure that we are not getting anything all right so I have the data and set data second thing that I really want is uh con loading and I'll just say set loading like this is equals to use state so at first loading will be true and after facing the loading will be false by default it will be true but if the but after it is after the completion it will be false or something like that okay so loading set loading is also fine third thing I want is error right so if error occur and we also want to handle it set error like this I'll just say use State and if we have an error then we have an error if we don't have an error then we can just set null or an M string whatever you prefer okay now we need use effect right so what we have in our use effect is a dependency array which is nothing uh I think I'm going to pass URL from here so our function will get the URL and we can only F if the URL changes right because basically the URL will be a string inside here there is two ways I can pH pH it by using pH is a call back with creating an as Synco function since everybody like as Synco fun let's function so I say sync function f data I can say F jokes but I want the U like if we provide a joke URL here then this will F jokes right if we provide any other URL then it has to face other things so this generic name like data is really awesome because we can uh because it is kind of a global hook that can face everything right so in that way I'm name naming it differently I can also say jokes or F jokes it makes more sense for a small project but if you have but if we had like five or six different API like jokes or people or user or anything then it's kind of like the general way of naming things right because then the data can be jokes or users or products or anything right so that's why I'm giving this generic kind of name here so yeah aing function pH data now since it is an aing function now we can await something here right so we can say const uh response equals to await say F and provide the URL right so now it's going to face the URL obviously let's call this function data like this now the thing is since we are doing a single weight we can obviously use have to try as to do error handling but let's just try it if it's working or not okay so just console do log I'll say response I'll save it I'll go to my abjs file I will import that but the problem here is yeah I don't think there's any problem we are obviously not rning anything but I think we can just call the hook right so let's try calling the hook I'll say use feature and call it now if I go to my project inside my console obviously nothing will come up probably an error or something response is nothing because obviously we don't have any URL so inside my phaser I'll just Pro provide this same URL that I'm getting from here right I'll just copy this this thing and paste it like this I'll just save it go out here again go to my console like this and you can see I can I think I get the joke let's [Music] see status body clone haer so if I go to the body was supposed to give me some kind of G let's see what's happening the response is successful then we have this body clone form data let's see the form data nothing there oh okay form data conation I don't know where the response is right let's see our code back again uh let's see if uh the phas is coming from here response right so a SN await I think I have to await it one more time to get the response because it's seems like to me I'm getting the response but I think I have to do one more thing here so what I'll do is I'll say I will go out here I'll just cut this I'll just create another await like this and put that inside this await and I want to say dirt just Jon so we convert everything into a Json right so now we get our Json formatted response right and it makes sense because now we have this question delivery and setup so what we need is a setup and delivery why did program the programmer quit his job because he did not get arrage such a funny joke okay now uh but before that let's say first thing is obviously loading will be true at the beginning and I want to return return things from here from our hook so I'll just say um return right uh I'll return return it inside a Json string so first thing I want to return return is loading second thing I want to return return is data third thing that I want to return is error right so let's first deal with loading whenever we are here obviously inside a syn wa what I want to do is use try catch so try and then catch uh catch will catch the error like this nice and I want to put this thing right here I think the better way of doing it is to remove it from here right and I can just say uh const uh response Jon equals to await response dot this like this okay I think it makes more sense to do this this um another thing that I should be doing is if this is successful then I just want to say set data and put response uh J inside it and now the data will get the data here um if I think the first time loading will be true right so once it is inside this function uh I just say set loading to True always set loading will be true whenever we are inside here and whenever we try this when we whenever the fing is complete or if we get the error in both cases we want the loading to be false so what we can do is we can say finally so finally we'll run if after running Dy block or after running cash block right so instead of uh putting set loading false uh false like this okay so instead of uh copying this and let's say we F first the loading will be true and then it is loading and the use effect is fetching the data so after the F we have to make loading false right like here like this also whenever we have if some error occurs while fishing the data and we go to catch uh error then here also we have to do loing false right because response has came but uh with an error right so we got the response with an error so we have to uh put loading false here right because the um API has responded with an error right so you should of putting those both things here we can put it in finally because the finally will run after try runs or after cat runs right no matter what runs finally will uh run after it okay so now I have to cat the error but here is one thing and that thing is this fet actually does not return 4 four or 500 errors right so F doesn't handle doesn't do the error handling manually so if we ever get in 400 or 500 errors from our API F will not give that error or throw that error in our cash block so better way of doing it is whenever we get a response we can do it manually and the accurate way of doing it is getting the response and checking if response is okay and if we say if response is not okay which basically means the response is not in the range of 200 or successful it is in the range of client or server error then we can just throw an error so say Throw cannot fit I think we have to do through new error we cannot throw any string so also throw new error and put the error here like this and in this way I think we can just format the document okay so in this way we can throw an error and here once we get the error we can just okay set error to whatever the error we have thrown like this it makes sense right if if we don't have any response if the response is not okay then we just throw an error and if it is okay then we are going to set the data and give the data okay let's try it out now this use pH is going to return return us three things loading and data and error right is goes to like this let's format this document is well so what we're going to do is if loading is true then I want to return loading right uh if we have an error what I want to do is so error occur and also want to show that error message here right like this um when it comes to error handling we can just put an error boundary and throw an error and so fallback error page but for this small project let's stick to this but uh let's go out and let me show you something something about error handling so error boundaries in react obviously this is the better way to do it so let's see these are the old dogs and won't be updated go to react dog for the new updated documentation let's say error bounding boundary here so error boundary okay so yeah look at this this is a really cool way of doing it so so you can use this react eror boundary package and uh import the error boundary and you can wrap your component or your whole app inside this error boundary right and also you can give this fallback uh layout with something went wrong now the thing is you can wrap your whole app or component inside it and if your component throws an error then the errors boundary will automatically catch that error and then show the follow call back page right so it is a really good way I don't know what saying trouble operating an input in a transition hook doesn't work you cannot use a transition for a state variable that controls an input I think it's related to the transitions you can do for variable that controls and input updating this is because transition are non-blocking code I'm sorry this is not related to our project okay I'm just I'm just reading about this because I'm interested uh let's see okay let's read read this article I'm just so interested about it displaying an error to user with an with a error boundary if a function passed to start transaction throws an error or is related to this transition uh you can display an error to your user with an error bound to use an error boundary WRA the component where you are calling use transition in error oh okay I get it so basically I get it so basically if you are using used transition it will only run after the UI is responsive right so in that case if you add commment throws an error if a function pass you can display an error with your error boundary to use an error boundary okay I think it's best to use it with us transition but the what is saying is that operating an input in transition doesn't work you can use a transition for State variable that controls an input this is because transition are non-blocking but operating an input in respon s to the change event should happen synchronously if you want to run a transition in response to typing you have two option you can declare two State variables uh okay you can use react use default value react doesn't treat my state as a transition when you WRA a state update in a transition make sure it happens during start transition call Setting State during transition call the function you pass must be synchronous you can Mark and update as a transition like this H okay interesting things here uh I will check it out after I after some time yeah I will definitely check it out but uh after I complete my project that I'm creating here for you guys anyway we got a little bit distracted but we are back in track what I wanted to to to talk to you was about this error boundary so it would be better if we just throw an error here uh and then wrap our whole project right W this whole component with the error boundary and inside our component if any where we throw an error then we can just handle error through our error boundary and show a fallback component or layout or something right this is great if we have loading we are getting loading if we have error we have error but if we have data all right then we want to show the data like this if I save it and if I go out here uh I have to do just stringify to show the data here because obviously we cannot show the object directly and then you can see I get the data so if I refresh this page I'll get null why am I getting null because I think error no oh I'm getting null because this is null but I think the let's try it out I will just go out here and go to network and I will just make a slow 3z and refresh this to see what happens okay so we are fetching in a slow Network it's fetching fetching taking time and I get n directly what I'm trying to say is why am I not getting loading and everything let's see if response is okay then we throw an error right I still get null said error is true I think um y y why return return from here this is also uh same thing I think I'll just show error occurred only I will not show an error message then we get an error occurred and that makes sense if I go out here and rechange it to what it was before response okay and refresh it refresh it again loading yeah now I get loading and the value okay so the our hooks is perfectly working fine there's nothing much to change on it obviously it will run once because the string is will not change the dependency array is one yeah so we have our data now let's go and manipulate our datas so first thing that I need is the setup and the second thing I need is just the delivery right uh okay so what I'm going to do is I'll create H1 and inside here I will remove this J stringify and I'll say data dot set up like this I guess uh data do set up and delivery is data do delivery okay I think I'll get the setup how did you make your friend raise and then inside another S1 we have data. delivery right do delivery like this profanity what is the most used language in [Music] profanity it is really great to create a joking project because every time one jokes will make you laugh anyway so what we want is uh user to give an option we don't want this simple boring kind of project right we want to create something cool and for that let's do couple of things let's give user an opportunity to select what kind of jokes they want or what kind of yeah so let's see I want to create a drop down but I don't want to create a drop down by myself I want to use some kind of prop project so let's go out here let's ask that GPT right I mean what's the use of AI if it cannot create a drop down for me so I'll just go out here and create a dropdown component in react add animations to it like this okay I mean this is the it's it is using this Library oh even chat GPT is a library user I guess um I don't know what's what this package is so let's see this package I don't know what it BR bring up so react spring it looks like some animating kind of spring animation kind of a drop down I guess so why don't you have a demo use mostly here right and the size is also 9 KB I think it is fine on pack size is 9 KB and yeah what others say I people say a lot of things in Twitter who cares about what others say anyway let's close it out let's use it see how it works so I'll just cancel it close it cancel it cancel it okay now I'm installing the package after that create down component and import everything like this and use it in our project like this make sense make a lot of sense so let's go out here I'll create an folder called components inside components I will create a file called drop down oh we are creating a JavaScript project I wanted to create a typescript project but fine now I realize that this is a JavaScript project what is happening what is happening is we are creating a project anyway let's create uh let's copy this file thank you chat GPT for your Cent Service uh drop down export default function will be this so I'll just say export default function and this the rooster is waking everyone up here use the spring and it's going to translate and understand I don't like this kind of Animation is so I like I don't know why people love animation man I just I I think that website should not have any animation it's pointless to have animation in website but that's just my opinion why would you want any animation in your website man I mean who like have you seen any animation in Youtube Gmail or anything just make a simple website right but for some reason it's cool to have animation or maybe it's just something that I feel and it's not generally for everyone one anyway let's create this drop down copy it in our app and put it here I do want to create this drop down option I'll put it at the top of the project like this now I have the option I have the package I have everything that's given me by chat GPT and chat GPT can never go wrong I guess yeah so we have this drop down and it gives me these kind of things so now it looks good what a normal boring drop down man come on can you do some styling to it add box srow and style it to make it like a butter like it okay certainly drop down CSS is teaching me how to put a CSS okay anyway um drop down so anything we have to do okay animated. div is putting class name in everything nice so I'll just go out here I'll copy only this thing inside my drop down the CHS I think it is the same place right yeah I'll take it I'll put it here save it and then I will put the CSS uh I don't know why it is doing this all this absolute and relative kind of thing I don't like that but let's see H pretty decent I mean it's not the best uh D I have ever seen in my life but yeah I think it's pretty decent I don't like this blue color come on who loves these kind of colors man um uh r no color in Hover let's go back so instead of this color uh let's give it color of uh C2 C2 C2 cancel save yeah I think I'll just put it the way it is I mean who cares about designs yeah I think let's give it a color of red yeah nice oh now this is why I don't like designing just changing colors and everything just stupid according to me obviously maybe you enjoy it have fun see it E2 E2 E2 and uh D2 D2 D2 I don't know what I'm doing okay we have E2 and D2 and I think it is fine just go to the color pier and pick some color idot okay I'm in the color Pier Zone here I have these kind of colors I can select any color so I will leave this nice now let's try and paste it what am I doing I think I should just give this white color right and then the color will be black I think I mean no nothing in this world beats black and white man 2 F2 F2 great um now it looks good uh I'll give you the padding of top and bottom 10 and left right will be 30 pixel top and bottom will be 18 pixel and it looks a little bit bold and great nice um everything is inside this abjs file I don't need this file I don't need this faer file I don't need this drop down file now CSS don't need it but okay fine um I'll just create a div here and give it a class name of Main and I'll just style the main here I'll just say dot Main and put everything in their center right so display flex and justify content Center this content Center align items [Music] Center right and we're in the center of the world okay I think the flex direction will be column it makes sense to make it a column but I think for now yeah column is great so I'll just say Flex uh Direction each column like this yeah it is fine but now I have a problem with it uh I think I have to give it a height uh I'll say take full height I'll just keep Flex one I think it will work I think it will take all the remaining space no it does not um then I have to give height I can just say the mean height uh the minimum height will be 100 S V small put height now it will everything will be in the center just like it should makes sense now inside this tole drop down what I want I mean the options should be actually all these apis option right so the jokes will be I want programming jokes then put a programming here right I already have it here copy this and I'll paste it here no I don't want a programming joke I want a spooky joke right then put spooky here go out here and write s p o o k y spooky right s p o k y no I want a dark joke right then why worry just put dark here you're like no I want Christmas joke why worry put a Christmas here where is Christmas like this put the Christmas here right no matter what jokes you you want you can put it in your URL and now this makes sense so drop down is actually inside here and we have tole dropdown but I don't want tole drop down right I want title because I want to use couple of drop down here which I'm going to need so I'll just say title I'll save it and and I can send an option and I can also send a title right and the title will be um select category uh joke category like this okay now if I go to my page it says jokes category I also want to give an icon but [Music] um I also want to give a drop down icon but I'm feeling why should I do it anyway arrow down icon I just don't like icons I don't like a lot of things um I'll just I'll just put some icon like this and you know I don't want to install a package or set up everything or something like that just like this let's see how it works yeah looks good programming is spooky dark Christmas right so if I go to drop down and see the drop down animation go to this Li in my ab. CSS so drop down list now I have a problem with this it's really small size so I'll just give it a minimum height of it should be 500 pixel minimum width to be 300 pixel okay it's little bit more so minimum width have to be 200 pixel okay 180 this is why I don't like designing a lot of hiden trial just pieces you off nice okay so we have our animation and all of that I think the animation top should be from I have to change it because I changed the padding there so probably I'll just say minus uh since it is minus I think it will be a little bit more so 30 now if I select it yeah it makes more sense it looks to bit perfect you can choose your category another thing that you can choose probably will be Blacklist if you are interested in that but yeah right now should I do the back list thing racist or political or whatever okay you can choose Blacklist as well you can Blacklist some jokes for that I don't need check boxes right so checkboxes let's go over here and ask chat jpd for couple of checkbox um create uh checkbox in react with beautiful animations like this okay so it will give me some checkbox don't oh it's going to react spring and okay I get it so react spring is actually a package for animation only spring animation only it is not related to the drop down or any of that great great great I like it h I like I like the fact okay let's see let's see that is that uh npm package I think I just react spring is a cost platform spring physics first animation Library so it's just the library that's going to style your de with this spring or kind of in the uh reanimated style right this is great actually now I like this package I thought it was a drop- down package dude yeah but it is a uh spring package and I also I'm so happy that Chad give that that uh response like three it is published three months ago you know and CH figured out it's pretty cool now we can just use but it's just for spring animation only but I think it is really great and packages has really less size as well so yeah something to remember I guess spring animation anyway let's go out here and copy this code go to my components and create a file called checkbox checkbox tojs and obviously if you are feeling like you cannot copy and paste and any all of those things uh because obviously I'm copying and P pasting all the these things in uh from know CH GPD to here so if you want the source code from this then you cannot find the link in the description below because I will not put it there thank you so I'm going to go out here copy this styl CSS and put it in my abro GS file okay it looks pretty fine I'll save it I have to import the code uh so let's see how am I importing it I guess I have import it in my own way so checkbox export default checkbox fine then I'll just go out here and put the check box here right so check box like this uh what are the props that it takes any props any props no no problem anyway great so if I go out here I get the checkbox check me with an animation looks pretty decent to me um so checkbox will contain title uh title like this which will be uh racist like this okay so uh inside this check me I will just put the title right and the title will come from the prop that we have here so just say title t t l e like this nice but what happened oh I have not saved it so I get racist I also want another checkbox um what is checkbox for so I don't want racist religious or political jokes right I'll just say racist and and religious only let's see racist it has to be small R I don't want to get confused with everything racist and religious so I don't want any religious jokes then I can just check this religious box nice now what I can do after this is oh school animation in this documentation like it uh so what I can do is I can say uh put everything of everything of this inside this section say section like this obviously I can put it inside um another component but let's not do that now uh let's give it a class name of of filter group filter group like this and let's give a heading here and call it jokes set up settings like this you know and then I also want okay joke settings and we have the settings here right so inside here what I can do is I want to put it inside a flex box I'll just D and give it a class name and [Music] say setting right and inside that CSS go out here create dot setting right and say display Flex only okay now I have to save this as well now I get both of it here right so the first thing actually is checkbox I want to group this check boox inside a div as well so I'll just say div and put it here like this um but the problem here is I'll just say what can I say I can say the select Flags to Blacklist okay I'll just say select jokes to Black List select jokes to Black List like this and then give to checkboxes which makes more sense yeah uh in this checkbox I will give a margin of six pixel just like this makes sense and another thing that I'm going to do is another thing that I'm going to do is uh probably I'm don't need this L item Center I do need this I don't need just Center I'll just say uh margin top to be 10 percentage like this nice so another thing that I should be doing is I think we are uh pretty it's pretty good but this div we have a class name called checkbox group right I'll just copy the checkbox group and in the place where there are checkboxes I'll just put the checkbox group and just say margin Dash lift to be 5 percentage okay let's give it a background of red to see how it's working looks [Music] decent what I can do here is give it a flex one probably let's see if it change anything or not nothing it changed um I want it to take a little bit more width that's all I want so if I select this obviously settings has so less like why is not taking a lot of width man that's what I don't understand anyway uh if I give you the width 100% then I it will take the width but I wanted to take the full full width in first place you know okay if I don't s any width it's in the center if I give a width 100% And margin is auto still main right so main has everything the filter group is small bits so filter group is small P I don't know why it's small P I can give it a width of like 80 % like this and still is going there then I can say Mar Auto will work but I'll say margin left Auto something is missing um so we have main we have 80% I think the the main contains everything center right so let's say justify contain the center as well something is missing from here H I'm fine with the joke category okay let's not waste your time in this let's not waste our precious time in this because designing is something that's not really important for now uh what's important is the functionality is but still it just my heart just pains when I just said it that design does not matter it broke my heart kind of so yeah let's fix this tic things so filter group will contain a little bit more width okay but I think think more than that what I can do is filter group will have 100% width let's make sure of that uh do I have filter group here contr f f i l t or filter no so just go out here give it a filter group say it will have a width of 100% okay fine and it will have display will be obviously Flex and justify content will be Center and align items will also be Center like this and then we have everything right here but then Flex direction will be column then everything will be in the column but I think it will be fine even if everything everything is in the column yeah we came back to the same thing uh we we wrote I mean six six or seven line of code and finally everything becomes same no matter what this is funny um we have the section jokes is here group is here this settings man why are you not taking the full width this is why I don't like uh we have the settings right inside settings is there any specific width given to those things maybe there are I'm not obviously looking at all the things that's been that those chat jpt wrote let's say width 100% and let's also give this width 100% h let's keep setting with 100% funny 40% or 30% yeah settings will have with 30% and it will kind of look nice at least for the sake of our project I mean this is probably not the best way to do this but I mean there are a lot of code that have copied and pasted so there are something probably in this line of codes which is creating all of that but it is fine no problem it should looks good and it just doesn't look good right so we can select the joke category and we can also uh select which one do we want right so jokes category we can close it okay we have to click here to close it h anyway it's fine it's getting way way below the surface so I'll just go out in drop down I'll just say minus 10 so probably I'll just say zero right click here I don't know what happened but I'll just say 30 then something changed what did I do now to anyway I I think the design is not important at all yeah I I will go back to that that thing yeah I think my focus uh should not be in the design right now so I'll just leave it leave that leave that leave it leave it leave it leave it I know it HS to say that but leave it okay yeah so we have this category where we can select the category and we can select a jokes that we want to Blacklist as well now let's create the functionality for this so in my drop down uh I can use a state Handler it makes sense to use an State Handler H or I can just use something simple so let's see what we can do what we can do is we can create a function here and once we create that function we can pass that function to other places [Music] and probably use it inside I suppose I don't let's try it out let's not use any state Handler for now right so we have this drop down category select jokes and everything what we want to do here here is format document yeah that's what I want to do uh another thing that I want to do is create a function uh probably here probably here I'll just create a function say function uh URL Constructor right c s Str UC see b t o r uh URL Constructor what this function will get is search params okay so it will get search params and I want to log that s terms here so I'll just say console do log a source patterns like this okay now I want to pass this function inside these components okay so I'll just say Handler equals to URL Constructor same thing in both of these other components right Handler equals to ur Constructor Handler equals to ur Constructor now I'll save it the drop down will get a function called Handler okay so whenever we click this uh list on click then we want to pass a call this function called Handler where we pass the option right this looks fine now if I go to checkbox do the same thing go to my Handler and whenever we check this uh animated div on click whenever we click it we want to set it Che equals to opposite of it that's true but okay let's uh create another function for it Handler is fine I just want to copy this thing and say uh [Music] handle check right I will just go uh inside here we create a function called handle check and then paste the thing here I also want to go out here and do this right so I want to create an opposite of the check right I want to say if it check is true only if it is true then we want to call a function called Handler and provide the title okay and pass the title inside it right now it is pretty fancy our code got little bit fancier so what I'm going to do now is create a search parameter I will create a state say cons uh search params like this and set set search pars like this equals to use State and nothing like this OB have to import the use St okay I think the source BM will be I think this great the thing with category is different though yeah anyway anyway anyway don't jump over just take it slow and step by step relax so let's say set SS parum so that we get the SAR pm here and let's show the search BM here like this like this okay now it is nothing right now go out here say spooky now it is spooky right say it is racist nothing happened say religious nothing happened oh I think it is little bit confusing here if it is unchecked I think now this will work right so I refresh this if I select dark they will get dark if I say rist we get resist it's religious you get religious if I remove resist nothing if I remove religious nothing if I select resist resist okay what I'm saying I'm saying resist resist resist all of that but you can ignore it Things Are looking pretty good now the thing here is the drop down should provide me if we see the URL here this is a param right and Blacklist flag is actually a search P so what I'm going to do is um whenever I pass things in the Handler function what is the Handler right I I'm passing the option but I will also pass another thing which is uh the string say it is category right I will pass category and option in checkbox I will pass Blacklist and title so here what I will get is I will get the S param but I'll also get um type like this great so now I can say type and sour BM and go out here and check it out say spooky category programming is also category racist is Blacklist religious is Blacklist great but the problem here is anyway I think I'm getting both of it right um yeah it's working for some reason resist Black List right and if I say dark it will say category so I'm getting the type as well now what I want is if type is equals to equals to equals to category like this right category then what I want is the URL right so I'll just C this and I I will say it base URL so what I will just say it is let base underscore URL is equals to this okay now I have to create another state say con URL URL set URL is equals to use State and it will be by default it will be base URL nice so what we have to pass here is the URL like this great and here what we have to do is what we can do here is we can just say const URL equals to new URL new URL right and pass the URL State uh URL slide okay and then we can just say URLs dot set okay so we get the URL we want to set the pattern okay let's see uh set parm in url new URL CH search parm I know we can set the search PM but I'm more interested in uh normal parm not the S BMS so what we can do here is what we can do here is if it is category then we can I think directly say set URL and then we can just put uh dollar like this and say base URL and Slash then we can just put category here right or S patterns here like this and if we say if type is equals to equals to equals to Black List then what we can do is we can do is Con new URL equals to new URL uh and same thing that we're doing here so new URL and it is the base URL like this we get the base URL we're going to create a patterns url. search right that we are doing here so we get a new URL search patterns which is uh new URL to search [Music] new url. search Okay so we're getting the search baring from the search I mean obviously by default it doesn't have search BM but it can have if we select multiple and then we can just say is params set and then what is the parm I can say the value right but the patterm in our case is Blacklist flag so we can say Black List flag and we can just say Blacklist or such P like this and then finally we can just say set URL to URL dot TW string I think to string like this let's try it out so first of all spooky nice it what's it like to be kissed by a vampire it's a pain in the neck racist so we're putting the Black List there right let's say programming water bits tiny things left when you drop your computer down the stairs say Christmas who had a bakery at Christmas a means py you see it is working perfectly another thing I want to so is let's say S1 tag URL like this and I want to display whatever the URL is right so if I just refresh the page URL is/ joke now I can see spooky you can see the jok is spooky it's religious oh this one is not working this one is not working let's see what happen right uh whenever the type is of Black List is Black List right so if the type is a black list then I want to console and log the URL right just say console do log and URLs all right I think it is new URL and it is new URL let's see I don't think it's working still uh let's go to console say URL component which is I'll convert it into two string because I'm getting an object I don't want an object so I just refresh this and select resist I'm not getting the actual value let's see uh append probably let's see how to add such params uh. search params yeah I think this is param set we are setting the search parents but I don't know what's happening let's console log patters well let's not change the state here at least conso Lo something hello hello console look something dude what are you doing at least give me something if I select resist give me something okay where I'm getting the I don't know URL right I'm getting this URL I think I should just get the parm as well say p r Ms parms let's see what I get in the parm I'm selecting this inspect and going to the console we're getting the SCE B so it's say uh whatever not interested Right add search params in url J let's see I mean chat GPT is here so why even worry right so we creting new URL and let's try this instead of this I also don't like the way it was done so I will just say new URL do search params do set and I want to set uh what what was the name Blacklist Flags right Blacklist flag and I want to set the value to be uh search params and then if I just save it and see the URL now go out here and if I go out here and console you can see when I select religious what happens when I say resist what happens I'm getting s flag equal to resist this is perfect now I can just say set URL which is new URL two string if I select racist flag equal to racist I say religious flag equal to religious right if I say dark then you can see jokes is dark religious is religious and then spooky is spooky but now the problem here is I'm not getting both URL at the same time so it should not be the best URL I think it should just be the URL okay I'm getting the flag is racist but I think the problem will be here because I'm getting slash dark here oh God so instead of setting it like this I I think I have to do the same kind of thing here but it still not be the base URL it should also be the normal URL and I need to go out here I need to copy this I need to remove these things as well and put it like this instead of source param this should be params but I don't know um let's go to chat jpt I mean chat jpt is here so wi here um add par in same way so what we can do in Source parameter set hm what is this it is also setting the search patters but I don't want any search PMS I just want normal parents not a search pars just a normal path PM let's see it is splitting and joining dude I don't like this I don't like how it's done why can't I add param in my URL that's so stupid anyway okay uh let's not I think I have to create my own logic in these things it's a joke after joke after question mark I just want to after SL joke question mark right okay let's go out here and do that I want to split it and put it in the middle I guess yeah just do that and we're done for the day yeah so I'll just say cons uh is play URL equals to url. spit and I dis spit it with uh Slash joke uh question mark like this then let's console log this okay okay split URL let's see what we get uh if I just do console log and if I go to category and this is spooky then I get Dave and this okay fine so at this point what I want to do is Con us l equals to split URL tood zero plus uh whatever we are splitting H I think I should split from here makes more sense all right then whatever we're splitting which is SL Z plus whatever the param is so dollar like this like this and sarch patters after this plus and what we want after s param we add that thing here and then finally uh split URL one H yeah I think I should put it in this just as well like this what happened oh I think I can just put everything here right so I'll just say slash joke SL joke slash what's wrong great save it uh let's just set URL to this URL nice let's just give a different name so that we don't create any confusions nice s category spooky select category dark H select category Christmas okay just select category programming why didn't I get any jokes dollar dollar dollar dollar dollar dollar uh what's the problem set search param is not working set search Pam it seems like we don't even need that state is SE search [Music] bom search bom search boms search boms I don't think we need that state at all so let's just remove the state fine H but there's nothing inside s where I'm stood uh s b I think it comes from here right right what else oh I'm just using it here I don't want that right so we can remove that state obviously great select dark I get the dark one resist works but now this is a problem right oh spooky h i can get any any anything that I want nice nice this looks great right so if I go out here and say select category and I say two category then it works nice okay so it's fine it works good so let's say refresh this page I want to go to job category and say give me programming joke what's wrong why I'm not getting any programming jokes let's say give me a dark joke I get a dark joke give me a programming joke what's wrong what happened what happened if I go to console nothing is here I mean the URL is fine it's SL programming but if I just go spooky I don't get anything if I go out here and say spooky I get the spooky spooky jokes what if I programming I'm not I'm getting programming jokes now what what and now I'm not getting it something is wrong but I just don't know what it is URL I don't want this dollar sign remove [Music] it yeah I think it's perfect uh let's refresh this if I go out here say spooky I get the spooky joke and if I say racist it will not show me any resist joke I I go over and say dark it will give me a dark joke but it did not give me a dark joke for some reason I mean the URL is fine I don't know what the error is I I'm not also not getting any error but I'm not getting a joke I think it's problem with networking I guess because I think it has its own limitation I guess so yeah if I just refresh this I think the problem here is dot to lower case to lower case right just make it lower case dude what are you doing spooky programming nice so if I just say programming I still don't get the programming joke so if I go out here in my custom hook and we P it through the URL I can just say console DOT log and URL let's say 0 just to identify the URL and I'm getting SL programming great if I just refresh it and select programming I'm going to the programming but I'm not getting the joke the URL is fine right I mean the UR is working good but I'm not getting any joke here why is that the URL is fine yeah it looks now works now but it doesn't work for the first time for some reason here it did not work like when I refresh this page and go out and select programming why is it not working it's because I have changed this state I have set the URL say format document let's see format document okay I've changed the state okay we're facing we're getting nothing then I change the state state changed it should be going there and fetching something with new new URL and giving me the data so you start changed but the use feature did not change URL is here so it should be working I mean I'm getting the URL let's see the response okay now let's see what's happening I will debug it no matter what I mean come on we will figure this out let's figure this out let's see what's going on so first no error is true right because obviously URL doesn't match now what I can say is uh select programming and I get the joke what is the best prefix for Global variable that is funny joke now let's see programming again now I create the joke but the joke is not being displayed for some reason nice what is happening right so if I go out here I mean I console log the response so I got the response I set the response but I didn't get it in my AES file where I should be getting the joke what's the reason for it why is that happening right so I have the response which is false okay this is not a setup or other kind of joke it's just joke so it's just giving me random jokes fine because there are two type of jokes in the array or in our API right nice so uh there's one more check that I have to do is if there is if our data let's say contr Z right so I'll just say if data do joke exist then we want to show data J joke okay and if it does not exist they're want to show this inside obviously a react fragment let's put everything here right and if there is a joke normal joke then I just want to show you a normal joke not with punch line and everything okay now select programming and it will always show you a joke right select programming it will always show you joke knock knock who is there very long P Java it is funny I suppose nice so the jokes look good I want to design it a little bit further and just say save it and I'll just say uh da class name container now I'm going to say CHT I we have a class name a class name container it is a div that contains zoke inside it now add CSS to this class name that gives Vibes of a joke right let's see what it does H it is scaling and everything okay great let's put it uh inside here nice so we have paragraph joke and container right so I'll just go to app CSS and put it here now um we have joke and paragraph I don't think I needed the paragraph but I do need joke inside this S1 so I'll just give it a class name of joke let's say class name of joke like this now if I go to the page let's see what it did oh it did nothing it just gave me this random thing uh because container is inside the container should be here but but I have to put two container then but I think I have to do it no matter what right so put it here and put it here and here we already have it this thing just remove it and put the T here I think it looks good save it nice I'm still getting the container the container right RSA data setup if we have setup up then show this otherwise just show null yeah so it's just not Ned tary operator per my document fine go here nice I say spooky why didn't the skeleton go for prom because it had no body all right let's say Christmas now it looks good right how is this dude this looks perfect racist now flag list has racist it will not show me any racist joke dark I will never forget my granddad last word to me just before read that are you still holding the ladder uh Christmas right now go refresh this I'll just go out there and say spooky how do redneck celebrate Halloween pumpkin dark why does Dr paper come in a bottle it's dark who had in Bey at Christmas a mean spy anyway the jokes looks pretty good and I am happy that we created this awesome project together instead of this I'll just give it an anchor tag to this and I'll just say s RF equals to uh the URL nice so dark I was walking down the street and saw some black guy on a bike and it looked like just like mine so I ran home to check thankfully he was still changed up in my basement what the this is racist dude I want I don't want a racist joke so I'll just select flag to racist so now I'll just go out and select dark again I was going to tell a dead baby joke but I decided to avort okay I'm just going to say dark again why can't orphans play baseball they don't know where home is okay I can just say dark again do T and Bunny Columbia have in common tort is in for State I don't want to racist joke it's a dark jokes man uh racist is off okay why did the ghost go inside the bar for the boo let's see dark joke my life is like the more children you have the heart rate programming es walks into a bar and sees two table it approaches and asks may I join you dark I'm going to tell you a dead baby joke party a bird chrristmas you couldn't see why couldn't this SK go to the Christmas party because you had nobody to go with okay so the project looks good I have still one thing about this project and that is this uh dark that's coming twice or three times you can see here like once I start adding dark then the dark gets added and added and added in the same thing which I absolutely don't like so what I can say is uh in my chat GPT I will just say get batters from URL in JavaScript let's see uh I don't want s patters I just want normal patterns uh how to get BM value ID and post from URL in JavaScript let's see I have to split it with Slash oh this is so painful man why do I have to do that anyway Let's Do It um let's say so whenever we are in our category we're going to check if URL doit and split it with just the slash and say dot includes the the S params then just return from it okay I think it will work let's try it out refresh this page go to Spooky I get a spooky joke go to Spooky again there are two spooky go to Spooky again and there are three spooky why are there spooky and spooky and spooky uh let me cons log these two things so let's say URL split console log to see what's coming up um console. log and then uh another thing is search parents let's see what's coming up there as well inspect and console and I will just select category spooky we have spooky spooky spooky if it includes then we such a simple stupid mistakes right if it does not include then return no I want to if it's include that so I think I'm in the right space I get the spooky I got spooky I think it's because it's the small letter uh probably so I will just bring it down to lower case say two lower case like this and probably we are good if I try it out spooky one more time it will not do anything which is perfect spooky okay I get a spooky joke I like spooky doesn't work dark it will work nice so our project is completed if you can see here I can select programming I'll get a programming joke it's a long joke so I don't I'm not going to read it but I and if I say select programming again I will not get any programming selection I can say spooky and I'll get a spooky joke right if I say dark and I'll get a dark joke but I don't want a racist joke so can just close this racist and Black Flag Blacklist flag to racist so now if I go to dark I will never get a racist joke again you know I Christmas now get a Christmas joke so if just refresh the page go out here and see spooky I'll get a spooky joke I can just say Christmas and a Christmas joke you know but now I want a button where I don't have to uh select it again and again also programming see a programming job I'll say Christmas set a Christmas joke so yeah it looks pretty good and the project looks fine I hope you like the project thank you for watching if you watch it this long and yeah it was fun creating it

Channel: Code with Vivek

Views: 172

Keywords: nextjs, react, js, quiz app, next 13, next app directory, how to build quiz game in nextjs, how to create next app in nextjs, What is server actions in nextjs?, Nextjs Tutorials, web, we projects, Next js guide, How to create a project in nextjs, Create a quiz gamr, 100days of coding, Nextjs for begineers, Nextjs Basiccs, #nextjs, serverless, quizapp, nextjs in hindi, react in hindi, coding in hindi, nextjs quiz, quiz in nextjs in hindi, nextjs project, nestjs, quiz app nextjs, next

Id: imre-RqNGU0

Length: 109min 55sec (6595 seconds)

Published: Sun Jan 07 2024