some changes

src/App.sass

@@ -1,13 +1,16 @@
+
+$listGray: #222
+
 .App 
-    display: flex
-    align-items: center
+  display: flex
+  justify-content: space-around;
 
 .list
   margin: 20px 20px 
-  height: 500px
+  height: 490px
   width: 300px
   overflow: auto
-  background-color: #222
+  background-color: $listGray
   float: left
   color: #ddd
   list-style-type: none
@@ -19,7 +22,48 @@
 
 .item
   margin: 5px
+  display: flex
+  align-items: center
+  padding: 3px
+  &:hover
+    background-color: lighten($listGray, 10)
+    border-radius: 5px
+
+.item-name
+  margin-left: 15px
+
+.item-details
+  height: 200px
+  width: 400px
+  margin-top: 20px
+  background: $listGray
+  color: #ddd
+
+  h1  
+    text-align: center
+
+.sorting > textarea
+  color: #777
+  width: 30%
+
+.filter
+  margin: 20px 20px
+
+.text-filter  
+  width: 70%
+  input
+    color: #fff
+    opacity: 0.6
+
+//   // span    
+//   //   margin-left: 20px
+
+// .itemName, .itemFlags
+//   // display: inline-block
+//   // margin-top: 10px
+
+//   // display: flex
+//   // justify-content: space-around;
 
-.left
-  margin-right: auto
-
+// .itemName
+//   padding-left: 20px

src/App.tsx

@@ -1,15 +1,39 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.sass';
 import List from './components/List';
+import { IListItem, ItemFlagsEnum } from './constants';
+import ItemDetails from './components/ItemDetails';
+import { Items, itemList } from './Items.class';
+import Filter from './components/Filter';
 
 function App() {
+  const [state, setState] = useState({
+    selectedItem: {
+      name: '', flags: new Array<ItemFlagsEnum>()
+    },
+    itemList: itemList,
+  })
+  const handeItemClick = (item: IListItem) => {
+    setState({
+      ...state,
+      selectedItem: item
+    });
+  }
+
+  const onChangeFilter = () => {
+    setState({ ...state, itemList: state.itemList }); 
+  }
+
   return (
     <div className="App">
       <div className="left">
-        <List></List>
+        {/* <Filter items={state.itemList} sortEnable={true} onChangeFilter={onChangeFilter} /> */}
+        <List items={state.itemList} onItemClick={handeItemClick}></List>
       </div>
+      <ItemDetails selectedItem={state.selectedItem} />
       <div className="right">
-        <List></List>
+        {/* <Filter items={state.itemList} sortEnable={true} onChangeFilter={onChangeFilter} /> */}
+        <List items={state.itemList} onItemClick={handeItemClick}></List>
       </div>
     </div>
   );

src/Items.class.ts

@@ -3,6 +3,7 @@ import { IListItem, ItemFlagsEnum } from "./constants";
 export class Items {
     list: IListItem[];
     constructor() {
+        console.log('>>>>>>>>>>', 'ItemsConstructor');
         this.list = this.createList(100);
     }
 
@@ -12,13 +13,13 @@ export class Items {
         for (let i = 1; i <= num; i++) {
             list.push({
                 name: `Item${i}`,
-                flags: this.generateFlags()
+                flags: Items.generateFlags()
             });
         }
         return list;
     }
 
-    generateFlags = (): ItemFlagsEnum[] => {
+    static generateFlags = (): ItemFlagsEnum[] => {
         let flags = new Array<ItemFlagsEnum>();
         Object.keys(ItemFlagsEnum).forEach((flag) => {
             if (Math.random() <= 0.5) {
@@ -27,4 +28,6 @@ export class Items {
         });
         return flags;
     }
-}
+}
+
+export const itemList = new Items().list;

src/components/Filter.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { IListItem } from '../constants';
+import { Checkbox, TextField } from '@material-ui/core/';
+
+export default function Filter(props: IFilterProps) {
+    const [state, setState] = React.useState({
+        items: props.items,
+        sortChecked: true,
+        sortEnable: props.sortEnable,
+        filterEnable: props.filterEnable
+    });
+
+    const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+        const isChecked = event.target.checked;   
+        console.log('>>>>>isChecked>>>>>', isChecked);     
+        isChecked ? props.items.sort() : props.items.reverse();
+        setState({ 
+            ...state, 
+            [name]: isChecked
+        });
+        props.onChangeFilter();
+    };
+
+    return (
+        <div className="filter">
+            <TextField className="text-filter" placeholder="Text Filter" />
+            <span className="sorting">
+                sort
+                    <Checkbox checked={state.sortChecked}
+                    onChange={handleChange('sortChecked')}
+                    value="sortChecked" />
+            </span>
+        </div>
+    )
+}
+
+export interface IFilterProps {
+    items: IListItem[],
+    sortEnable?: boolean,
+    filterEnable?: boolean,
+    onChangeFilter: Function
+}
+
+export interface IFilterState {
+    sortChecked: boolean
+}
+
+export enum filterTypes {
+}

src/components/FlagIcon.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {
     Brightness5,
     FlashOn,
@@ -7,38 +7,19 @@ import {
 } from '@material-ui/icons';
 import { ItemFlagsEnum } from '../constants';
 
-export default class FlagIcon extends Component<IFlagIconProps, IFlagIconState> {
-    constructor(props: IFlagIconProps) {
-        super(props);
-        this.state = {
-            icon: props.icon
-        };
-    }
-    render() {
-        let icon;
-        switch (this.state.icon) {
-            case 'flower':
-                icon = <LocalFlorist/>;
-                break;
-            case 'heart':
-                icon = <Favorite/>;
-                break;
-            case 'sun':
-                icon = <Brightness5/>;
-                break;
-            case 'flash':
-                icon = <FlashOn/>;
-                break;
-        }
-        return icon;
-    }
-}
-
-export interface IFlagIconState {
-    icon: string
+export default function FlagIcon(props: IFlagIconProps) {
+    const ComputedComponent = iconTypes[props.icon];
+    return <ComputedComponent fontSize="small" />;
 }
 
 export interface IFlagIconProps {
     icon: ItemFlagsEnum
 }
 
+const iconTypes = {
+    [ItemFlagsEnum.flower]: LocalFlorist,
+    [ItemFlagsEnum.heart]: Favorite,
+    [ItemFlagsEnum.sun]: Brightness5,
+    [ItemFlagsEnum.flash]: FlashOn
+}
+

src/components/ItemDetails.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { IListItem } from '../constants'
+import FlagIcon from './FlagIcon'
+import { Grid } from '@material-ui/core'
+
+export default function ItemDetails(props: IitemDetailsProps) {
+    return (
+        <div className="item-details">
+
+            <h1>INFO</h1>
+            <Grid container spacing={3}>
+                <Grid className="itemName" item xs={6}>
+                    <div>NAME: </div>
+                    <br />
+                    <div>FLAGS: </div>
+                </Grid>
+                <Grid item xs={6}>
+                    <div> {props.selectedItem && props.selectedItem.name}</div>
+                    <div className="itemFlags">
+                        {props.selectedItem && props.selectedItem.flags.map((flag) => (
+                            <FlagIcon icon={flag} />
+                        ))}
+                    </div>
+                </Grid>
+            </Grid>
+        </div>
+    )
+}
+export interface IitemDetailsProps {
+    selectedItem?: IListItem
+}

src/components/List.tsx

@@ -1,23 +1,54 @@
-import React, { Component } from 'react'
+import React, { Component } from 'react';
 import ListItem from './ListItem';
-import { Items } from '../Items.class';
 import { IListItem } from '../constants';
+import { TextField, Checkbox } from '@material-ui/core';
+import { Items } from '../Items.class';
 
-export class List extends Component {
+export class List extends Component<IListProps, IListState> {
     constructor(props: IListProps) {
         super(props);
         this.state = {
-
-        };
+            items: [
+                { name: "Item100", flags: Items.generateFlags() },
+                { name: "Item99", flags: Items.generateFlags() },
+                { name: "Item98", flags: Items.generateFlags() },
+                { name: "Item97", flags: Items.generateFlags() }],
+            sortChecked: true
+        }
     }
-
-    render() {        
-        const items = new Items();
+
+    handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+        const isChecked = event.target.checked;
+        let arr = [...this.state.items]
+        this.setState((prev: IListState)=>{
+            console.log('>>>>>>>>>>', prev);
+            return {
+                ...this.state,
+                sortChecked: isChecked,
+                items: prev.sortChecked ? arr.sort() : arr.reverse()
+            }
+        });
+    };
+
+    render() {
+        console.log('>>>>>>this.state.items[0]>>>>', this.state.items[0]);
+        const { sortChecked, items} = this.state;
         return (
-            <div className="list">                
-                {
-                    items.list.map((item: IListItem) => <ListItem item={item}/>)
-                }                
+            <div>
+                <div className="filter">
+                    <TextField className="text-filter" placeholder="Text Filter" />
+                    <span className="sorting">
+                        sort
+                    <Checkbox checked={sortChecked}
+                            onChange={this.handleChange('sortChecked')}
+                            value="sortChecked" />
+                    </span>
+                </div>
+                <div className="list">
+                    {
+                        items.map((item: IListItem, i: number) => <ListItem key={i} item={item} onItemClick={this.props.onItemClick} />)
+                    }
+                </div>
             </div>
         )
     }
@@ -26,5 +57,11 @@ export class List extends Component {
 export default List
 
 export interface IListProps {
-    items: string[]
+    onItemClick: Function,
+    items: IListItem[]
 }
+
+export interface IListState {
+    items: IListItem[],
+    sortChecked: boolean
+}