How to handle API changes - Swiggy Restaurant Menu API - Namaste React

00:45:18
https://www.youtube.com/watch?v=c-JuevASV_o

Resumen

TLDRNan videyo sa a, yo eksplike kijan chanjman API a afekte aplikasyon meni restoran yo. Otè a demontre kijan pou adapte aplikasyon an ak estrikti done nouvo a, e konsa fè li pi fasil pou jere kòd akòz chanjman yo. Sa enplike kreye yon UI modile ki ka fasilman adapte ak chanjman nan API a san yo pa bezwen rekonfigire konplètman sistem nan. Li montre kijan estrikti done a ka klase an diferan kategori konnen kòm kategori meni ak kategori meni nèst, epi kijan sa yo gen pwòp done ak spesifikasyon. Nan fen videyo a, otè a montre yon pwototip UI ki entegre nouvo done sa yo efektivman.

Para llevar

  • 🔄 Chanjman API a nesesè pou restoran aplike estrikti done ki ajiste.
  • 📱 Anplikasyon meni a bezwen chanjman nan kod modilè pou entegre nouvo estrikti yo.
  • ⛏️ Yon bon estrikti modilè evite besoin re-kòd tout sistèm nan chak fwa gen chanjman.
  • 🗂️ Estrikti done restoran yo ka genyen kategori meni ak kategori meni nèst.
  • 👨‍💻 Devlopè a montre kijan pou kod kòrèkteman nouvo estrikti a pou UI a travay byen.
  • 🔢 Diferan kategori yo gen bezwen ki espesifik pou entegre pwofondman tout done nan UI a.
  • 🎨 Nouvo UI a gen estrikti diferan ak layout avanse.
  • 🧱 Re-itilize konpozan nan kod la fè chanjman yo pi fasil epi pi efikas.
  • 🔍 Komprann estrikti done a se etap enpòtan pou devlopman.
  • 🧩 Pwototip UI montre kijan done yo entegre efektivman nan aplikasyon an.

Cronología

  • 00:00:00 - 00:05:00

    Pale sou chanjman API ki afekte afichaj meni restoran an nan aplikasyon an epi eksplike enpòtans de estrikti done a. Chanjman nan ka sòti swa nan bò API oswa bò UX, e li enpòtan pou developè vin fleksib nan entegre chanjman sa yo.

  • 00:05:00 - 00:10:00

    Anonse ke estrikti done a chanje e montre ansyen estrikti done ak modifikasyon UI ki te fèt nan Wiki a. Diskite sou de senaryo kote swa modifikasyon UI oswa estrikti API chanje e bay reskonsabilite developè a.

  • 00:10:00 - 00:15:00

    Fè yon jeneralizasyon sou ansyen estrikti done a pou meni yo ak kategori, e eksplike ki jan UI a te prezante tou sa avè imaj, non, zòn, ak lòt infòmasyon nan yon fason espesifik. Mete aksan sou fasilite manipilasyon done yo anvan chanjman yo.

  • 00:15:00 - 00:20:00

    Diskite sou nouvo estrikti API a e montre de egzanp diferan sòti nan restoran tankou Burger King ak KFC. Diskite fason done yo òganize avèk kategori ak atik, e eksplike ki jan sa ka afekte afichaj nan aplikasyon an.

  • 00:20:00 - 00:25:00

    Diskite sou estrikti done konplèks ak kategori anbraye, itilize egzanp Pizza Hut pou montre kijan done lisans ak adrès restoran an ka afekte. Mete aksan sou chanjman estrikti URL la ki enkli nouvo query paramète ki bezwen gen ladan ID restoran ak lòt done kle.

  • 00:25:00 - 00:30:00

    Diskite sou detay done reponn API a ak siyifikasyon divès eleman nan API a, fè yon konparezon ak done Java ki ka gen menm estrikti eksepsyonèlman avèk baliz ki gen enfòmasyon sou restoran yo.

  • 00:30:00 - 00:35:00

    Estrikti done nan diferan nivo ak anbraye done atik, estrikti sa a montre kijan done yo òganize soti nan yon nivo jeneral a kategori anbraye. Sa sèvi kòm yon eksplorasyon pwofondè sou estrikti done nan endistri restoran an.

  • 00:35:00 - 00:40:00

    Prezante yon diskisyon sou entèseksyon ak divès mòd done ak ki jan nou kapab implante sa a nan kad UI a apati nan yon espèk komponentè. Diskite sou pwosesis modifikasyon done ak transfè diferan done an nan sistèm aplikasyon an.

  • 00:40:00 - 00:45:18

    Ekspoze modifikasyon ki fèt nan kod UI a ki itilize API chanje a pou montre enfòmasyon sou restoran yo, lis meni, ak kategori atik. Mennen yon diskisyon sou fason estrikti done yo ak entèpretasyon yo nan apèsi diferan modèl done e fason sa a ka aplike nan devlopman aplikasyon an.

Ver más

Mapa mental

Mind Map

Preguntas frecuentes

  • Ki API ki te chanje pou meni restoran an?

    Yon nouvo chanjman nan API a ki lakòz meni restoran yo pa montre kòrèkteman nan aplikasyon an.

  • Kijan yon devlopè ka entegre nouvo estrikti done yo nan UI a?

    Yon devlopè dwe entegre nouvo estrikti API a ak UI a pa fasilite entegasyon pa mwayen yon estrikti kod ki modulè.

  • Ki sòt done restoran yo ka genyen nan API a?

    API a ka genyen done tankou enfòmasyon restoran, kategori meni, ak kategori meni nèst.

  • Kisa ki fè kategori meni nèst diferan?

    Kategori meni nèst genyen lòt sub-kategori andedan yo, ki chak gen pwòp atik meni yo.

  • Kijan yon devlopè ka fasilite chanjman nan estrikti done?

    Yo ka modile estrikti kod yo, sèpare tit, meni, ak detay ak entegre estrikti done nan chak seksyon.

  • Ki lòt karakteristik espresyon yo te ajoute nan aplikasyon a?

    Nouvo UI a te gen yon orè ajiste ak konfigirasyon diferan nan meni restoran an.

  • Kisa ki dewoule lè yon chanjman nan estrikti API nesesè?

    Li ka nesesè retire kòd anvan an epi rekode sipò pou nouvo estrikti a pou asire entegasyon.

  • Ki mezi ki ka pran pou fè fas ak chanjman sa yo?

    Kòd modulè pèmèt chanjman yo pi rasyonèl pandan y ap re-itilize konpozan ki deja egziste.

  • Kijan yon pwototip UI montre enfòmasyon nan dènyèman?

    Yon UI senp te devlope kote itilizatè yo ka wè enfòmasyon restoran ak yon lis meni ak detay sou kategori a.

Ver más resúmenes de vídeos

Obtén acceso instantáneo a resúmenes gratuitos de vídeos de YouTube gracias a la IA.
Subtítulos
en
Desplazamiento automático:
  • 00:00:02
    hi everyone uh so a lot of people were
  • 00:00:05
    asking me about the new API change that
  • 00:00:08
    happened in the speaking and data is not
  • 00:00:11
    working for the restaurant menu listing
  • 00:00:13
    this all this data is not being
  • 00:00:14
    displayed in our
  • 00:00:16
    um in the app that we have designed and
  • 00:00:18
    created
  • 00:00:20
    um so I wanted to create a video to
  • 00:00:22
    explain the new data structure and how
  • 00:00:24
    you can implement it I'm not going to
  • 00:00:26
    spawn feed any anyhow but I'm just going
  • 00:00:29
    to explain the data structure and the
  • 00:00:32
    importance of this in the real life so
  • 00:00:37
    to start with uh like this is the work
  • 00:00:39
    of the content developer like
  • 00:00:40
    integrating the backend API and the UI
  • 00:00:44
    screens that we get
  • 00:00:45
    so two two things can happen
  • 00:00:49
    either the ux designers they can now
  • 00:00:52
    change the layout of the screen like
  • 00:00:54
    they wanted to introduce a new layout if
  • 00:00:57
    you see in the old UI in this Wiki what
  • 00:01:00
    they had was they had the information
  • 00:01:02
    with the background here restaurant
  • 00:01:03
    information they would have in the left
  • 00:01:06
    hand side they were having some widgets
  • 00:01:09
    which had the categories in the middle
  • 00:01:11
    they were having all the menu items
  • 00:01:13
    listed and the right side they were
  • 00:01:15
    having the cart card details now they
  • 00:01:18
    have changed the UI screen so uh one day
  • 00:01:21
    it could be like ux designers have the
  • 00:01:23
    uh restructured their UI design or the
  • 00:01:27
    other way we could think this like we
  • 00:01:29
    could think is the API structure was
  • 00:01:32
    changed like the backend developers they
  • 00:01:36
    wanted to change the API structure to
  • 00:01:39
    make some
  • 00:01:40
    um easy for the ux um you UI to be
  • 00:01:44
    displayed or something like that so it
  • 00:01:47
    could happen the both ways so being a
  • 00:01:49
    friend developer our work is to
  • 00:01:51
    integrate both the things
  • 00:01:54
    um so we can't uh
  • 00:01:56
    we might have developed a feature with
  • 00:01:59
    all this in the previous version with
  • 00:02:02
    her heart and soul to develop it but uh
  • 00:02:04
    in the next version we might have to
  • 00:02:06
    remove all the code that we have written
  • 00:02:08
    and we have to create from scratch or
  • 00:02:11
    new things so if your code if you have
  • 00:02:14
    written the code in modular structure
  • 00:02:16
    like you have separated out the header
  • 00:02:18
    your footer doesn't get this Disturbed
  • 00:02:21
    only in only the part like if you have
  • 00:02:24
    already returned this particular
  • 00:02:25
    information
  • 00:02:27
    like a
  • 00:02:29
    all the restaurant information in a
  • 00:02:31
    separate component your menu items in a
  • 00:02:33
    separate component your cart in a
  • 00:02:34
    simplate component in your widget in a
  • 00:02:36
    separate complaint this changes might be
  • 00:02:38
    a little easy for you because it's just
  • 00:02:41
    like a structure of the data which
  • 00:02:43
    you're passing to this component is
  • 00:02:45
    going to change but all the component uh
  • 00:02:47
    and the UI also you can change in the
  • 00:02:49
    particular component so that is one
  • 00:02:52
    thing
  • 00:02:55
    first thing is like you have to think
  • 00:02:58
    that it's not that complicated and it's
  • 00:03:01
    challenging so let's do that uh changes
  • 00:03:05
    first um let's see how the whole
  • 00:03:07
    structure
  • 00:03:09
    the speaky data was I am having that in
  • 00:03:13
    my config.json file
  • 00:03:17
    so this was the old mock data old data
  • 00:03:21
    structure I have marked it so if you see
  • 00:03:24
    earlier it was coming under
  • 00:03:26
    data so data there was all the restraint
  • 00:03:31
    information was directly given the ID
  • 00:03:33
    name and all the area and average
  • 00:03:36
    whatever is displayed in this part was
  • 00:03:38
    directly given so our UI was looking
  • 00:03:41
    something like
  • 00:03:43
    this this part which is lighting with
  • 00:03:45
    the image and everything was coming here
  • 00:03:48
    directly and uh
  • 00:03:56
    let me open it uh it was coming directly
  • 00:04:00
    and
  • 00:04:01
    um under uh items menu items we were
  • 00:04:05
    getting all the menu items that is
  • 00:04:06
    displayed in the center and all the left
  • 00:04:09
    hand side of the menu items if you
  • 00:04:10
    remember it was coming under widget
  • 00:04:12
    under widget you were getting all this
  • 00:04:14
    recommended and everything
  • 00:04:17
    on the item category name that was
  • 00:04:19
    getting displayed like uh recommended is
  • 00:04:21
    one category
  • 00:04:23
    um this is one plum cake is one category
  • 00:04:25
    and all that stuff like uh all this is
  • 00:04:28
    one one category
  • 00:04:31
    so this was displayed in the left side
  • 00:04:33
    and the center items were coming in the
  • 00:04:34
    sent items so mapped with an ID
  • 00:04:37
    particular ID you are getting all that
  • 00:04:39
    items displayed
  • 00:04:40
    so this was the whole data structure we
  • 00:04:43
    were we what we did was we just um for
  • 00:04:46
    displaying the menu items we went to
  • 00:04:48
    menu dot items dot we were mapping all
  • 00:04:50
    the
  • 00:04:51
    object.values of all this particular
  • 00:04:53
    thing and we were looping and showing it
  • 00:04:55
    it was not that complicated and we felt
  • 00:04:58
    it was easy to display now currently
  • 00:05:00
    what they did was
  • 00:05:03
    um let's go and see what has happened to
  • 00:05:05
    our current uh
  • 00:05:07
    API so let me open now
  • 00:05:12
    uh one particular restaurant which has
  • 00:05:15
    all the
  • 00:05:17
    information so Pizza Hut has everything
  • 00:05:22
    so where's Pizza Hut
  • 00:05:26
    producing Pizza Hut somewhere
  • 00:05:30
    um
  • 00:05:31
    I'll just open one one post or Burger
  • 00:05:34
    King
  • 00:05:35
    so Burger King has an information recent
  • 00:05:38
    information
  • 00:05:39
    uh it has some option for veg only some
  • 00:05:45
    filter and it has a recommended drop
  • 00:05:48
    down so if I close all the drop downs I
  • 00:05:50
    can see that each drop down is having
  • 00:05:52
    some dishes so let me close everything
  • 00:05:56
    uh it's having some category and some
  • 00:05:58
    items inside that category items so
  • 00:06:01
    there are four categories and four uh
  • 00:06:03
    multiple items one item inside this 26
  • 00:06:06
    items 20 item five items and there is
  • 00:06:08
    the restaurant license and the address
  • 00:06:11
    so this is one type of data that is
  • 00:06:13
    coming let's go and open another type so
  • 00:06:16
    KFC let's see KFC how KFC is having
  • 00:06:19
    their data
  • 00:06:21
    so KFC is also having restraint
  • 00:06:23
    information it's having one more in
  • 00:06:26
    Burger King there was no such offer code
  • 00:06:28
    here they have offer code here they have
  • 00:06:31
    the filter if they have some Carousel
  • 00:06:34
    kind of thing so if I
  • 00:06:36
    I can move here and there even here they
  • 00:06:39
    are having item category so this is one
  • 00:06:42
    type of data that is coming
  • 00:06:45
    then one more thing which has uh nested
  • 00:06:48
    items so let's open that I saw that in
  • 00:06:52
    keep
  • 00:06:53
    very cool Pizza Hut
  • 00:06:57
    think
  • 00:07:00
    in India it's closed right now so let me
  • 00:07:04
    open some other restaurant which has
  • 00:07:08
    I think Pizza Huts here it's open only
  • 00:07:11
    sorry
  • 00:07:12
    so Pizza Hut if you see
  • 00:07:14
    it has restaurant information it has
  • 00:07:17
    offer code it has um
  • 00:07:19
    filter batch veg filter batch
  • 00:07:22
    menu Carousel and multiple items
  • 00:07:27
    so here if you see inside item there is
  • 00:07:30
    one more drop down
  • 00:07:32
    inside this item category there is one
  • 00:07:34
    more category called
  • 00:07:36
    um veg Peas on on which Pisa and dip and
  • 00:07:39
    all that so if you open them there is
  • 00:07:41
    dishes so I can think this is nested the
  • 00:07:44
    item category so
  • 00:07:46
    one category is having another category
  • 00:07:49
    so that is having the data so this is
  • 00:07:51
    called nested category
  • 00:07:54
    so other things are same even this let
  • 00:07:57
    me minimize it so that it will be easy
  • 00:07:58
    to see
  • 00:08:00
    all the restaurant information so this
  • 00:08:03
    skin will be minimized because it is
  • 00:08:05
    nested
  • 00:08:06
    all this let me close
  • 00:08:09
    Beverages and license and this
  • 00:08:12
    information so since Visa it is having
  • 00:08:15
    all the
  • 00:08:16
    data let me take Visa open Visa has some
  • 00:08:23
    Network Tab and open Pizza Hut
  • 00:08:26
    so this is the URL new URL
  • 00:08:33
    you see the URL structure it is being
  • 00:08:36
    changed first it is having
  • 00:08:39
    um this is the end point
  • 00:08:41
    it is having multiple query query params
  • 00:08:44
    like page type complete menu is latitude
  • 00:08:48
    longitude and restaurant ID
  • 00:08:51
    so for me the concern is like uh
  • 00:08:54
    latitude longitude and the restaurant ID
  • 00:08:56
    so these three information I'll be
  • 00:08:59
    passing and I want to get
  • 00:09:01
    um the particular restaurant information
  • 00:09:03
    so what does the response that I'm
  • 00:09:06
    getting this is the structure of the
  • 00:09:09
    response that I'm getting let me open
  • 00:09:10
    this side so this is the important thing
  • 00:09:12
    which I'm going to see so under data
  • 00:09:16
    I have cards so under cards there are
  • 00:09:19
    three this is cards is an array so three
  • 00:09:21
    elements are there so first element let
  • 00:09:25
    me see everything has okay these two
  • 00:09:28
    things have card but this is having
  • 00:09:30
    group card
  • 00:09:32
    okay so the first one is having another
  • 00:09:35
    card this one is also having another
  • 00:09:37
    card
  • 00:09:38
    so inside card
  • 00:09:41
    can you see some similarities here so
  • 00:09:44
    even this is having a type this is
  • 00:09:46
    having a type
  • 00:09:47
    so
  • 00:09:48
    I type here if you see this has a long
  • 00:09:52
    string type okay
  • 00:09:55
    um what I think this could be is like in
  • 00:09:57
    back end they are trying to store it in
  • 00:09:59
    some kind of package structure it could
  • 00:10:02
    be that way in Java they will be storing
  • 00:10:04
    this way right so my concern is this
  • 00:10:06
    restaurant so restaurant and here grid
  • 00:10:09
    widget so here instant what I can
  • 00:10:12
    understand from this is like this
  • 00:10:14
    particular card
  • 00:10:16
    on this particular card object is going
  • 00:10:18
    to have the information about my
  • 00:10:20
    restaurant dot there is one info so this
  • 00:10:23
    particular thing is going to have all my
  • 00:10:25
    restaurant information this particular
  • 00:10:26
    part so if you have written a particular
  • 00:10:30
    uh
  • 00:10:31
    okay just keep in mind we can structure
  • 00:10:34
    the component like how many components
  • 00:10:36
    should be there later so for now this
  • 00:10:38
    part is coming from this particular
  • 00:10:40
    information okay
  • 00:10:42
    okay it has a name what I need name yes
  • 00:10:46
    it has name it has uh uh Cuisines yes it
  • 00:10:51
    has Cuisines it has a distance area yes
  • 00:10:54
    it has Bangalore it has Indra nagar
  • 00:10:58
    um all the distance parameters I think
  • 00:11:00
    it will be in SLA yes it has maximum
  • 00:11:03
    time delivery time it has um
  • 00:11:06
    it has ratings so I think rating is
  • 00:11:08
    prettier rating and all ratings okay and
  • 00:11:12
    cost for two everything is here till
  • 00:11:13
    here it is there in this test end so
  • 00:11:16
    good so this particular card we
  • 00:11:19
    understood
  • 00:11:24
    one is having this grid wizard grid
  • 00:11:27
    wizard is nothing but this particular
  • 00:11:29
    part I think so let me open it
  • 00:11:33
    and there are a lot of other things like
  • 00:11:34
    grid element in post Tales layout
  • 00:11:37
    okay let's see what it is
  • 00:11:40
    so again it is having offer info with
  • 00:11:43
    stale so this is going to have
  • 00:11:45
    information about the offers with the
  • 00:11:47
    style things included that's what it's
  • 00:11:49
    trying to explain I think
  • 00:11:51
    so here under info I'm having all the
  • 00:11:54
    details that is to be printed here so it
  • 00:11:57
    is having what coupon I should show What
  • 00:12:00
    description it has all these values like
  • 00:12:02
    logo and everything it has
  • 00:12:05
    so I understand that this cards of one
  • 00:12:08
    is nothing but this particular part of
  • 00:12:10
    the UI this particular part of the UI
  • 00:12:12
    yes so cart of two card cards of two is
  • 00:12:17
    nothing but a group cards
  • 00:12:20
    so
  • 00:12:21
    I just have this cards of two I don't
  • 00:12:23
    have any other information so what I can
  • 00:12:25
    understand is this cards of two is going
  • 00:12:27
    to have all this information
  • 00:12:29
    all this whole thing uh it is going to
  • 00:12:32
    have so how they have divided let's see
  • 00:12:36
    they have grouped cards card group map
  • 00:12:40
    so regular and cards so why this kind of
  • 00:12:44
    structure could be there is my
  • 00:12:45
    assumption is like um there could be in
  • 00:12:48
    future one more card group coming in
  • 00:12:50
    named special or something so this is
  • 00:12:52
    regular menu there could be a special
  • 00:12:54
    menu there could be a some kind of
  • 00:12:57
    [Music]
  • 00:12:58
    different kind of menu coming in this
  • 00:13:00
    card could be a complete menu partial
  • 00:13:02
    menu or something like that so this is
  • 00:13:04
    regular menu and for now there is
  • 00:13:08
    nothing I have checked so this is the
  • 00:13:09
    structure in which it's going to come
  • 00:13:11
    and inside card cards there are multiple
  • 00:13:14
    cards so there are 17 cards so in Array
  • 00:13:17
    it starts from 0 to 16 so 17.
  • 00:13:20
    how how come 17 let's um
  • 00:13:25
    let's see there is Bridge
  • 00:13:27
    visually is uh 0 this is one uh topic so
  • 00:13:31
    let's see if it is that is my assumption
  • 00:13:33
    let's see so let's open cart everybody
  • 00:13:36
    is having card card so let's open card
  • 00:13:39
    card
  • 00:13:40
    card
  • 00:13:42
    card
  • 00:13:48
    okay let's go to the bottom
  • 00:13:54
    okay let's see
  • 00:13:56
    um so the first uh first element of this
  • 00:13:58
    cards is nothing but again I'll go to
  • 00:14:02
    the end it is menu
  • 00:14:05
    menu which filter and batch so this is
  • 00:14:08
    the first card item wedge only filter
  • 00:14:12
    button I think this is what is going to
  • 00:14:14
    have information about this
  • 00:14:16
    and cards of one is going to have a menu
  • 00:14:19
    carousel
  • 00:14:21
    and this is the menu carousel
  • 00:14:25
    okay
  • 00:14:29
    menu Carousel and uh
  • 00:14:33
    the third item is nothing but
  • 00:14:35
    recommended right or item item category
  • 00:14:38
    item category
  • 00:14:39
    third one is item let me close this
  • 00:14:43
    third card is nothing but recommended so
  • 00:14:46
    that is one item category item category
  • 00:14:48
    is nothing but I can open that and then
  • 00:14:51
    see the dishes directly that is item
  • 00:14:54
    category component and next one is also
  • 00:14:58
    item category component that is one
  • 00:15:00
    place is also item category component
  • 00:15:02
    the fourth one is
  • 00:15:05
    this new cheesy Momo Mia so this is like
  • 00:15:08
    a nested item category nested item
  • 00:15:10
    category as I already mentioned it has a
  • 00:15:13
    lot of categories inside it
  • 00:15:16
    um
  • 00:15:18
    so four categories are inside it so this
  • 00:15:20
    is called nested category so inside
  • 00:15:24
    um the nested category if I open I'll be
  • 00:15:26
    having something this structure looks
  • 00:15:29
    similar to what we have seen here let's
  • 00:15:31
    see that later like how to do it so this
  • 00:15:34
    is how it is the data is so all this
  • 00:15:37
    data let me close it
  • 00:15:48
    okay so last one is like
  • 00:15:52
    last one is distant address so if you
  • 00:15:55
    see it contains Restaurant address the
  • 00:15:57
    previous the one before that is
  • 00:15:59
    restaurant license info yeah this is the
  • 00:16:02
    resident license info so this might be a
  • 00:16:05
    different component this could be in my
  • 00:16:06
    I'm not going to do this like this is
  • 00:16:09
    not my concern my concern is only nested
  • 00:16:12
    items and items so even I am not going
  • 00:16:15
    to do this veg options and carousels
  • 00:16:18
    also if you are interested and this
  • 00:16:19
    particular grid wizard also if you are
  • 00:16:21
    interested you can Implement all that
  • 00:16:23
    you have seen the structure here how it
  • 00:16:25
    is there so just create a component for
  • 00:16:28
    this and pass that particular props here
  • 00:16:30
    and show it same wise like you know
  • 00:16:33
    where this particular wedge option is
  • 00:16:35
    coming carts of zero
  • 00:16:38
    this particular cards of zeros having
  • 00:16:41
    this veg menu items just pass this props
  • 00:16:44
    to this and show in the similar way top
  • 00:16:47
    picks is nothing but this menu Carousel
  • 00:16:49
    item this is which is in cards of one
  • 00:16:52
    which has menu Carousel which you can
  • 00:16:54
    just pass this kerosol it has all the
  • 00:16:57
    four five items so this particular menu
  • 00:16:59
    Carousel it has you can show that
  • 00:17:02
    so in this particular thing I'm going to
  • 00:17:05
    explain about this item categories and
  • 00:17:07
    nested item categories
  • 00:17:10
    so
  • 00:17:12
    um that is here right item categories
  • 00:17:14
    and listed item categories
  • 00:17:18
    so what is the difference how will I
  • 00:17:20
    differentiate uh from the data whether
  • 00:17:22
    it is nested item category or item
  • 00:17:24
    category so with this ad type so at type
  • 00:17:28
    attribute is having a value nested item
  • 00:17:32
    get some long string an ending with
  • 00:17:34
    nested item category and this one is
  • 00:17:37
    item category so if
  • 00:17:39
    if these two things are there
  • 00:17:43
    um since I'm not concerned about
  • 00:17:44
    anything else
  • 00:17:45
    these two things is just my concern okay
  • 00:17:48
    I'm just taking uh
  • 00:17:51
    um these two things item category also
  • 00:17:53
    I'm opening this is item category this
  • 00:17:56
    is nested item categories in the item
  • 00:17:57
    category
  • 00:17:59
    like this one plus one medium at the six
  • 00:18:03
    forty nine this has four items right
  • 00:18:06
    like super value deal Super Value deal
  • 00:18:09
    and four items are there to wedge into
  • 00:18:12
    non-veg okay so these are Under item
  • 00:18:15
    cards
  • 00:18:16
    so item cards there are four cards
  • 00:18:19
    so each card is having a dish yes so my
  • 00:18:23
    end the atomic uh part is a dish
  • 00:18:27
    so last component of this would be a
  • 00:18:30
    dish which has
  • 00:18:31
    a name a praise and all description and
  • 00:18:34
    an image so this I'll be having it as a
  • 00:18:38
    component that I'm imagining this could
  • 00:18:40
    be a component and this uh one plus one
  • 00:18:43
    medium could be another component which
  • 00:18:45
    is having which will Loop through this
  • 00:18:47
    card items and show me all this dishes
  • 00:18:51
    so what I could think of is like
  • 00:18:54
    particular this particular card is
  • 00:18:57
    having this type right like four items
  • 00:18:59
    it is having
  • 00:19:00
    let me close this it is having this
  • 00:19:02
    particular card is having a title so
  • 00:19:04
    title is this I'll just display this as
  • 00:19:07
    one component which has a title and
  • 00:19:10
    display and for showing these items like
  • 00:19:12
    these four items I will be um looping a
  • 00:19:16
    looping in this items card card I'll be
  • 00:19:20
    mapping around this and showing
  • 00:19:22
    um
  • 00:19:23
    I'll be passing each item of this array
  • 00:19:27
    as props to my menu items menu item
  • 00:19:31
    component menu item is nothing but the
  • 00:19:33
    dish component this dish particular dish
  • 00:19:35
    values it is having right it is having
  • 00:19:38
    information about my particular dish
  • 00:19:40
    like name of the dish like Super Value
  • 00:19:43
    two medium which pizza so this is one
  • 00:19:45
    name of the dish it is having praise
  • 00:19:48
    it is having description
  • 00:19:51
    um it is also having image ID so I'll be
  • 00:19:54
    passing this particular info I'll be
  • 00:19:57
    passing this info as props to my menu
  • 00:20:00
    item component and this will be my item
  • 00:20:03
    category component this particular part
  • 00:20:05
    will be my item category components
  • 00:20:07
    props
  • 00:20:08
    so next nested item category so nested
  • 00:20:12
    item categories having categories so my
  • 00:20:16
    nested component is again having let me
  • 00:20:18
    close this a title so I'll be showing
  • 00:20:21
    some title and I'll be looping around
  • 00:20:23
    this category
  • 00:20:25
    um category object array and each I'll
  • 00:20:30
    be passing
  • 00:20:32
    so if you see the categories of array it
  • 00:20:36
    is having a same uh each element is
  • 00:20:39
    having the same data structure as my
  • 00:20:42
    item category if you see my item
  • 00:20:43
    category it is having title item cards
  • 00:20:46
    even here in the categories since having
  • 00:20:48
    title item cards so what I can think of
  • 00:20:52
    is to reuse the item category component
  • 00:20:55
    which we have returned and pass this
  • 00:20:57
    particular crop as props to that
  • 00:20:59
    particular component so if I pass this
  • 00:21:03
    title will go to as title and this
  • 00:21:06
    particular object will go already I have
  • 00:21:07
    done all the logic in my item category
  • 00:21:09
    component right like that we can do so I
  • 00:21:12
    I can understand that by this
  • 00:21:15
    particular data structure
  • 00:21:17
    so that's all so this is the way like
  • 00:21:20
    you can start coding so your backend
  • 00:21:22
    developer will um
  • 00:21:24
    have some
  • 00:21:26
    um
  • 00:21:27
    have some
  • 00:21:28
    understanding about um like we should
  • 00:21:31
    have some understanding with the backend
  • 00:21:33
    developer about this data structure
  • 00:21:34
    there will be sharing this data
  • 00:21:36
    structure we'll be getting the screens
  • 00:21:37
    from the ux designers now we have to
  • 00:21:40
    integrate both the things or
  • 00:21:43
    there will be some
  • 00:21:45
    um web developer in between who will be
  • 00:21:47
    writing all this um hard-coded values
  • 00:21:50
    for this and they'll be just giving the
  • 00:21:53
    quote to us now our work is to make it
  • 00:21:56
    as components and pass this data and
  • 00:21:58
    make it work
  • 00:22:00
    so what I have done is I have not
  • 00:22:02
    considered
  • 00:22:04
    I've developed a simple UI where if I
  • 00:22:07
    click on
  • 00:22:09
    so KFC was displayed right like we were
  • 00:22:12
    saying KFC
  • 00:22:13
    what I have done is
  • 00:22:18
    taking time to load
  • 00:22:24
    there is any error
  • 00:22:35
    you know why it's taking time
  • 00:22:41
    I am using my node API here API endpoint
  • 00:22:45
    to bypass the course
  • 00:22:47
    so I'm not directly hitting this Wiggy
  • 00:22:50
    API
  • 00:22:53
    okay I got some data let me open some
  • 00:22:57
    random question if I'm getting yeah I'm
  • 00:22:59
    getting the restaurant so
  • 00:23:04
    so this is the way I am displaying it so
  • 00:23:09
    if you've seen my UI this is the UI I'm
  • 00:23:11
    getting display
  • 00:23:14
    I'm hitting my um node API here
  • 00:23:19
    I've already driven the logic for that
  • 00:23:21
    let's see that
  • 00:23:22
    okay this is the way I'm displaying it
  • 00:23:25
    I'm not displaying any
  • 00:23:28
    um just restaurant information this is
  • 00:23:31
    um uh category items it is showing some
  • 00:23:35
    menu items so if I take KFC I can show
  • 00:23:38
    that uh how can this be different like
  • 00:23:42
    what I'm just showing I'll issue
  • 00:23:47
    so I'm showing the restaurant
  • 00:23:48
    information here just name quizzings uh
  • 00:23:52
    rating or delivery time and inside the
  • 00:23:56
    menu I'm just showing
  • 00:23:59
    the category items and the items inside
  • 00:24:01
    it
  • 00:24:03
    and inside uh
  • 00:24:06
    we didn't see KFC right sorry sorry oh
  • 00:24:09
    it was Pizza Hut so I'm getting confused
  • 00:24:11
    sorry
  • 00:24:13
    so Pizza had uh yeah Pizza Hut was the
  • 00:24:17
    one we were discussing I'm not showing
  • 00:24:19
    menu Carousel and um
  • 00:24:23
    and even the widget grid widget it's
  • 00:24:27
    just category items
  • 00:24:29
    so if you see uh this is my UI so inside
  • 00:24:33
    this nested category items we had four
  • 00:24:36
    things right like
  • 00:24:38
    this was my category items four dips
  • 00:24:41
    yeah so I I have kept one more uh
  • 00:24:44
    accordion for closing this as well
  • 00:24:47
    so this is the simply why I'm not using
  • 00:24:49
    anything complicated and I'm not showing
  • 00:24:52
    the other other things as well
  • 00:24:54
    so this particular component I have
  • 00:24:56
    reused I've already had the menu items
  • 00:24:59
    component
  • 00:25:01
    um I didn't modify anything in that
  • 00:25:03
    except that earlier it was cloudinary
  • 00:25:05
    image ID now it's just image ID is the
  • 00:25:08
    API
  • 00:25:10
    um
  • 00:25:11
    if you see inside
  • 00:25:13
    um
  • 00:25:14
    particular item
  • 00:25:16
    for a dish now it is coming it as uh
  • 00:25:20
    image ID earlier it was cloudinary image
  • 00:25:22
    ID only this change I have made in my
  • 00:25:24
    menu items
  • 00:25:25
    so other uh
  • 00:25:27
    um now let's go and discuss how we can
  • 00:25:31
    think this as a component
  • 00:25:33
    so the whole thing I have this whole
  • 00:25:36
    page like from here I have consider it
  • 00:25:38
    as restaurant details is my component
  • 00:25:40
    name inside which I have kept this as my
  • 00:25:43
    restaurant information component till
  • 00:25:45
    here interesting information component
  • 00:25:47
    let me show my UI so this is restaurant
  • 00:25:50
    information component info restaurant
  • 00:25:53
    info
  • 00:25:54
    um this whole this particular blog this
  • 00:25:57
    whole thing is restaurant menu list this
  • 00:25:59
    is the component name I have made and um
  • 00:26:03
    and this is a restaurant item category
  • 00:26:07
    component inside which there is menu
  • 00:26:09
    item this is menu item this one whole
  • 00:26:11
    thing is menu item I have looped around
  • 00:26:13
    and showed menu items that's all so this
  • 00:26:17
    um in the nested nested component
  • 00:26:22
    um there is Ministry this is one nested
  • 00:26:24
    component right in nested component this
  • 00:26:27
    particular component this whole
  • 00:26:29
    component is my uh nested item category
  • 00:26:32
    component inside which there is I'm just
  • 00:26:35
    calling the item category component in
  • 00:26:37
    the similar way this this is similar to
  • 00:26:39
    this item this is item category
  • 00:26:42
    component inside which there are
  • 00:26:44
    multiple
  • 00:26:47
    like menu items component
  • 00:26:51
    so
  • 00:26:53
    if you see this like it goes like
  • 00:26:55
    recursion right like one inside the
  • 00:26:57
    other so this is
  • 00:27:00
    item category which has multiple menu
  • 00:27:03
    items
  • 00:27:05
    in the similar way
  • 00:27:07
    um this is an estate item category which
  • 00:27:10
    has multiple item categories which in
  • 00:27:13
    turn has
  • 00:27:15
    which in turn has this is nested item so
  • 00:27:19
    which in turn has multiple items which
  • 00:27:21
    in turn has items menu items those this
  • 00:27:25
    is the UI structure which I am thinking
  • 00:27:27
    of implementing
  • 00:27:29
    so simple one right click if you are
  • 00:27:32
    interested and if you feel this API
  • 00:27:35
    endpoint is challenging you can go and
  • 00:27:37
    show all that menu Carousel and filter
  • 00:27:41
    which filter option and offer code and
  • 00:27:45
    everything you can show
  • 00:27:47
    so let me show the code in QuickTime
  • 00:27:50
    so if you understand this data structure
  • 00:27:52
    like if the first thing which you should
  • 00:27:55
    do is in any any time when you're going
  • 00:27:57
    to develop you have to understand the
  • 00:27:59
    data structure this particular payload
  • 00:28:01
    right this data structure you should
  • 00:28:03
    understand and you should you should
  • 00:28:06
    um break your component to break your
  • 00:28:08
    component hierarchy into multiple
  • 00:28:10
    components make a whole UI screen into
  • 00:28:12
    multiple component hierarchy and now uh
  • 00:28:16
    which component which particular data
  • 00:28:17
    should I pass to which component if you
  • 00:28:19
    are clear about this you can easily code
  • 00:28:21
    start coding now if you have like all
  • 00:28:24
    the details like which part I should
  • 00:28:25
    pass to which so now I have clear
  • 00:28:28
    understanding of this now I can go and
  • 00:28:30
    start coding
  • 00:28:31
    like which prop which data to pass as
  • 00:28:34
    props to which one
  • 00:28:37
    so what you'll do we will we already
  • 00:28:39
    have um some API uh the older API which
  • 00:28:44
    is using uh
  • 00:28:48
    this restaurant detail is the starting
  • 00:28:50
    point of my code
  • 00:28:52
    we are we have used some custom hook to
  • 00:28:55
    fetch the API information API response
  • 00:28:59
    so by passing this restaurant ID if I
  • 00:29:02
    pass this restaurant ID I'll be getting
  • 00:29:04
    the data for that particular instrument
  • 00:29:06
    right like um
  • 00:29:09
    all right so this API
  • 00:29:14
    um let me open that API and uh with that
  • 00:29:16
    particular data we were showing here now
  • 00:29:18
    what I have modified is like I have gone
  • 00:29:21
    gone to the user use restaurant in that
  • 00:29:25
    after getting the data till here like in
  • 00:29:27
    the use effect we are just calling
  • 00:29:29
    making the API call and getting the
  • 00:29:31
    response your interest data
  • 00:29:33
    after that what I'm doing is I'm going
  • 00:29:36
    what you can do is you can just pass
  • 00:29:37
    that you know you can set that
  • 00:29:39
    particular data as your state and pass
  • 00:29:43
    it to that component
  • 00:29:44
    and um do some modifications in that
  • 00:29:48
    particular component itself so that is
  • 00:29:51
    one way of doing all the other ways you
  • 00:29:53
    just make all the modifications not all
  • 00:29:55
    the modifications a part of partial
  • 00:29:58
    modifications here and send in groups
  • 00:30:01
    which which component needs which
  • 00:30:04
    information so what I did is I did some
  • 00:30:06
    modifications to the rest data RS data
  • 00:30:09
    instead of setting it directly to my
  • 00:30:10
    restaurant uh State I am just doing some
  • 00:30:13
    modification and setting in my
  • 00:30:15
    restaurant State I am returning this
  • 00:30:16
    restraint
  • 00:30:18
    so that uh the State restaurant so that
  • 00:30:20
    this particular whenever this Hook is
  • 00:30:23
    called this used restaurant Hook is
  • 00:30:25
    called my state variable
  • 00:30:27
    um a restaurant is sent right like that
  • 00:30:30
    I have said here with modified data what
  • 00:30:33
    modifications am I doing I am trying to
  • 00:30:36
    separate out um
  • 00:30:38
    and the the
  • 00:30:39
    response data which I am getting as I
  • 00:30:42
    showed like uh each will need some only
  • 00:30:46
    part of the response so I'm just trying
  • 00:30:49
    to separate it out so uh restaurant
  • 00:30:52
    information part this particular part I
  • 00:30:55
    am just sending it in this object info
  • 00:30:57
    and all the menu related items I'm
  • 00:30:59
    passing in in menu so that's all I'm
  • 00:31:02
    doing for grouping it I am doing some
  • 00:31:05
    modifications let me explain that in the
  • 00:31:07
    similar way if you want to do that menu
  • 00:31:09
    Carousel you can have one more object
  • 00:31:11
    called Carousel and do what part of data
  • 00:31:14
    you want you can pass in a similar way
  • 00:31:16
    if you want to pass a grid widget you
  • 00:31:18
    can pass it like widget component here
  • 00:31:20
    and do all that
  • 00:31:22
    so that way you can do the modifications
  • 00:31:24
    to data so what modifications have I
  • 00:31:27
    done to the data is info info to get
  • 00:31:30
    this only this part of data we know
  • 00:31:33
    already that my restaurant information
  • 00:31:35
    is there in the cards of zero and card
  • 00:31:38
    card info this is where my restaurant
  • 00:31:40
    information is there right right this is
  • 00:31:43
    like um
  • 00:31:45
    or any type of data this is the path of
  • 00:31:47
    the information of the restraint so I'm
  • 00:31:50
    just passing this to my info so that uh
  • 00:31:54
    when I use it in my information
  • 00:31:57
    restaurant info component it will be
  • 00:31:59
    easy for me instead of doing this every
  • 00:32:02
    time in my component I am passing Malay
  • 00:32:05
    info object so there you can just pass
  • 00:32:07
    info dot name input or something oh it
  • 00:32:10
    is easy to do so that's why I'm grouping
  • 00:32:12
    it here itself so if you see cards of
  • 00:32:15
    zeros having
  • 00:32:21
    so this will have the whole this object
  • 00:32:24
    is what I'm passing to my restaurant
  • 00:32:25
    info component
  • 00:32:28
    um this for now I'm just passing it to
  • 00:32:31
    my restaurant details component inside
  • 00:32:33
    which I'll be passing it to the
  • 00:32:34
    restaurant info we will see that later
  • 00:32:36
    so for now I have kept here and the
  • 00:32:39
    similar way for the menu what I'm doing
  • 00:32:41
    is
  • 00:32:42
    um I am just going till the regular Dot
  • 00:32:46
    cards so I I know that my menu item is
  • 00:32:50
    going to be present in the cards of two
  • 00:32:52
    I have checked in almost all the data
  • 00:32:54
    that I have in Car 2 only I'm getting
  • 00:32:57
    all this because card
  • 00:32:59
    card one is always having this widget
  • 00:33:02
    that widget part even if you have that
  • 00:33:05
    widget or not it is always getting this
  • 00:33:07
    I have checked with the some restaurants
  • 00:33:09
    like um I think Burger King it didn't
  • 00:33:12
    have that widget to display it but the
  • 00:33:15
    data was coming card of one was having
  • 00:33:18
    some empty object for that widget so
  • 00:33:20
    what I understood was cards of two is
  • 00:33:23
    only going to have my menu items so
  • 00:33:25
    that's why I have hard-coded not hard
  • 00:33:27
    coded I have gone to the path of cards
  • 00:33:31
    of two and then it's group data
  • 00:33:34
    group data and card group map regular
  • 00:33:38
    till cards till cards I have stored it
  • 00:33:41
    in my menu items list because here only
  • 00:33:44
    my looping my mapping is going to start
  • 00:33:48
    so inside the cpucc what was what was
  • 00:33:51
    happening was like here is where the uh
  • 00:33:54
    this this thing started like uh veg menu
  • 00:33:58
    topics all this started right like uh
  • 00:34:02
    zero uh zeroth element was having my veg
  • 00:34:05
    money filter second element was having
  • 00:34:07
    menu Carousel and the third element was
  • 00:34:09
    having a mix of third uh following that
  • 00:34:13
    there were a mix of um item category and
  • 00:34:16
    nested item category license and address
  • 00:34:19
    right like all this were coming under
  • 00:34:21
    this particular cards so I don't want uh
  • 00:34:25
    in my use case I didn't want to have
  • 00:34:28
    carousels wedge filter license and
  • 00:34:31
    address so what I did was
  • 00:34:33
    I wanted only item category and nested
  • 00:34:35
    item category so I'm just going and
  • 00:34:38
    checking and filtering out only the item
  • 00:34:41
    if it is item category and nested item
  • 00:34:43
    category I am trying to put that in my
  • 00:34:45
    menu and just send it to that object
  • 00:34:47
    that's that's the logic I have done here
  • 00:34:50
    so to my uh modify data in the menu
  • 00:34:53
    object I am having only the details of
  • 00:34:56
    this particular thing which I need I am
  • 00:34:59
    not concerned about anything else so it
  • 00:35:01
    is making easy for my component to have
  • 00:35:05
    that data that's the thing which I have
  • 00:35:06
    done
  • 00:35:08
    so now if you go and see my restaurant
  • 00:35:10
    uh details the this restaurant has the
  • 00:35:13
    modified data which I have sent it has a
  • 00:35:16
    menu and the info right like Reston dot
  • 00:35:19
    menu restaurant.info so initially I'm
  • 00:35:21
    showing some Shimmer so once I have got
  • 00:35:24
    the data I'm I'm calling two components
  • 00:35:27
    like one is this particular thing is
  • 00:35:31
    nothing but I'll go to my UI this
  • 00:35:33
    particular thing is restaurant info to
  • 00:35:36
    this blue color and this is my
  • 00:35:38
    restaurant menu list this whole thing is
  • 00:35:40
    my restaurant menu list so for written
  • 00:35:42
    uh info I don't want to pass the whole
  • 00:35:44
    object
  • 00:35:45
    um it's enough to pass only
  • 00:35:47
    restraint.info here it's enough to pass
  • 00:35:50
    District dot menu this way I can send
  • 00:35:53
    only data that I need as props to that
  • 00:35:56
    component
  • 00:35:57
    so after this it's simple so restaurant
  • 00:36:00
    info if you go and see restraint info
  • 00:36:02
    component this will inside this I'm just
  • 00:36:06
    getting that particular
  • 00:36:07
    object here and I'm showing all that
  • 00:36:11
    cloudner image name quizzings and
  • 00:36:14
    everything this I didn't do anything
  • 00:36:15
    this was the previous
  • 00:36:17
    component that was I was having already
  • 00:36:20
    so if you see now you can see the
  • 00:36:23
    changes I made is only limited to only
  • 00:36:27
    limited to this particular round
  • 00:36:30
    restaurant details right like the way I
  • 00:36:32
    pass this component information so this
  • 00:36:36
    way the small change is made to your API
  • 00:36:38
    you don't have to worry too much so next
  • 00:36:41
    uh restraint menu list for instant menu
  • 00:36:43
    list I am passing the menu menu object
  • 00:36:46
    that I have created list in menu list
  • 00:36:48
    what I'm doing is here is the
  • 00:36:49
    interesting thing that's happening
  • 00:36:51
    what I am doing is I am
  • 00:36:54
    how will I differentiate whether it's
  • 00:36:56
    nested here uh this component how will I
  • 00:36:59
    differentiate whether it is
  • 00:37:01
    nested item or item category so I I what
  • 00:37:05
    I understood from the data structure is
  • 00:37:07
    if it's
  • 00:37:11
    now if it's item category I'm
  • 00:37:14
    immediately having the title and um
  • 00:37:18
    uh
  • 00:37:19
    title items are array so this is this
  • 00:37:24
    data structure if it's nested then
  • 00:37:27
    I think this is nice to know this is
  • 00:37:29
    also this thing
  • 00:37:31
    uh this is also the same thing is there
  • 00:37:34
    any Nestor third one was Nestor right
  • 00:37:36
    like
  • 00:37:38
    um
  • 00:37:39
    you know third one is index of two sorry
  • 00:37:43
    okay I think this is different uh
  • 00:37:49
    let me check
  • 00:37:53
    um I'm just trying to show the data
  • 00:37:59
    this is item category
  • 00:38:02
    this is the CPI
  • 00:38:05
    let me try to open it again
  • 00:38:11
    uh which component was having it these
  • 00:38:14
    are hard right
  • 00:38:15
    the Pizza Hut
  • 00:38:20
    um
  • 00:38:24
    and just minimize this
  • 00:38:29
    so this uh zero one two three
  • 00:38:33
    was having it
  • 00:38:42
    okay here it is so
  • 00:38:45
    for example let me take
  • 00:38:50
    here it is so here there is categories
  • 00:38:53
    so the difference I was explaining uh
  • 00:38:55
    difference between in category item
  • 00:38:58
    category and nested item category nested
  • 00:39:00
    item category there was something called
  • 00:39:02
    categories array inside which
  • 00:39:05
    there were multiple categories item
  • 00:39:08
    categories which had a similar thing
  • 00:39:11
    which was similar to my item category
  • 00:39:13
    right
  • 00:39:16
    right you understood right like there
  • 00:39:18
    are categories so each category is
  • 00:39:21
    nothing but a item category
  • 00:39:23
    so let me go here so what I understood
  • 00:39:26
    is in uh so categories is the extra
  • 00:39:30
    array that is present in nested item
  • 00:39:32
    category so to differentiate I'm using
  • 00:39:34
    this categories as the
  • 00:39:36
    um Point uh to the print sheet so what I
  • 00:39:39
    did is uh the menu object which I get
  • 00:39:47
    this cards
  • 00:39:50
    that is what I'm passing it as menu
  • 00:39:51
    which has the filtered value of item
  • 00:39:55
    categories and nested item categories
  • 00:39:57
    are the only cards that I'm sending so
  • 00:40:00
    it has either item categories or
  • 00:40:02
    category nested item categories so to
  • 00:40:05
    differentiate if
  • 00:40:07
    if my uh one uh one of the object is
  • 00:40:11
    having the uh categories as categories
  • 00:40:15
    then it is nested uh item category so if
  • 00:40:19
    it is having category then it is nested
  • 00:40:21
    item category
  • 00:40:23
    and I am passing
  • 00:40:25
    uh that whole that particular
  • 00:40:29
    this particular object this particular
  • 00:40:31
    object is props to that
  • 00:40:34
    component if it's not there if
  • 00:40:37
    categories is not there then I can
  • 00:40:39
    assume that it is item category and I'll
  • 00:40:42
    just pass this as props to the item
  • 00:40:43
    categories component so
  • 00:40:46
    either way I am passing that particular
  • 00:40:50
    this particular object has
  • 00:40:54
    um
  • 00:40:55
    props so that that's the moment the part
  • 00:41:00
    of code I'm writing here and if it's
  • 00:41:03
    item category what I am doing is I'm
  • 00:41:05
    just looping and showing
  • 00:41:09
    so your major concern should be first uh
  • 00:41:12
    uh don't seeing this accordion you might
  • 00:41:15
    feel it is complicated so first don't
  • 00:41:18
    implement the accordion just Implement
  • 00:41:20
    uh showing uh the Inner Elements
  • 00:41:22
    directly once you have completed that
  • 00:41:25
    particular feature then go to the
  • 00:41:26
    accordion feature so all this accordion
  • 00:41:28
    feature we can do later so first this
  • 00:41:31
    part of code you can Implement so
  • 00:41:33
    whatever uh particular item that this
  • 00:41:35
    item is what you are getting it here
  • 00:41:37
    these six components that you should
  • 00:41:39
    Loop here for each item card
  • 00:41:43
    I should Loop and show
  • 00:41:45
    each dish is nothing but the menu item
  • 00:41:49
    that I am going to menu item component
  • 00:41:51
    that I'm calling
  • 00:41:53
    so that I'll be passing what should I
  • 00:41:56
    pass so cards
  • 00:41:58
    cards has info and info is what uh the
  • 00:42:01
    image name and all that particular items
  • 00:42:03
    uh thing uh like this information is
  • 00:42:07
    there that impose what my item menu item
  • 00:42:11
    should be passed as props
  • 00:42:14
    so for menu items I'm passing info car
  • 00:42:18
    dot info
  • 00:42:20
    discard.info I am passing it here to the
  • 00:42:23
    menu items component this is the same
  • 00:42:25
    item that uh this is the same component
  • 00:42:27
    which I have already written for the old
  • 00:42:29
    API I just modified this image ID
  • 00:42:32
    cloudner image ID to image ID this is
  • 00:42:35
    the same component which I have written
  • 00:42:37
    already
  • 00:42:39
    so here I didn't make any change just I
  • 00:42:42
    have included created two more
  • 00:42:44
    components item category and nested item
  • 00:42:46
    category so item category I just
  • 00:42:48
    explained like what I did I mapped and
  • 00:42:51
    showed that component for the nested
  • 00:42:52
    item category we already know
  • 00:42:55
    category looks similar to item category
  • 00:42:59
    so which is nothing but I have to Loop
  • 00:43:03
    categories
  • 00:43:05
    array and for each categories uh array
  • 00:43:09
    element I have to call the item category
  • 00:43:12
    again so if you see the code National
  • 00:43:14
    category items dot categories is the
  • 00:43:17
    array I am just looping that mapping
  • 00:43:19
    that particular
  • 00:43:21
    item and calling my same item category
  • 00:43:25
    component that I've already created
  • 00:43:26
    which is already doing all that I don't
  • 00:43:29
    have to repeat myself to write that
  • 00:43:31
    particular code here I'm just calling
  • 00:43:33
    the component and passing that
  • 00:43:34
    particular object as props to that
  • 00:43:37
    particular component it will do all that
  • 00:43:39
    manipulations here
  • 00:43:40
    so now
  • 00:43:42
    I now if you see my UI to show
  • 00:43:45
    everything without accordion
  • 00:43:48
    so this basic thing if it is done then
  • 00:43:51
    I'll go and do this accordion
  • 00:43:53
    accordingly is very simple so on click
  • 00:43:55
    of this button it should show the items
  • 00:43:57
    on click off if I click that button
  • 00:44:00
    again if the arrow symbol should change
  • 00:44:02
    and it should be hidden that's what so
  • 00:44:05
    for that I'll be having
  • 00:44:07
    a state variable called is visible
  • 00:44:09
    initially it will be true and I'll be
  • 00:44:12
    using a function to toggle it
  • 00:44:15
    um
  • 00:44:16
    then there will be a on click function
  • 00:44:18
    on either this button also I can click
  • 00:44:21
    or on title also I can click or on the
  • 00:44:24
    arrow button also I can click if I click
  • 00:44:28
    both
  • 00:44:29
    also should work so that's why I have
  • 00:44:31
    return on click function on the title
  • 00:44:34
    also on the button also
  • 00:44:37
    so if it is true if the state is true
  • 00:44:40
    then I am showing up arrow and don't
  • 00:44:43
    click of that button it should change
  • 00:44:44
    and show the down arrow so if it's true
  • 00:44:47
    it should show up Arrow if it's false it
  • 00:44:49
    should show down arrow so if it's true
  • 00:44:51
    then my menu item should be visible if
  • 00:44:55
    it's false then it should be closed
  • 00:44:57
    that's all the logic is so it's as
  • 00:45:00
    simple as that
  • 00:45:01
    so this is the basic thing which I have
  • 00:45:03
    implemented so the main part is
  • 00:45:05
    understanding the data and the UI that's
  • 00:45:07
    all thank you if you have any doubts or
  • 00:45:09
    I know the code can be improved a lot so
  • 00:45:12
    if you have any routes you can ping me
  • 00:45:14
    thank you
Etiquetas
  • API chanjman
  • meni restoran
  • UI entegasyon
  • kategori meni
  • kategori nèst
  • kòd modulè
  • adev lopman app
  • backend entegasyon
  • done strikti
  • dévélòpman front-end