הצגת פרטי מוצר
product/details/:id, והקומפוננט ProductDetails רק קרא את ה-ID בלי לעשות איתו משהו. גולשים ל-product/details/8 ורואים שהוא מגיע.NavLink ולא בתגית a, כי a תגלוש לשרת ותביא את האתר מחדש ותפגע ב-single page application. הראוט מקומי ולכן בלי config.urls: product/details/ משורשר עם props.product.id.product מסוג ProductModel (אחד ויחיד), בהתחלה אובייקט זמני ("נעל") כי אין עדיין מוצר.componentDidMount, בתוך try ו-catch (עם alert של ההודעה), עושים get לכתובת config.urls.products משורשר עם ה-ID. בשרתי REST API גלישה לכתובת עם /7 מחזירה רק את מוצר 7. הסלאש כבר בסוף הכתובת, ולכן אין לשרשר אחד נוסף. הפונקציה צריכה להיות async, ומעדכנים setState עם response.data.h2, שם ב-h3, מחיר עם סימן דולר, מלאי ו-img שה-src שלו הוא config.urls.productImages ועוד imageName. את כל זה עוטפים ב-box.componentDidMount, והנתונים עוד לא הגיעו מהשרת.?. (optional chaining) בכל גישה לשדה. (ב) conditional rendering אחד: מציגים הכול רק אם this.state.product מכיל ערך, בתוך קונטיינר אחד. במקרה השני אפשר להסיר את ה-?., והמרצה משאיר את הפתרון הזה.text-align: center, padding-bottom: 20, ותמונה ברוחב באחוזים עם margin של 10. מוסיפים NavLink בשם back שחוזר ל-/products.פרקי ההרצאה: הצגת פרטי מוצר
תמלול ההרצאה: הצגת פרטי מוצר
הטקסט המלא של הדקות הראשונות בהרצאה «הצגת פרטי מוצר» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הבא שאנחנו רוצים להצליח לעשות זה להציג פרטים ספציפיים של מוצר כשלוחצים עליו. נניח בואו נעשה את התמונה כלינק קליקאבל כזה שאפשר להקליק עליה ואז אנחנו רוצים לעבור לדף מיוחד שמציג פרטים רק של המוצר שהקליקו עליו ואז רואים גם את כל הפרטים ביותר גדול
ואת התמונה ביותר גדול. עכשיו אם אתם זוכרים בנינו כבר דף כזה, בנינו כבר ראוט כזה בואו ניכנס רגע למנגנון הראוטינג הנה הוא פה ונראה שיש פה איזשהו ראוט שבנינו בעבר שנקרא product/details/ והוא מקבל ID זאת אומרת אם אנחנו גולשים לראוט הזה ונותנים לו איזשהו ID
אנחנו רואים פה את הproduct details בואו נלך רגע לproduct details הוא נמצא בproducts area, product details וכל מה שעשינו בנושא הזה זה היה הצלחנו לשלוף את ה-ID שנשלח ב-route ולא עשינו איתו שום דבר מעבר לזה, רק כתוב פה product details ואולי הצגנו אותו על הקונסול או הצגנו אותו באלרט אבל לא עשינו שום דבר מעבר.
אנחנו רוצים להשלים את הרכיב הזה. אנחנו רוצים שאם יגלשו אליו, אז פה אנחנו נראה את הפרטים של אותו מוצר שזה ה-ID שלו. דבר ראשון, בואו נראה שאנחנו בכלל מצליחים להגיע לכאן.
אם אנחנו הולכים לפה ורושמים product/details/8 אז אנחנו רואים שהגענו ל-product/details. אוקיי, מעולה, עובד. בואו רגע נחזור.
אנחנו רוצים את אותו הדבר לעשות בקליק על תמונה. זה אומר שאנחנו צריכים לגשת לקארדים שלנו בואו נחפש את הפרודקט קארד הנה הוא ואנחנו רוצים שתמונה תהיה לינק כל מה שאתם עוטפים בלינק התוכן שלו הופך להיות לינק אם אני אעטוף דיו בלינק בתגית A
אז כל הדיו הזאת תהיה קליקאבל ותהיה בעצם לינק שניתן ללחוץ עליו אז אנחנו רוצים רק את התמונה כרגע אז אנחנו כעיקרון צריכים לעטוף אותה בתגית A אבל אמרנו אנחנו לא רוצים להשתמש עם תגיות a בreact כי אז האתר שלנו כבר לא יהיה single page application ברגע שנקליק על התמונה
אז הוא יגלוש לשרת בשביל לקבל בחזרה את כל האתר עם התמונה אנחנו לא רוצים את זה אנחנו רק רוצים שהוא יחליף לנו את הראוט ויחליף לנו את הקומפוננטה בלי לגלוש בכלל לשרת בשביל להביא דף הכוונה כדי לפתור את הבעיה הזאת השתמשנו בעבר ב-nav-link.
בואו נגדיר nav-link, נעטוף את התמונה. ה-nav-link צריך שיהיה לו 2, וכאן אנחנו צריכים לומר לו לאן אנחנו רוצים לגלוש. ה-route זה ראוט מקומי, זה לא ראוט בשרת, אז אני לא משתמש עם config.url.
הראוט המקומי היה product.details.slash ופה אנחנו רוצים לשרשר לו את ה-ID של הכרטיסייה הזאת. זה יהיה props.product.id בואו נבדוק שזה עובד.
נחזור בחזרה, שימו לב עכשיו שכשאני מרחף מעל תמונה אני הופך להיות יד, לוחץ והנה הגענו לפה, detail.slash 2 בואו נחזור, נלחץ על זה, go, כל מה שנשאר לנו לעשות זה לגשת לקומפוננטה של ה-details ולעצב אותה.
אז בואו נחזור לפה ואנחנו כאן בעצם רוצים לראות את הפרטים של המוצר. אז נגדיר שאנחנו רוצים שיהיה לנו כאן product details.
בואו נוריד רגע את השלוש נקודות והוא לא יהיה mp הוא יהיה h2 אולי זה קצת יותר גדול, product details, בסדר. אולי נהפוך את כל זה ל-box, ואז כל הפרטים יהיו באיזו קופסה גדולה כזאת.
אוקיי, אולי ניגש לפה ונתחיל להגדיר שאנחנו רוצים לראות את h3, כלומר, אנחנו רוצים להציג את הפרטים כ-h3, כלומר, כותרות יותר קטנות, ובואו נניח שזה יהיה נקודה state נקודה product נקודה name הנה ה-name שלו למה אין לי product פה ב-state אוי שאין לי product ב-state ובכלל לא הלכתי להביא את המוצר אוי אוי אוי
רגע מה אני כבר מציג כשבכלל לא הבאתי את המוצר איפה המוצר עצמו יש לנו רק את ה-id אז כאן בואו נלך ל-state ונגדיר product סוג product מודל אחד ויחיד והשאלה היא מה אנחנו רוצים לעשות פה בסטייט עם המוצר הזה, בואו נשים פה כרגע פרודקט, נעל נניח, תן לו נעל כי אין
לי כרגע מוצר כשאנחנו עולים, כאן אנחנו רוצים לגשת ולהביא את המוצר, אז פה אנחנו משתמשים ב-access למרות שכאילו יש לנו אותו כי הצגנו אותו לפני שנייה בליסט, כרגע נלך ונביא אותו מהשרת, אין לי בעצם את המוצר בקומפוננט הזה, יש לי רק את ה-ID שלו זה קצת יהיה מיותר לגשת
לשרת ולהביא אותו אם לפני שנייה כבר הבאנו אותו והוא נמצא לנו ברשימת המוצרים אבל לטפל בדבר כזה זה אומר שאנחנו צריכים איכשהו להעביר את המוצר מי את האובייקט מוצר מרשימת המוצרים לקומפוננטה של ה-Details זה קצת יותר מורכב לכרגע את זה נטפל בהמשך בזה נטפל בהמשך נראה איך בעצם
אנחנו יכולים להגדיר מידע שהוא ברמת כל האפליקציה, ככה שהוא יכול להיות משותף לכמה קומפוננטות, אנחנו לא שם עדיין. אנחנו, יש לנו את ה-ID.
אוקיי, אם יש לי את ה-ID, אני אלך לסרבר ויביא את המוצר הזה. נטפל בהמשך במצב של ייעול. אז בואו נעטוף את זה ב-Try Catch, כמו שעשינו מקודם ברשימת המוצרים.
הנה Catch, נציג איזה Alert, איזה Error, בואו נציג את ה-Message, וניגש לפה, יש לנו את ה-ID. טוב, אם יש לי את ה-id אז אנחנו רוצים לבצע גלישת access בואו ניקח את ה-response await access הנה הוא get תביא לי פרטים של מוצר בודד product model אחד ויחיד
אנחנו רוצים לגלוש לאן רשימת המוצרים שלנו היא config.urls.product זאת רשימת המוצרים כאשר אנחנו גולשים לפרודקט אנחנו מקבלים מערך של כל המוצרים אבל אם היינו גולשים לפרודקט סלאש 7 היינו מקבלים רק מוצר 7 זה משהו שהוא מאוד מקובל בשרתים של רסט API רסט פול סרוויס יש לנו את כל המוצרים את כל הלקוחות את כל הספקים סלאש קוד נותן לנו רק את
המידע של אותו אובייקט בדיוק אז בואו נחזור ופשוט נשרשר אותו עם ה-ID ששנייה לפני זה הרצינו אותו. האם אנחנו צריכים לשרשר פה גם Slash?
התשובה היא לא. למה? כי ה-Slash כבר נמצא פה, זוכרים את זה? זאת הסיבה ששמנו כאן Slash בסוף, כדי שלא נצטרך להתעסק עם אותו Slash בכל מקום שנרצה לשרשר עוד משהו.