package Ġcomponents . footer Ċ Ċ import ĠState Ċ import Ġactions . filters . Change Color Filter Ċ import Ġactions . filters . Change Status Filter Ċ import Ġactions . todos . Clear Completed Ċ import Ġactions . todos . Complete All Ċ import Ġentities . Visibility Filter Ċ import Ġenums . Color Ċ import Ġenums . Completed Status Ċ import Ġkotlin ext . js . js o Ċ import Ġreact . FC Ċ import Ġreact . Props Ċ import Ġreact . dom . html . React HTML . button Ċ import Ġreact . dom . html . React HTML . div Ċ import Ġreact . dom . html . React HTML . footer Ċ import Ġreact . dom . html . React HTML . form Ċ import Ġreact . dom . html . React HTML . h 5 Ċ import Ġreact . dom . html . React HTML . input Ċ import Ġreact . dom . html . React HTML . label Ċ import Ġreact . dom . html . React HTML . li Ċ import Ġreact . dom . html . React HTML . span Ċ import Ġreact . dom . html . React HTML . strong Ċ import Ġreact . dom . html . React HTML . ul Ċ import Ġreact . key Ċ import Ġreact . redux . use Dispatch Ċ import Ġreact . redux . use Selector Ċ import Ġredux . R Action Ċ import Ġredux . Wrapper Action Ċ Ċ external Ġinterface ĠRem aining Todos Props Ġ: ĠProps Ġ{ ĊĠĠĠ Ġvar Ġcount : ĠInt Ċ } Ċ Ċ private Ġval Ġremaining Todos Ġ= ĠFC < Remaining Todos Props > Ġ{ Ġprops Ġ-> ĊĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠ ĠclassName Ġ= Ġ" todo - count " ĊĠĠĠĠĠĠĠ Ġh 5 Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Remaining ĠTod os " ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġstrong Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ+" ${ props . count }" ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ+" Ġitem ${ if Ġ( props . count Ġ> Ġ 1 ) Ġ" s " Ġelse Ġ"" } Ġleft " ĊĠĠĠ Ġ} Ċ } Ċ Ċ external Ġinterface ĠStatus Filter Props Ġ: ĠProps Ġ{ ĊĠĠĠ Ġvar Ġstatus : ĠCompleted Status ĊĠĠĠ Ġvar ĠonChange : Ġ( Completed Status ) Ġ-> ĠUnit Ċ } Ċ Ċ private Ġval Ġstatus Filter Ġ= ĠFC < Status Filter Props > Ġ{ Ġprops Ġ-> ĊĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠ ĠclassName Ġ= Ġ" filters Ġstatus Filters " ĊĠĠĠĠĠĠĠ Ġh 5 Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Filter Ġby ĠStatus " ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġul Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġrendered Filters Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstatus Ġ= Ġprops . status ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Ġ= Ġprops . onChange ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ private Ġval Ġrendered Filters Ġ= ĠFC < Status Filter Props > Ġ{ Ġprops Ġ-> ĊĠĠĠ ĠCompleted Status . values (). forEach Ġ{ Ġcompleted Status Ġ-> ĊĠĠĠĠĠĠĠ Ġli Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġcompleted Status . name ĊĠĠĠĠĠĠĠĠĠĠĠ Ġbutton Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠclassName Ġ= Ġif Ġ( completed Status Ġ== Ġprops . status ) Ġ" selected " Ġelse Ġ"" ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonClick Ġ= Ġ{ Ġprops . onChange ( completed Status ) Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ completed Status . name . lowercase (). replace First Char Ġ{ Ġit . uppercase () Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ external Ġinterface ĠColor Filters Props Ġ: ĠProps Ġ{ ĊĠĠĠ Ġvar Ġcolors : ĠArray < Color > ĊĠĠĠ Ġvar ĠonChange : Ġ( Color , ĠString ) Ġ-> ĠUnit Ċ } Ċ Ċ private Ġval Ġcolor Filters Ġ= ĠFC < Color Filters Props > Ġ{ Ġprops Ġ-> ĊĊĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠ ĠclassName Ġ= Ġ" filters Ġcolor Filters " ĊĠĠĠĠĠĠĠ Ġh 5 Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Filter Ġby ĠColor " ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġform Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ ĠclassName Ġ= Ġ" color Selection " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġrendered Colors Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcolors Ġ= Ġprops . colors ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Ġ= Ġprops . onChange ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ private Ġval Ġrendered Colors Ġ= ĠFC < Color Filters Props > Ġ{ Ġprops Ġ-> ĊĠĠĠ ĠColor . values (). forEach Ġ{ Ġcolor Ġ-> ĊĠĠĠĠĠĠĠ Ġval Ġchecked Color Ġ= Ġprops . colors . contains ( color ) ĊĠĠĠĠĠĠĠ Ġlabel Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġcolor . name . lowercase () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġinput Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtype Ġ= Ġreact . dom . html . InputType . checkbox ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġname Ġ= Ġcolor . name . lowercase () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġchecked Ġ= Ġchecked Color ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Ġ= Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġval Ġchange Type Ġ= Ġif Ġ( checked Color ) Ġ" removed " Ġelse Ġ" added " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġprops . onChange ( color , Ġchange Type ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġspan Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠclassName Ġ= Ġ" color - block " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyle Ġ= Ġj so Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= Ġcs stype . Color ( color . name ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ+ color . name . lowercase (). replace First Char Ġ{ Ġit . uppercase () Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ val Ġfooter Ġ= ĠFC < Props > Ġ{ ĊĊĠĠĠ Ġval Ġdispatch Ġ= Ġuse Dispatch < R Action , ĠWrapper Action >() ĊĊĠĠĠ Ġval Ġtodos Remaining Ġ= ĠuseSelector < State , ĠInt > Ġ{ Ġstate Ġ-> Ġstate . todos . filter Ġ{ Ġtodo Ġ-> Ġ! todo . completed Ġ}. size Ġ} ĊĠĠĠ Ġval Ġfilter Ġ= ĠuseSelector < State , ĠVisibility Filter > Ġ{ Ġstate Ġ-> Ġstate . visibility Filter Ġ} ĊĠĠĠ Ġval Ġfilter Colors Ġ= Ġfilter . colors ĊĠĠĠ Ġval Ġfilter Status Ġ= Ġfilter . status ĊĊĠĠĠ Ġval Ġon Color Change : Ġ( Color , ĠString ) Ġ-> ĠUnit Ġ= Ġ{ Ġcolor , Ġchange Type Ġ-> ĊĠĠĠĠĠĠĠ Ġdispatch ( Change Color Filter ( color . name , Ġchange Type )) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġval Ġon Status Change : Ġ( Completed Status ) Ġ-> ĠUnit Ġ= Ġ{ Ġcompleted Status Ġ-> ĊĠĠĠĠĠĠĠ Ġdispatch ( Change Status Filter ( completed Status . name )) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġfooter Ġ{ ĊĠĠĠĠĠĠĠ ĠclassName Ġ= Ġ" footer " ĊĠĠĠĠĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ ĠclassName Ġ= Ġ" actions " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġh 5 Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Actions " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġbutton Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠclassName Ġ= Ġ" button " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonClick Ġ= Ġ{ Ġdispatch ( Complete All ()) Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Mark ĠAll ĠCompleted " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġbutton Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠclassName Ġ= Ġ" button " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonClick Ġ= Ġ{ Ġdispatch ( Clear Completed ()) Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Clear ĠCompleted " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġremaining Todos Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcount Ġ= Ġtodos Remaining ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġstatus Filter Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġstatus Ġ= Ġfilter Status ĊĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Ġ= Ġon Status Change ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġcolor Filters Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcolors Ġ= Ġfilter Colors ĊĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Ġ= Ġon Color Change ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ