Create selected courses

[shoebjoarder]

• create a card (https://v4.mui.com/components/cards/#card) with a collapse (https://v4.mui.com/components/transitions/#collapse) feature
• use grid components to make appropriate spacing
• use the Avatar (https://v4.mui.com/components/avatars/#avatar) component with the professor's first two initials. You may need to create a function for that
• use icon buttons (https://v4.mui.com/components/buttons/#icon-buttons)
• Find appropriate icons (https://v4.mui.com/components/material-icons/#material-icons)

[Daniel1100001]

https://codesandbox.io/embed/affectionate-sunset-1er9sp?fontsize=14&hidenavigation=1&theme=dark

Basic Layout in of the Card with Grid Containers

[Daniel1100001]

I don't know if I ordered the Layout correct. I think that using Gid Items with spezific Size is incorrect.

[shoebjoarder]

• The title of the courses should not be at the center of the collapsed card.
• There is no header h8. The variant of typography should be body1. Provide an inline style style={{fontWeight: "bold"}} for the headers
• The professor's name is in the center of the grid item. It should be on the left side, close to the avatar
• when the button is pressed, the icon doesn't turn upside down. Check the cards component in material ui

[Daniel1100001]

https://codesandbox.io/s/affectionate-sunset-1er9sp?file=/src/components/SelectedCoursesCard.js

I can't get the avatar and the big coursetitle to align properly. Should I implement the functionality already?

[shoebjoarder]

https://codesandbox.io/s/card-left-cif9ln?file=/src/components/SelectedCoursesCard.js

Please check this and continue the rest

[Daniel1100001]

https://codesandbox.io/s/polished-leftpad-fqlip4?file=/src/App.js

Unfortunately, I don't know if I put the snack bar thing in the right place. It does not work as indicated in the example (snackbar/transitution/consecutirve). The messages are not logged.

I have made progress with the lists. When remove [-] is pressed it is put into the HistoryList without filtering but if it is added again it is tested if it is a duplicate.

[Daniel1100001]

https://codesandbox.io/s/polished-leftpad-fqlip4?file=/src/App.js

I got an error that I got too many rerenders and I don't know what it is. I wrote the function "handle undo" and additionally created the variable lastCourseSwapped which I set when passing from the course to the other list. The function handle undo gets passed as parameter messageInfo. The error message is: Too many re-renders. React limits the number of renders to prevent an infinite loop.

[Daniel1100001]

it renders know: https://codesandbox.io/s/polished-leftpad-fqlip4?file=/src/App.js ok I think the Problem is that I can't pass messageInfo to my function, but I don't know why.

[Daniel1100001]

https://codesandbox.io/s/polished-leftpad-fqlip4?file=/src/components/SelectedCoursesCard.js:3964-4028 I have tried to deconstruced the real data format, but couldn't get the right. The const are always empty. So I have deconstructed the list inside the code with forEach-Loops, and it's still not working. I have looked for a solution to deconstruct a list in the propper way but could not find anything. Please help

[shoebjoarder]

You are rewriting the values of the keys when you are passing the prop to the child component. Instead of

const {
    selected = true,
    description = "",
    id = "",
    keywords = "",
    language = "",
    longtext = "",
    titleOfCourse: name = "",
    persons = [],
    shorttext = "",
    study_programs = [],
    subjecttype = "",
    sws = "",
    timetable = [],
    url = ""
  } = selectedCourse;

you should write this to destructure

const {
    selected,
    description,
    id,
    keywords,
    language,
    longtext,
    titleOfCourse,
    persons,
    shorttext,
    study_programs,
    subjecttype,
    sws,
    timetable,
    url
  } = selectedCourse;

Your dummy data does not have a key timetable

const selectedCoursesList = [
  {
    id: 1,
    selected: true,
    dayShort: "Mon",
    dayLong: "Monday",
    timeOfCourseShort: "14-16",
    timeOfCourse: "14:00- 16:00",
    titleOfCourse: "Title of the course",
    professorName: "Professor's name",
    professorInitials: "PN",
    elearn: "--",
    dateFrom: "Wed, 6th April 2022",
    dateTo: "Wed, 20the july 2022",
    rythm: "weekly"
  },
  ...
]

Are you sure this is the correct format of the data coming from the backend API?