# Explore UI Document
### Use Case Diagram


### Layout

#### Explore


1. Search bar
2. List
---


1. Popular Event Banner
2. Item Container (Parent)
3. Header Item
4. Item List (Child)
---

#### Popular Event Detail

1. Event Header
2. Event Content
---
#### Video Usage List


1. Header type (Hashtag,Music)
2. Video List
3. Floating Button
4. Video Item

### Data
#### reducer

type LAYOUT_TYPE = 'music'|'banner'|'hashtag'|'user'|'class'|'category'
type FLEX_DIRECTION_TYPE = 'row' | 'column'
type MusicItemType = {

};
type UserItemType = {

};
type VideoItemType = {

};
type CategoryItemType = {

};
type HashtagItemType = {

};

interface ListResponse<T> {
  data: T[];
  pagination?: {
    page: number;
    pageCount: number;
    total: number;
  };
}

interface SectionItem<T> {
  type: LAYOUT_TYPE;
  title: string;
  itemChild: ListResponse<T>;
}

export interface SliceState {
  sections: {
    [key in string]: SectionItem<
      MusicItemType | UserItemType | VideoItemType | CategoryItemType
    >;
  };
}

initData = {

    sections: {};
    
}


 reducer = {
    updateSectionData(){
    //TODO: get ID Section
        let SectionId = action.payload.type + .... 
        state.sections[SectionId] = action.payload
    }

//actions

 getDataAction = createActions
.....
 
 {updateSectionData} = Slide.actions
 
 
 //selector
 
export const selectData = (
state:...,
type:LAYOUT_TYPE,
keyWord:...//not clear
)=>{
    let list: SectionItem<
      MusicItemType | UserItemType | VideoItemType | CategoryItemType
    > = {
    data: [],
    ....
    }
}
 

---

#### API

 

    //Explore API
    function *getPopularUsersData(){}

    function *getTrendingHashtagData(){}

    function *getPopularMusicData(){}
    
    function *getPopularBannerData(){}
    

#### saga

    function *handlerGetMusicData(action){
     const data = []
   foreach(data){
    
        switch(action.payload.type){
            case 'music' :
            const respone = call(getMusicData,action.payload)
            if(respone){
            data.push(respone)
            }else{
            
            }
              
              
              break;
           ..........
            }
    }
    updateData(data)
    
}
export default function* () {
  yield debounce(500,getDataAction.type, handlerGetData);
}
    
    

<br/>

### Component Design
---


---