הצגת רשימת העובדים
employees שמציג את EmployeeList, ובתפריט נוסף פריט Employees שמוביל אליו.EmployeeModel, וב-componentDidMount יש גלישה עם הספרייה לכתובת העובדים שבקונפיג, ואז עדכון ה-state.tbody שבו tr משוכפלת. בקונפיג נוסף נתיב נפרד לתמונות עובדים, שהוא כתובת העובדים עם הסיומת images. יש עיצוב פשוט לטבלה: ממורכזת, עם גבול וגובה ורוחב לתמונה.setState אחרי שהמידע מגיע. בגלל זה חייבים לכתוב ?. לפני הגישה ל-state (למשל this.state?.employees), אחרת מתקבלת קריסה כמו cannot read property of null. אותו תיקון עובד גם ברשימת המוצרים. אחרי שיש state, ?. על ה-map מיותר אך לא מזיק.פרקי ההרצאה: הצגת רשימת העובדים
תמלול ההרצאה: הצגת רשימת העובדים
הטקסט המלא של הדקות הראשונות בהרצאה «הצגת רשימת העובדים» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אוקיי, אחרי שהצגנו את רשימת המוצרים, אנחנו רוצים להציג גם את רשימת העובדים. אנחנו לא הולכים להציג עכשיו כל דבר שיש כאן. אנחנו כן רוצים לעשות כמה דברים מעניינים בהמשך עם העובדים של חברת Northwind, לכן אנחנו כן רוצים לראות אותם.
אבל אנחנו כבר יודעים את כל התהליך של מה בעצם צריך לעשות בשביל לגלוש לשרת מרוחק ולהביא מידע. אין צורך שנבצע את זה שוב פעם, אז מה שעשיתי זה פשוט בניתי את כל הקוד הזה ואני רק רוצה לעשות איזשהו review מהיר איתכם ולראות איך או מה כל הנוהל שהיינו צריכים
לעשות בשביל להביא מידע כלשהו אחר. אז דבר ראשון, מה שעשיתי בשביל להביא את העובדים זה גלשתי כאן ורציתי לראות רגע מה המידע שיש לכל עובד ואז ראיתי שלכל כל עובד יש איי-די, פרסט ניים, לאסט ניים, טייטל, קאנטרי, סיטי,
בירת' דייט ואימג' ניים. כל זה אמור להיות במודל. אז הלכתי ובניתי מודל. הנה תגיעת המודלים, הנה הם פלואים מודל ובניתי מודל שמכיל רק חלק מהנתונים כי זה הנתונים שרציתי להציג.
כמובן יכלתי להביא גם את הקאנטרי והסיטי והבירת' דייט אבל הסתפקתי באלה. יש לנו ID, First Name, Last Name, Title ו-Image Name.
הדבר הבא זה היה לבנות איזשהו תפריט ו-Route שמאפשר להציג את זה. אז בואו ניגש לקומפוננטות, בואו ניגש ל-Layout ו-In Routing והוספתי את ה-Route הזה.
Path, אם גולשים לאמפלואיז, בוא תציג לי את Employee List, שזה איזשהו קומפוננט שבניתי. הנה הוא פה, Employees Area ו-Employee List. בתפריט, אם אני הולך למניו, אז יש לנו עכשיו עוד מניו שמאפשר להציג את אותו ראוט, Employees.
Good. זאת אומרת, אם לוחצים בתפריט על Employees, מצליחים להגיע לראוט ולהציג את ה-Employee List. ב-Employee List יש לנו State של כל העובדים מסוג Employee Model Collection, ובקומפוננטידמאונט יש לנו גלישה עם access לאמפלואיז שזה הראוט שבנינו, זה הנתיב לשרת שבנינו בקונפיג, אם אני הולך לקונפיג איפה הוא נעלם לי?
הנה הוא, אז יש לנו את האמפלואיז הזה ותביא לי את כל העובדים, תעדכן לי בבקשה את הstate, ברגע שהstate מעודכן אז אנחנו יכולים לגשת ולהציג וכמובן הצגתי את זה כאן בחרתי להציג בטבלה, יש לנו פה את השורת כותרת ויש לנו כאן את ה-Body,
יש לנו פה שכפול של ה-TRים, טייבל רואו והצגת המידע. הנה יש לנו כאן תמונה, בשביל התמונה הלכתי ובניתי עוד נתיב, Employee Images, זה הנתיב הזה, שזה בדיוק Employees עם הסיומת Images.
ואז הוא כמובן מציג לי פה את התמונה. בעיצוב, יש לנו פה עיצוב פשוט של טבלה שנמצאת באמצע, ויש לנו כאן נתונים נוספים לטבלה ואיזה בורדר להציג ואיזה גובה ורוחב התמונה וכדומה. בואו נראה מה בעצם אנחנו רואים כשאנחנו גולשים לזה.
אז הנה אמפלואיז, אני גולש והנה אנחנו רואים את רשימת העובדים אל העובדים האמיתיים של חברת נורטרינד המיתולוגית ואנחנו רואים את השם הפרטי ושם משפחה ומה הטייטל שלהם בחברה.
יש לנו כרגע אפשרות לראות את עובדי נורטרינד עם איזה שהוא לינק, שימו לב רק שכאן למעשה יש לנו בהנהל צ'יינינג אופרטור גם על ה-State. אם אני אוריד את זה תהיה לנו פה איזושהי בעיה מפני שה-State עצמו יהיה נ"ל.
למה מקודם לא הייתה לנו את הבעיה הזאת? כי אין לי פה קונסטרקטור, הורדתי את הקונסטרקטור. התחלנו גם מקודם במוצרים להוריד את הקונסטרקטור בכלל ואז אין התחול של ה-state אלא רק כאשר אנחנו מביאים את המידע מהשר"ט ואומרים לו set state אז הוא בונה אובייקט state חדש.