package Ġcomponents . todos Ċ Ċ import ĠState Ċ import Ġactions . todos . Delete Todo Ċ import Ġactions . todos . Select Color Ċ import Ġactions . todos . Toggle Todo Ċ import Ġcomponents . modules . times Solid Ċ import Ġcs stype . Color Ċ import Ġentities . Todo Ċ import Ġkotlin ext . js . js o Ċ import Ġreact . FC Ċ import Ġreact . Props Ċ import Ġreact . dom . html . InputType Ċ import Ġreact . dom . html . React HTML . button Ċ import Ġreact . dom . html . React HTML . div Ċ import Ġreact . dom . html . React HTML . input Ċ import Ġreact . dom . html . React HTML . li Ċ import Ġreact . dom . html . React HTML . option Ċ import Ġreact . dom . html . React HTML . select Ċ import Ġreact . key Ċ import Ġreact . redux . use Dispatch Ċ import Ġreact . redux . use Selector Ċ import Ġredux . R Action Ċ import Ġredux . Wrapper Action Ċ Ċ external Ġinterface ĠTodo ListItem Props Ġ: ĠProps Ġ{ ĊĠĠĠ Ġvar Ġtodo Id : ĠInt Ċ } Ċ Ċ val Ġtodo ListItem Ġ= ĠFC < Todo ListItem Props > Ġ{ Ġprops Ġ-> ĊĊĠĠĠ Ġval Ġtodo Ġ= ĠuseSelector < State , ĠTodo > Ġ{ Ġstate Ġ-> Ġstate . todos . first Ġ{ Ġit . id Ġ== Ġprops . todo Id Ġ} Ġ} ĊĠĠĠ Ġval Ġdispatch Ġ= Ġuse Dispatch < R Action , ĠWrapper Action >() ĊĊĠĠĠ Ġli Ġ{ ĊĠĠĠĠĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ ĠclassName Ġ= Ġ" view " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠclassName Ġ= Ġ" segment Ġlabel " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġinput Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠclassName Ġ= Ġ" toggle " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtype Ġ= ĠInput Type . checkbox ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġchecked Ġ= Ġtodo . completed ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Ġ= Ġ{ Ġdispatch ( Toggle Todo ( todo . id )) Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠclassName Ġ= Ġ" todo - text " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ todo . text ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠclassName Ġ= Ġ" segment Ġbuttons " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġselect Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġval Ġtodo Color Ġ= Ġtodo . color ?. name Ġ?: Ġ"". lowercase () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠclassName Ġ= Ġ" color Picker " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyle Ġ= Ġj so Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcolor Ġ= ĠColor ( todo Color ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġvalue Ġ= Ġtodo Color . replace First Char Ġ{ Ġit . uppercase () Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Ġ= Ġ{ Ġdispatch ( Select Color ( todo . id , Ġit . target . value )) Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġoption Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġ"" ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġvalue Ġ= Ġ"" ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġenums . Color . values (). forEach Ġ{ Ġcolor Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġoption Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġcolor . name ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġvalue Ġ= Ġcolor . name ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ color . name . lowercase (). replace First Char Ġ{ Ġit . uppercase () Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġbutton Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠclassName Ġ= Ġ" destroy " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonClick Ġ= Ġ{ Ġdispatch ( Delete Todo ( todo . id )) Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtimes Solid () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ