Adding Infinite Scroll to Hunting Coder | NextJs Tutorial for Beginners #29
Adding Infinite Scroll to Hunting Coder | NextJs Tutorial for Beginners #29
All the source code and other material will be uploaded on https://codewithharry.com as and when available!
►Checkout my English channel here: / @programmingwithharry
►Instagram: www.instagram.com/codewithharry
python, C, C++, Java, JavaScript and Other Cheetsheets [++]:
Playlist: • Coding CheatSheets 🧾 by CodeWithHarry
►Learn in One Video[++]:
Python[15 Hr] - • Python Tutorial For Beginners In Hind…
Python Advance[3.5 Hr] - • Python Programming Course in Hindi (A…
Python[1 Hr] - • Learn Python In Hindi In One Video - …
Python[2 Hr] - • Python Tutorial In Hindi 🔥
Python[15 Min] - • 15 Minute Python Tutorial For Beginne…
JavaScript[1 Hr] - • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial For Beginners:…
php[1 Hr] - • Learn Php In One Video In Hindi - हिं…
php[2.3 Hr] - • Php Tutorial for Beginners in Hindi w…
php[Project]- • Login And Registration Form Using Php…
HTML[30 Min] - • HTML 5 Tutorial For Beginners In Hind…
CSS[8.5 Hr] - • CSS Tutorial In Hindi (With Notes) 🔥
CSS[1.4 Hr] - • CSS 3 Tutorial For Beginners: Learn C…
Wordpress[3.2 Hr] - • How To Make a WordPress Website | Wor…
Angular[2 Hr] - • Angular Tutorial in Hindi
Java[2.3 Hr] - • Java tutorial in hindi 🔥
Web Scraping[1 Hr] - • Web Scraping Tutorial using Python an…
MongoDB[2 Hr] - • MongoDb Tutorial For Beginners in Hin…
Numpy[1 Hr] - • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tutorial For Begi…
Linux[1 Hr] - • Linux Tutorial For Beginners in Hindi
JQuery[1.1 Hr] - • jQuery Tutorial For Beginners In Hind…
Git and GitHub[1.1 Hr] - • Git \u0026 GitHub Tutorial For Beginners I…
►Complete course [playlist]:
React - • React Js Tutorials in Hindi
Python- • Python Tutorials For Absolute Beginne…
OOP Python- • Object Oriented Programming Tutorials…
Java - • Java Tutorials For Beginners In Hindi
JavaScript- • JavaScript Tutorials In Hindi
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials In Hindi
C++- • C++ Tutorials In Hindi
Git \u0026 GitHub- • Git and GitHub Tutorials In Hindi
Android Dev- • Android Development Tutorials in Hindi
Python GUI- • Python GUI: Tkinter Tutorial In Hindi…
Web Development- • Web Development Tutorials For Beginne…
Python Django - • Python Django Tutorials In Hindi
Projects Using HTML, CSS \u0026 Javascript- • Projects Using HTML, CSS \u0026 JavaScript…
Data Structure and Algo - • Data Structures and Algorithms Course…
Follow Me On Social Media
►Website (created using Django Rest \u0026 Angular) - https://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
Twitter - https://twitter.com/Haris_Is_Here
Comment “#HarryBhai” if you read this 😉😉
Content
0.001 -> Infinite scrolling is such a feature,
2.142 -> If you get to see it in any blog,
4.902 -> Then the blog looks very professional.
6.902 -> Previously "Pagination system" was uses
9.366 -> In which by going from one page to other
11.889 -> You could see it
13.231 -> 1,2,3 numbers used to come.
15.48 -> Like, consider you have 50 blogs.
17.735 -> On one page you are showing five.
19.15 -> Then your 10 pages will be formed.
20.648 -> So that type of pagination can be showed by infinite scroll.
23.711 -> Like facebook's news feed.
25.724 -> You keep scrolling & new items keep on coming.
28.511 -> We will implement same thing.
31.419 -> On your blog page.
32.434 -> Where we are showing all your blogs.
34.348 -> We will implement it there.
35.738 -> Let's go to the computer screen
37.347 -> And see how the work is done.
48.608 -> So this hunting coder,
49.792 -> At this point, it looks really good ok.
51.792 -> If I open my server and show you,
54 -> Then look our hunting coder looks like this.
56.523 -> Now here there is a blog, about, contact.
59.142 -> I feel just like I keep staring at it repeatedly.
62.267 -> Ok, if I open my blog then look here
64.661 -> There are 3 posts.
66.119 -> Consider if here there will be 3000 posts.
67.845 -> Then will I show all post on 1 page?
70.427 -> Will be correct?
71.398 -> Showing all posts on one page.
73.322 -> No, it won't be correct.
74.479 -> So today we will talk about this
76.227 -> What to do?
77.411 -> How to implement infinite scroll?
79.464 -> Ok, so what will I do over here?
80.627 -> I open a new tab.
81.489 -> And here I will write infinite scroll react.
85.312 -> Ok
85.854 -> By the way, let me tell you one thing
87.547 -> If you want to implement infinite scroll by yourself
90.226 -> And with the help of javascript, you yourself want to make it
92.95 -> Infinite scroll
93.79 -> Then you can use intersection API.
99.585 -> Intersection observer API.
101.38 -> By using this you can easily make,
103.767 -> In pivot javascript infinite scroll.
105.644 -> But we don't do that here.
107.033 -> But we have to save time.
108.587 -> And we will use libraries.
110.196 -> Which are already made.
112.342 -> Ok, so look over here
113.252 -> How we can implement infinite scroll in react?
116.892 -> I got one component.
117.858 -> So look what happens sometimes,
119.527 -> You will not get good components.
121.907 -> Ok,
122.407 -> Means you won't get good packages
124.407 -> Of doing any work.
125.69 -> So here I will do yarn add react infinite component scroll.
129.068 -> And quickly by coming to the code,
130.745 -> And here I will stop the server.
133.572 -> Yarn add
136.024 -> I will do this ok.
137.684 -> So this will be installed.
139.416 -> Ok, after installing what will I do?
141.352 -> I will import it and after importing it
144.689 -> I will check how I can use it.
146.689 -> What all are functions are there.
148.643 -> To be very honest I haven't prepared this library.
152.837 -> Maybe in past I have used it in react course.
154.868 -> But right now I am not prepared.
156.868 -> And I will use this library.
158.157 -> Ok
158.905 -> The library is installed. Now, what will I do?
161.247 -> My blog.js
163.585 -> That means this component,
165.191 -> Ok of the blog.
166.319 -> What will I do in this?
167.194 -> I want to use infinite scroll over here.
169.672 -> Ok
170.172 -> So firstly I will go into the documentation.
172.587 -> To check how to use it.
174.505 -> Using scroll on top.
175.999 -> I don't want scroll on top.
177.183 -> I want
178.45 -> Datalength= items.length
180.45 -> It is important to render next data.
181.907 -> Ok, make has more true.
183.513 -> Do loader= loading.
185.221 -> And for next data also maybe they have gave function and all.
190.512 -> Let's do one thing.
191.246 -> I will bring this infinite scroll over here.
193.346 -> And infinite scroll in main
197.428 -> I will add it here.
198.894 -> Ok, here I will prepare here.
200.794 -> What will be the length of our items? It will be blogs.length.
203.201 -> Ok, it will be blogs.length
205.201 -> Fetch data will be our function that we need to implement.
207.966 -> Have they shown how to implement fetch data?
210.36 -> How will fetch data return?
212.36 -> Ok, so here they have given something.
215.244 -> Examples ok.
216.653 -> Of codesandbox.
217.95 -> Let's see if we can copy some code from there.
219.732 -> Ok
220.671 -> So open quickly.
222.601 -> Fetch more data something like this
224.01 -> I will copy there fetchmoredata ok.
226.514 -> Here they have made a dummy function.
230.528 -> Which adds random thing in array after sometime.
235.254 -> Look sometime after loading it is adding.
238.425 -> Ok, so what should I do?
239.429 -> I don't want to be involved more.
241.129 -> Here simply, I used infinite scroll.
244.057 -> Here I gave length.
245.752 -> I will also write fetch more function ok.
248.37 -> I will also take fetch more function over here.
251.073 -> And I will remove use effect from here.
253.073 -> Ok I took fetch more also.
255.126 -> And after taking fetch more,
257.126 -> Here we are returning this.
259.386 -> Infinite scroll blogs.length
262.117 -> Fetch data is given, hasmore is given true.
264.251 -> Hasmore=blogs.length
266.898 -> So we will configure it.
268.251 -> It says you should use this props
270.785 -> When you want pull down functionality.
272.108 -> I don't want pull down functionality for now.
274.193 -> Ok, I will save it.
275.687 -> And here I will check if there is any error,
277.687 -> Which is occuring.
278.411 -> Fetchmoredata is not defined ok.
280.777 -> I have defined fetchmoredata.
282.636 -> Then why is it saying fetchmoredata is not defined.
285.199 -> Fetchmoredata is not defined.
288 -> Fetch data fetch more data.
290.387 -> Um..
291.43 -> I did not understand why fetch more data is not defined.
295.877 -> Ok so fetchmore
297.005 -> Ok so I need to write const here.
298.527 -> Const=
300.849 -> Ok
301.471 -> Now it will work properly maybe.
302.735 -> Now it says fetch data is not defined.
304.144 -> So our sandbox example
306 -> Then maybe in that they have used fetchmoredata.
309.181 -> So either I make it fetchdata
310.815 -> Ok
312.573 -> Somewhat like this.
314.334 -> So this should work ok.
315.856 -> Now, here it says items is not defined ok.
318.587 -> Here I need to write blogs.
321.318 -> Ok, Here I need to write blogs.
323.037 -> And in fact I won't write blogs.
324.531 -> I will write this, like this.
326.756 -> I just don't need to give blogitem.slug as a key.
330.5 -> I will copy it from here.
332.55 -> And I will paste it here.
333.931 -> Ok and,
335.931 -> After doing this, what will I do?
337.62 -> I will comment out this.
339.937 -> Now, let me check if there is an issue or not.
341.403 -> Yes, it is there. Blog item is not defined. No problems.
344.585 -> It says blog item is not defined.
346.894 -> So we will do one more thing again.
348.894 -> We will keep this map like this.
350.844 -> Ok
351.665 -> So I will cut this over here.
352.596 -> And I will bring this like this.
354 -> Look, when you use any library
356 -> One very important thing is how to use it?
358.879 -> Ok. How the library is defined?
361.139 -> Is it defined for using like this?
363.693 -> That you need to add map.
365.488 -> Or is it defined like this,
366.948 -> By keeping it like this items may work.
369.081 -> So we need to see all that things also.
370.491 -> Let me check here, if there is any error.
372.717 -> No there is no error but this thing came 2 times.
374.717 -> Let me check.I must have done some mistake.
376.142 -> Here I have added nav bar 2 times.
378.403 -> I definitely did some mistake.
379.531 -> By mistake I must have copied navbar somewhere 2 times.
382.206 -> So main style=styles.main
384.966 -> So why is my nav bar coming two times. I am not getting it.
387.669 -> Ok, so I need to reload it.
389.078 -> Sometimes it happens in react ok.
390.544 -> If I reload it, it will become ok.
392.544 -> Now, look this is coming.
393.583 -> But how will I know that my infinite scroll functionality is working?
397.109 -> Ok, so I will do one thing
398.433 -> My blog data
400.433 -> I will make some copies of it.
402.556 -> Ok
404.706 -> OK
405.356 -> I have made many copies of it.
407.759 -> And after making so many copies, what will I do?
409.759 -> I will reload it ok.
410.859 -> I will reload it and look
412.401 -> I will scroll it scroll it scroll it
414.701 -> Loading
415.759 -> And error ok
416.718 -> Now, I will tell you how to fix this error?
418.718 -> Here I did hasmore =true
420.964 -> Ok, I have done hasmore=true
422.771 -> So what will I do?
424.543 -> I won't make hasmore=true
425.795 -> I will keep hasmore like this.
428.377 -> I will say,
429.354 -> I will say hasmore=
431.868 -> Um...
433.763 -> If I am fetching.
434.891 -> The more data that I am fetching
436.891 -> Ok, one fake API is also kept over here.
439.015 -> So I need to remove this fake API also from here.
441.012 -> What should I do over here?
442.112 -> I need to update the blogs.
443.774 -> So I will update blogs with more blogs.
446.365 -> So some work over here will increase.
448.59 -> Because I will need to make changes in API.
450.956 -> So what am I doing?
452.145 -> Here I am reading this blogdata.
454.145 -> By reading blogdata
455.47 -> All the directory content
457.47 -> I am returning them over here ok.
460.847 -> This time I won't do like this.
461.991 -> I won't return all blog data.
463.54 -> I will say," await fs.promises.readdir
466.891 -> And I will take data in a request parameter.
471.648 -> Ok, what will I do?
472.972 -> I will write somewhat like this.
474.438 -> I will say data=
475.931 -> Data = data.
479.534 -> Um..
480.831 -> Data.
482.043 -> I will use array slice method.
483.902 -> Array slice
486.268 -> And this array slice method came ok.
488.268 -> So this array slice method
490.071 -> What does it do?
490.777 -> It returns shallow copy of the portion of an array ok.
492.953 -> OK so I will do slice.
494.096 -> And here I will write slice.
497.688 -> And here I will write five ok.
499.534 -> I will write five and my request
501.872 -> Here I will print the request in Console.log(request.qeuery).
510.478 -> So quickly over here
512.478 -> By the way in my get blog I have used something like this.
515.8 -> So here I will write request.query.number ok
521.007 -> I will write request.query.number
522.416 -> .number
524.243 -> Or count ok.
526.121 -> I will write count.
526.883 -> How many blogs do I need?
528.883 -> Ok
530.017 -> Request.query.count
531.595 -> So I will write request.query.count like this.
535.339 -> Data.slice request.query.count ok
538.035 -> Now, what will I do?
538.994 -> When I am doing touch data
540.206 -> So I will increase by request.query.count Ok?
543.304 -> I will increase the data.
544.646 -> What will I do?
545.545 -> In fetch data
547.4 -> Usually how do we do the work?
548.781 -> We incrementally fetch the data from the database.
551.034 -> But now as we are using file system,
553.247 -> So we will not fetch incrementally,
554.656 -> What will I directly do over here?
556.206 -> I will do set blogs.
557.672 -> And here I will do data.
559.104 -> My data will come from fetch API.
560.929 -> In the same way, how it came from here.
562.959 -> So here the logic that I have used of API,
568.54 -> I will copy it like this.
570.65 -> Or, I will do one thing,
572.087 -> I won't copy this logic.
573.356 -> This time I will do fetch request.
574.824 -> I need to do fetch request only because
576.403 -> This scrolling will be on time.
578.269 -> It won't happen on built time.
579.481 -> So I will do one thing over here
582.173 -> I will use one fetch API,
584.623 -> Here I will add it to the async function.
587.495 -> Ok
588.285 -> And I will write let d= await fetch
594.001 -> Ok
594.501 -> Fetch and URL.
596.575 -> What will be in URL?
597.337 -> Our get, oh sorry not getblog, there will be blogs.
600.596 -> So localhost/blogs/api/blogs
609.01 -> And ?count=1
613.204 -> Why did it not come by count=1
617.792 -> Why did it not come? We have to see that.
619.679 -> As count=1,
621.679 -> When I sliced it
623.882 -> Then why did it not come like this.
625.583 -> Ok, I need to see that also.
627.388 -> So here blogs, blogs, blogs
630 -> Ok, count=1
632.196 -> So here I wrote data= data.slice
635.152 -> And here data.length
637.478 -> Console.log item
639.972 -> Ok, so the count value is 1
642.844 -> There is no problem with this.
643.944 -> What does slice do? It returns a copy of a section of an array.
646.731 -> For both start and end, a negative index can be used.
649.201 -> So why is it not giving one value I need to check.
651.904 -> I will restart the server and check.
654.185 -> I restarted the server and reloaded it.
656.974 -> It reloaded and this is not working
659.734 -> It is giving me all the blogs.
662.695 -> This is not slicing over here.
665.338 -> Ok, so here I can see one problem.
667.736 -> This is not a string.
670.102 -> This request.query.count
671.877 -> Sorry it is not a number it is a string ok.
674.125 -> So I will write integer.parse int.
677.7 -> Ok
679.299 -> .parseint
682.255 -> And after that, we can give this number.
684.601 -> Ok, so I don't need to write integer.
686.601 -> Just parseint
687.625 -> And now this should work.
690.4 -> Now, it is not working
691.584 -> So after doing parse
693.584 -> This slice is not working.
695.952 -> So I need to check this thing over here.
697.586 -> Why is this happening?
698.545 -> What is happening?
699.87 -> Console.logdata
702.854 -> Ok, so I will console log data.
704.235 -> I will remove this item from here ok.
705.504 -> And I will reload api again.
707.336 -> Now, I did count=2
709.42 -> And now as I am doing this
710.801 -> Then too, all my values are coming.
716.768 -> Ok, so here if I write 0,
718.768 -> Then what will happen?
719.868 -> Will it start from 0 and take it up to there.
722.796 -> Yes, now it is working.
723.699 -> If I wrote 0, then it is working.
725.727 -> Ok, so maybe the method I used is wrong
729.499 -> Here I should give the beginning index.
731.859 -> And here I should give the ending index.
733.184 -> And according to me, it will work.
734.621 -> Here I gave starting index previously.
736.621 -> That was my mistake ok.
738.065 -> So here I did 0,parseint and now this will work.
742.065 -> Ok, so I will make it one.Count =1
744.815 -> Ok, so look it is giving me just 1.
746.815 -> So what will I do now?
747.774 -> This blogs.js
749.38 -> Sorry blog.js which is my component
751.933 -> I will reenter it
752.949 -> I will come here and I will use this end point.
755.539 -> Here I did d =await.
757.314 -> Now, I will write let data= await d.json
762 -> And this data, I will do it set blocks data ok.
765.735 -> So, here I will use it and check
767.144 -> My infinite scroll.
768.947 -> I reloaded it.
770.019 -> And here as I am reloading it,
773.257 -> Here loading is visible
775.723 -> Sorry I have to inspect.
777.47 -> And here there is some problem.
779.06 -> It says expected two children with same key ok.
781.932 -> So here I did one mistake.
783.482 -> The mistake is, that the key over here
786.366 -> That is slug. Blog item.slug
789.144 -> Which should not be there. Blog item.slug shouldn't be there.
791.875 -> This blog item.slug is same over here.
795.253 -> I need sit and change it all.
797.253 -> So quickly I will change them.
800.234 -> I am changing all slugs
802.234 -> Look how much effort I need to take.
807.453 -> And over here
810.946 -> I will quickly change all slugs.
815.024 -> Ok.
817.457 -> Here also I will do it.
818.557 -> I will all the next js below tools.
821.603 -> I will delete them all.
824.807 -> I will delete all of next js.
826.807 -> I will do file save all.
828.695 -> Save all ok.
830.218 -> And all the next js one I will delete it.
833.428 -> Now, here let me check if this error is coming.
836.975 -> Is it coming now also?
837.962 -> Keys should be unique. How to learn javascript.
841.059 -> So I am reloading it.
842.018 -> And here I am not getting any issue ok.
844.026 -> So initially over here the
846.026 -> I will hydrate my pain.
847.604 -> I will close all these files.
849.604 -> Initially the pain I will hydrate
852.319 -> What will I do on it?
853.306 -> Where is blog.json? I will close all these jsons.
855.919 -> Ok
856.541 -> I will click on these jsons and I will do close to the right.
859.95 -> And here the one I will hydrate
861.823 -> Here my file, blogs
865.638 -> I won't do data.length
867.271 -> Here I will keep it just 5
868.806 -> Ok,so initially just 5 values will e given.
871.832 -> So here I will reload it.
873.129 -> And just 5 values will be given.
874.763 -> And as I will scroll,
876.591 -> In that, I want to increase that values.
878.122 -> But now the problem here is,
879.389 -> This doesn't work.
881.38 -> Here all blogs 5, all blogs 5
884.312 -> Ok, so if I scroll it again
886.428 -> Then it just shows all blog 5.
889.075 -> So, let me check what the problem is.
892.565 -> If I scroll it,
895.043 -> Here I will do count = count +2
897.606 -> So I will write dollar count+2
902.745 -> And here I am writing too much react ok.
905.448 -> The code I am writing now is react ok.
907.617 -> So basically, next js is not used more.
911.08 -> I am writing react and next js is react only.
913.08 -> Ok, so I need to do of count.
915.071 -> Use state ok.
918.263 -> Count set count= use state
923.638 -> Ok, and I will do somewhat like this.
926.116 -> And I will make count =2 ok.
927.638 -> I will initially make count 2.
929.638 -> And here I will fetch and bring 2 blogs.
931.28 -> Ok, less than 2.
934.152 -> And here count= count +2
936.152 -> So I did it.
936.735 -> So initially I will just get 2 blogs.
938.407 -> What does this say?
939.297 -> It says invalid left-hand side in "for...in"
942.532 -> What is the issue?
943.944 -> Use state count, use state 2
947.351 -> Count= use state
950.842 -> What is the issue?
953.156 -> I have used the wrong syntax.
955.634 -> That is the problem.
957.373 -> So by doing somewhat like this we have to reload it.
959.626 -> And initially, I will expect I get two.
962.892 -> The count array should be just 2.
964.892 -> Ok
965.555 -> Then these all are visible. Only 2 should come.
968.67 -> I will reload, then only two should come.Look just 2 are coming.
970.867 -> As I Keep on scrolling two are coming.
973.572 -> Two are getting increased,
974.447 -> And I need to write its ending,
976.24 -> When will its ending happen?
977.777 -> Ending will happen when our API
980.86 -> What will API return?
982.471 -> When API will return all our values.
986.441 -> Ok, so here I am not making a proper api.
990.775 -> But for now, what I want to do?
992.775 -> When user comes to my blog and he scrolls
995.371 -> Then he should see this type of scroll over here.
998.37 -> So here 4 blogs are visible,
1000.755 -> But more 2 blogs are not able to come.
1002.755 -> So I will do one thing.
1003.873 -> I will check why two more blogs are not visible.
1006.661 -> So here I will need,
1008.661 -> Alt data length ok
1009.988 -> Just watch what I will do over here,
1011.454 -> What will I do? After reading a directory
1014.326 -> I will write let all count = data.length.
1022.599 -> And in props I will give,
1024.346 -> All blogs and all count
1027.909 -> I was giving all count not cont count
1033.107 -> Ok, now look where I will use this all count.
1037.018 -> Here I need to add coma all count ok.
1039.018 -> Now, where will we use this all count.
1040.605 -> Here I will write hasmore =
1044.386 -> If props.allcount ok
1047.862 -> Is ==blogs.length
1053.264 -> Ok, if this happen.
1055.642 -> Then what will happen?
1056.292 -> If all blogs are fetched,
1058.703 -> Then hasmore needs to be false. So what will I do?
1060.904 -> I will make it not.
1062.735 -> Not equals to equals to.
1063.882 -> Ok
1064.644 -> Until this is not true, up to then this has more will be true.
1068.135 -> After that has more will become false. I will reload this.
1070.93 -> And I will reload again.
1072.649 -> And I will scroll.
1074 -> Here it still shows loading.
1075.353 -> And along with this, I need to do one more thing.
1077.353 -> The count
1078.537 -> I have to do set count = count +2
1082.309 -> By doing this I hope it works.
1084.762 -> Ok, so I will reload again.
1086.601 -> Look I scrolled and scrolled and scrolled
1090.598 -> You have seen it all.
1091.36 -> Yes, it works.
1092.133 -> Yes, it works ok.
1093.551 -> So it works.
1094.8 -> Now,here I will do one more thing over here.
1096.2 -> I will add one more this and check
1099.194 -> Ok, I will write "How to be a coder.json"
1107.179 -> And here I will paste this thing.
1109.179 -> By copying it ok.
1113.488 -> Now, I will reload again.
1116.001 -> Scroll scroll scroll scroll
1117.213 -> Why is how to be a coder not visible.
1119.325 -> This is bad news. Why didn't how to be a coder come?
1122.079 -> Is it showing me one blog less?
1124.304 -> How to be a... Ok, I need to change title also.
1126.529 -> How to be a coder ok.
1129.735 -> Now it will come. I will reload it.
1131.285 -> And here you can see how to be a coder flask is here.
1133.285 -> Now, I will scroll and scroll and scroll
1135.227 -> And here in inspect if I show you
1138.493 -> In the console, there is no error. Yes, it rocks.
1140.493 -> So in this way you can implement an infinite scroll.
1143.505 -> Here I will make my code slightly beautiful.
1146.968 -> I will do format document.
1148.462 -> And after doing the format document I will save it.
1150.462 -> Have I added useless console logs?
1153.974 -> I must have added.
1155.345 -> I have the habit.
1157.468 -> I will remove all use-less console logs.
1159.808 -> And after doing this,
1161.667 -> And what should we do?
1163.442 -> The extra spaces that we added
1165.348 -> For no reason, I will remove that too ok.
1167.756 -> So now our code looks clean.
1169.756 -> I have done console.log props I will remove that too.
1172.239 -> Now, anything should not look on console.
1173.761 -> Now, if I right click and inspect it
1176.253 -> If I show you console, then anything should not be visible ok.
1179.171 -> Nothing is visible and I have implemented this inifinte scroll.
1181.846 -> OK, now fetch data
1183.846 -> Which we implemented
1185.162 -> And hasmore
1187.162 -> This
1188.001 -> All these need to be implemented.
1189.354 -> Loader is very simple.
1190.749 -> You can make spinner to ok.
1192.084 -> I kept it like this only.
1193.291 -> You can use spinner.gif too.
1195.379 -> But we will this like this only.
1196.591 -> What is it taking from us?
1197.719 -> Now, after this, I want to do one more thing over here
1201.779 -> And that is I want to add everything to git ignore.
1205.045 -> We won't push it.
1206.065 -> I don't want to push it.
1207.27 -> But for this video what will I do?
1208.634 -> I will push all files for you ok.
1210.519 -> We will do clean-up in next video.
1212.603 -> And I hope you are having fun in this course.
1215.7 -> If you are not understanding things,
1217.7 -> Then I will suggest watch again.
1219.053 -> If your react is weak,
1220.462 -> Then there is a chance you may have some problem understanding
1223.559 -> But again it is not like you can't learn it.
1225.624 -> You need to give some extra time.
1227.616 -> And you will need to go back again & again and see things.
1229.864 -> Remember repetition is the mother of learning.
1232.235 -> Watch video again and again.
1233.757 -> If you will watch one time one thing will be clear,
1235.054 -> When you will watch it twice then you will see one more thing
1237.814 -> You will say oh it happened like this
1238.798 -> So watch videos again and again.
1240.327 -> Watching it again and again is beneficial.
1242.274 -> If you haven't accessed playlist,
1243.997 -> Then access the plalist.
1245.388 -> And remember you don't have competition with anyone.
1247.573 -> You have to complete your course yourself.
1250.733 -> Not, like if someone is completing the course in 2 days,
1253.571 -> And you are doing it in 20 days.
1255.648 -> Or you are doing in 200 days.
1257.648 -> Then it does not mean you are less than anyone.
1259.293 -> It is not like that. Everyone has their own learning speed.
1261.264 -> Keep this thing in mind.
1262.513 -> Ok
1263.291 -> Instead of in how many days I do it?
1264.767 -> Focus more on doing it properly
1267.808 -> And do it no matter how many days.
1269.126 -> OK, so definitely access the playlist.
1270.563 -> By clicking here save it.
1272.083 -> By clicking here bookmark.
1273.441 -> This much only for this video.
1274.703 -> Thank you so much for watching this video.
1276.626 -> And I will see you next time.
Source: https://www.youtube.com/watch?v=GRUmg3SujN4