Skip to content

Latest commit

 

History

History
100 lines (77 loc) · 3.5 KB

task#2.md

File metadata and controls

100 lines (77 loc) · 3.5 KB
Raw

TODO LIST

  • Напиши застосунок зберігання todo-листів.
  • Використовуй методи життєвого циклу.
  • Під час додавання та видалення контакту контакти зберігаються у localStorage.
  • Під час завантаження застосунку todo-листа, якщо такі є, зчитуються з локального сховища і записуються у state.

Крок 1

Застосунок повинен складатися з форми і списку todo-листів. На поточному кроці реалізуй додавання тудушки та відображення їх списку. Застосунок повинен зберігати тудушки між різними сесіями (оновлення сторінки).

Використовуйте готову структуру форми з попередньго таска: компонент <SearchForm/> приймає один проп onSubmit - функцію для передачі значення інпута під час сабміту форми.

<SearchFormStyled>
  <FormBtn type="submit">
    <FiSearch size="16px" />
  </FormBtn>
  <InputSearch
    placeholder="What do you want to write?"
    name="search"
    required
    autoFocus
  />
</SearchFormStyled>

state, що зберігається в батьківському компоненті <Todos/>, обов'язково повинен бути наступного вигляду.

state = {
  todos: [],
}

Кожна todo повинна бути об'єктом з властивостями text та id. Для генерації ідентифікаторів використовуй будь-який відповідний пакет, наприклад nanoid. Після завершення цього кроку, застосунок повинен виглядати приблизно так.

preview

Опис компонента галереї <Grid/>

Список карток тудушок. Створює компонент наступної структури.

<Grid>{/* Набір <GridItem ></CardItem> із тудушками */}</Grid>

Опис компонента <GridItem/>

Компонент елемента тудушки. Створює компонент наступної структури.

<GridItem>
  <Todo />
</GridItem>

Опис компонента <Todo/>

Компонент тудушки. Створює компонент наступної структури.

<TodoWrapper>
  <Text textAlign="center" marginBottom="20px">
    TODO #1
  </Text>
  <Text>Some description</Text>
  <DeleteButton type="button">
    <RiDeleteBinLine size={24} />
  </DeleteButton>
</TodoWrapper>

Кореневий компонент програми виглядатиме так.

<SearchForm />
  <Grid>
    <GridItem>
      <Todo/>
    </GridItem>
  </Grid>

Крок 2

Розшир функціонал застосунку, дозволивши користувачеві видаляти раніше збережені тудушки.

preview