Up next in 10
Fetching User Specific Notes in iNotebook _ Complete React Course in Hindi #72
50 views
Feb 11, 2024
In the 72nd episode of the "Complete React Course in Hindi," the tutorial delves into the iNotebook project, specifically focusing on fetching user-specific notes. This video provides a comprehensive guide on implementing the logic to retrieve and display notes that are specific to each user within the iNotebook application. The instructor walks viewers through the backend setup, showcasing how to associate notes with individual users and handle fetch requests based on user authentication. Whether you're a React developer looking to strengthen your skills in user-specific data retrieval or a learner interested in building personalized features for a React project, this tutorial offers valuable insights into fetching user-specific notes in the iNotebook application.
View Video Transcript
0:00
So guys, अभी तक का जो setup है हमारा, उसमें हमने क्या किया
0:03
कि जो हमारा authentication token था, उसको हमने hard code कर रखा है
0:07
और कहाँ पर hard code कर रखा है हमने authentication token को अपनी note state के अंदर, आप लोग यहाँ पर देख सकते हो, but this is not the ideal way to go
0:14
मैं यहाँ पर इसको hard code नहीं करूँगा अपने authentication token को, राजर मैं करूँगा क्या कि मेरा जो authentication token है वो मेरा local storage से आएग��
0:21
तो मैं काम करूँगा right click करूँगा इस पे और change all occurrences करूँग��
0:25
ताकि सारी occurrences जहां जहां मैंने ये token यूज़ किया है वो change हो जाए और मैं backspace marker यहाँ पर लिखूँगा local storage.get item
0:33
और यहाँ पर मैं token के नाम से इसको ले लूँगा तो basically मैं करूँगा क्या कि जो मेरा token ह��
0:39
वो मेरा local storage से आने वाला है ठीक है तो यह चीज मैंने यहाँ पर अपनी कर दिय��
0:44
अपने note state के अंदर ठीक है तो अब token जो आएगा वो local storage से आएग��
0:48
बट जब कोई भी login करेगा तब क्या हम token को save कर रहे हैं कि नहीं कर रहे है��
0:54
तो login component के अगर मैं आप लोगों को ले कर जाओ login component के अंद��
0:58
तो आप लोग देखो यहाँ पर कि हम set item token json.od token यह कर रहे है��
1:04
यानि कि हम लोग जो token है उसको save कर रहे हैं और उसके बाद redirect कर रहे हैं ठीक है
1:09
तो मैं यहाँ पर पहले alert दिखाऊँगा फिर redirect करूँगा, और मैं एक काम और करूँगा यहाँ पर, जो मेरा nodes.js है, उसके अंदर मैं क्या करूँगा
1:18
अगर local storage.get item local storage.get item token
1:28
जो मेरा token है अगर वो null नहीं है अगर मेरा जो local storage.get item
1:34
null नहीं है तब मैं क्या करूँगा तब मैं get notes करूँगा वरना मैं क्या करूँग��
1:41
वरना मैं redirect कर दूँगा काम पर login वाले page पर 이해 कि मैं कहूँगा क��
1:44
भाई देखो आप जो है है लॉग इन हो लो ठीक है लॉग इन हो लो ताकि आपके पास टोकेन हो और आप फेच कर सको अपने नोट्स क्योंकि को��
1:53
इंसार अगर लॉग दिन नहीं है तो कोई पॉइंट नहीं बनता है उसका अ कुछ भी ऐसा करने का ठीक है तो मैं यहा��
1:59
यूज हिस्ट्री का इस्तेमाल करूंगा मैं यहां पर लिखूंगा स्ट्री इस इकॉल टू यूज हिस्ट्री और इसके बाद मैं क्या करूंगा लिखोंगा हिस्ट्री डॉट पुष history.push
2:13
और slash login ठीक है तो देखता हूँ यहाँ पर क्या हु��
2:17
क्या मैं कुछ कर पाया यहाँ पर तो मैं home पर जाओं अगर तो देख��
2:21
मैं जैसे ही home पर जा रहा हूँ यह मुझे से कहा लॉग इन कर लो भाई साब अब मैंने यहाँ पर दो email बना रहा है एक email at gmail
2:27
एक बी महता तो मैं बी महता से अगर मैं यहाँ पर लॉग इन करूं यहाँ पर सबमिट करूं तो आप देखो यहाँ प��
2:32
बी महता के नोट्स आ गए अब मैं यहाँ पर एक काम करूंगा बी महता नोट्स लिख दूंगा और मैं लिख दूंगा दि��
2:37
इस बी महता पर्सनल इंफो ठीक है टाइम में पर्सनल लादूंगा एड नोट पर क्लिक करूंगा यहां पर देखो दिस बी 2
3:19
देखो अगर मेरा ये local storage.get item token जो है ये true है या नहीं कि ये null नहीं ह��
3:25
तब क्या करो अगर ये null नहीं है इसका मतलब जो इंसार ह��
3:29
वो locked in है ठीक है और अगर कोई locked in है तो इसका मतल��
3:33
मुझे उसको lock out दिखाना चाहिए तो मैं काम करता हूँ यहां पर नॉट करता हूं और यहां पर यहां पर क्या करूंगा मैं यहां पर को लगाकर लॉग आउट के लिए बटन यहां प��
3:41
दूंगा तो मैं यहाँ पर लिखता हूं button.btn.btn primary और यहाँ पर मैं लिख दूंगा मैं यहाँ प��
3:50
एमिट क्यों नहीं उसकर पा रहा हूं primary button.btn मैं यहाँ पर एमिट उस नहीं कर पा रहा हूं कोई बा��
3:57
नहीं बटन क्लासनेम इस एकवल टू यहां पर लिख दूंगा बीटी एन बीटी एन प्राइमरी और यहां पर मैं बटन क��
4:08
क्लोस कर दूंगा यहां पर लिख दूंगा लॉग और इसको जैसे सेव करूंगा तो यहां पर मुझे लॉग और दिखना चाहि��
4:14
की दिख रहा है ठीक है मैं चाहूँगा कि कोई भी इस पर अगर क्लिक करे तो क्या हो एक लॉग आउट नाम क��
4:22
फंक्शन कॉल हो इन फैक्ट हैंडल लॉग बोलता हूं इसको मैं एक हैंडल लॉग आउट नाम का फंक्शन कॉल हो ज��
4:28
क्या करेगा? कुछ नहीं करेगा, simple मैं यहाँ पर लिखता हूँ handle log
4:34
is equal to मैं यह कहूँगा basically handle log out के अंदर की जब भी को��
4:41
click करे इस पर आप क्या करो सबसे पहले तो local storage dot remove item क��
4:47
दो token ठीक है आप token को हटा दो और उसी के साथ साथ आप क्या कर द��
4:52
दो रीडियरेक्ट कर दो कहां पर हिस्ट्री डॉट पुष और कहां पर आप रीडियरेक्ट करोगे आप करोगे लॉग इन प��
5:00
रीडियरेक्ट ठीक है तो यह इस ट्रील यूज हिस्ट्री हुआ इस्तेमाल करूंगा यहां पर ठीक है तो मैं यहां प��
5:06
लिखता हूं हिस्ट्री इस इक्वल टू इन फैक्ट लिखोंगा लेट हिस्ट्री इस इक्वल टू तो मैं यहां पर लिखता हूं लेट हिस्ट्र��
5:13
इकॉल टी यूज हिस्ट्री ठीक है और मैं स्ट्री डॉट पुष्ट करके कुछ ऐसा कर सकता हूं ठीक है और यहां पर मुझ��
5:21
कुछ एरड देखने को मिल रहा है कि यूज इस ट्रीस नॉट डिफाइंड होकर तो मुझे यूज इस ट्रीस को लाना पड़ेग��
5:26
50 66 50 use response line number 66 comment out
5:55
बाद भी response is assigned a value, line number 43 पर, line number 43 पर भी ये कह रहा है
6:00
रिस्पॉंस इस वाल्यू बट नेवर यूज्ड तो रिस्पॉंस भी यहां पर यूज़ नहीं हुआ है कह रहा है तो मैं काम करत��
6:07
हूं कंसोल डॉट लॉक कर देता हूं जैसे अनको ठीक है यह मैंने कर दिया यह काम में लाइन नंबर 59 में भी करूंग��
6:16
लॉग लॉग कर रहा हूं ठीक है अब यह करने के बाद आप लोग देखो यहां पर कि मैं यहां पर आता हूं और मै��
6:31
इसको रिलोड करता हूं यहां पर देखो और मैं लॉग आउट करता हूं तो देखो मैं यहां पर रिडारेक्ट हो गय��
6:35
मैं home पर click करता हूँ तो देखो मैं तब तक home पर नहीं जा पा रहा हूँ जब तक मैं login नहीं कर लेत��
6:39
अब मैंने b mehta का note अगर मैं login करके आपको दिखाओ तो यह देखो यहाँ पर b mehta notes आ रहा ह��
6:45
अगर मैं log out करूँ और इसके बाद मैं ये दूसरे वाले email से login कर लू��
6:48
तो देखो यहाँ पर किसी और के notes आ रहे हैं ठीक है अगर मैं log out करके sign up कर लूँ किसी और नाम से ठीक ह��
6:56
मान लो मैं काम करता हूँ यहाँ पर 1234567 के नाम से एक account बनाता हू��
7:02
चाहिए और जीमेल टू डॉट कॉम करता हूं ताकि इमेल सेम ना हो ठीक है तो मैं सब्मिट करूंगा आप लोग देखो यहां पर एक और मैंने इमेल बना लिया है कोई नोट्स नहीं है यहां पर मान लो मैं यहां पर फर्स्ट नोट डालता हूं ऐसे करके फर्स्ट नोट औ��
7:32
ट्रिप्टी मैं ऐसे करके इसको अपडेट भी कर सकता हूं ठीक है वह रिलोड करूंगा तो यह अपडेट जो है यहां पर मुझ��
7:38
दिखेगा, मैं log out करके अगर बी महता की ID से login करूँ अब, तो आप लोग देखो यहाँ पर बी महता की notes आ गए
7:44
मैं log out करके अगर अब किसी और की ID से login करूँ
7:48
तो आप देख सकते हूँ यहाँ पर उसके notes आ गए, तो कुल मिलाकर बात यह है कि आ��
7:52
अलग अलग account से यहाँ पर बना सकते हो और उसी के साथ सा��
7:56
आप लोग क्या कर सकते हो कि सिर्फ वो notes दिखा सकते ह��
7:59
जो कि इस particular user से associated है ठीक है अब यहाँ प��
8:04
बहुत सारी चीज़े ऐसी है जो कि missing है जो कि मैं चाहता हूँ कि आप लोग खुद से करें मैं इस particular
8:22
अगर कोई भी इंसान लॉग आउट करता है तो यहाँ पर एक heading आनी चाहि��
8:27
कि खेर heading तो मैं ही डाल देता हूँ heading एक बहुती simple सी चीज़ ह��
8:31
और एक basic चीज़ भी है तो मुझे डालनी भी चाहिए थी heading पहले ही तो मैं काम करता हूँ अपने component के अंद��
8:37
form h2 login to continue to i notebook
8:50
और उसी के साथ साथ यहाँ पर मैं काम करूँगा class name is equal to mt3 कर दूँग��
8:59
यानि कि मैं top से margin दूँगा इसको 3 की यहाँ पर थोड़ी space दूँगा क्योंक��
9:03
जब मैं login करूँगा तब यहाँ पर ये चीज दिखेगी मैं नहीं चाहता कि यहाँ पर spacing थोड़ी सी खराब ह��
9:08
similarly मैं sign up के साथ भी करूँगा यह काम मैं sign up के साथ भी करूँग��
9:12
जो काम मैंने यहाँ पर किया है तो मैं sign up वाले component में आउँगा अपने sign up वाला component मेरा काम पर ह��
9:18
यह रहा मेरा sign up वाला component तो जो काम मैंने login के साथ किया वही काम मैं sign up के साथ भी करूँगा तो यहाँ पर MT3 जो class है इसको मैं यहाँ add करूँगा और इसको मैं हटाऊँगा और यहाँ पर मैं लिखूँगा create an account to continue to use लिख देता हूँ यहाँ पर ठीक ह��
9:41
to use iNotebook create an account to use iNotebook ठीक है और यहाँ पर एक काम कर देता हू��
9:47
कि थोड़ा सा ना यह MT3 करने में थोड़ा सा जीब दिख रहा है तो मैं इसको एक काम करता हू��
9:51
MT2 कर देता हूँ ठीक है थोड़ा ठीक लग रहा है य��
9:55
अगर आप चाहेंगे कि नीचे को थोड़ी सी और space देना तो वो काम भी आप लोग कर सकते हो यहाँ प��
9:59
class name is equal to आप यहाँ पर my2 दे सकते हो तो उपर नीचे दोनों से आप प��
10:06
थोड़ी सी spacing आ जाएगी तो वो सब चीजें मैं आप लोग के ऊपर छोड़ दूँग��
10:10
अगर आप चाहें तो इसमें भी यह चीज कर सकते हो अब देखो यह MB3 किया हुआ है मैं अगर इसको MY3 कर द��
10:15
तो यह उपर की तरफ भी थोड़ी बहुत मार्जिन लेके चलेगा और बाकी चीजे��
10:20
CSS से आप लोग change करी सकते हो, तो कोई ऐसी बात नहीं है, इसको मैं MY3 कर देता हूँ, औ��
10:24
थोड़ा अच्छा बनाने के लिए, ठीक है, तो अभी यह थोड़ा सा ठीक लग रहा है, और यह जो spacing
10:28
छोड़ी हुई है, मैंने यह alerts के लिए छोड़ी हुई है, ठीक है, so I hope कि आप लोगों मज़ा आया है, iNotebook में काम करते हुए मेरे साथ, ठीक है, तो हम यहाँ पर login कर सकते हैं, हम log out कर सकते हैं, हम एक नए account बना सकते हैं, हम home पर जा सकते हैं, सारे के सारे काम हम लोग यहाँ पर कर सकते हैं, I hope कि यह जो project है, इसने आप लोगों की react journey मे��
11:00
अगर आप लोग CSS में या फिर margin ऊपर नीचे ये सब चीज़ करना चाते हैं तो वो भी आप लोग कर सकते है��
11:06
और अगर आपने अभी तक ये playlist access नहीं करें या react की तो इसको ज़रूर access करे��
11:09
यहाँ click करके bookmark करें इसको यहाँ click करके save करें इस playlist क��
11:13
अब यही लिए इस वीडियो में इतना है guys thank you so much guys for watching this video
11:17
and I will see you next time