ozcanzaferayan

import { selector } from "recoil";
import { todoListFilterState, todoListState } from "./atoms";

export const filteredTodoListState = selector({
  key: "filteredTodoListState",
  get: ({ get }) => {
    const filter = get(todoListFilterState);
    const list = get(todoListState);

    switch (filter) {

ozcanzaferayan

import { atom } from "recoil";

export const todoListState = atom({
  key: "todoListState",
  default: [
    { name: "Apples", isCompleted: false },
    { name: "Eggs", isCompleted: false },
    { name: "Butter", isCompleted: false },
  ],
});

ozcanzaferayan

import React, { useState } from "react";
import { useRecoilState, atom, selector, useRecoilValue } from "recoil";

const todoListState = atom({
  key: "todoListState",
  default: [
    { name: "Apples", isCompleted: false },
    { name: "Eggs", isCompleted: false },
    { name: "Butter", isCompleted: false },
  ],

ozcanzaferayan

const filteredTodos = useRecoilValue(filteredTodoListState);

ozcanzaferayan

const filteredTodoListState = selector({
  key: 'filteredTodoListState',
  get: ({get}) => {
    const filter = get(todoListFilterState);
    const list = get(todoListState);

    switch (filter) {
      case 'completed':
        return list.filter((item) => item.isCompleted);
      case 'uncompleted':

ozcanzaferayan

<select value={filter} onChange={(e) => setFilter(e.target.value)}>
  <option value="all">All</option>
  <option value="completed">Completed</option>
  <option value="uncompleted">Uncompleted</option>
</select>

ozcanzaferayan

const [filter, setFilter] = useRecoilState(todoListFilterState);

ozcanzaferayan

const todoListFilterState = atom({
  key: 'todoListFilterState',
  default: 'Hepsini göster',
});

ozcanzaferayan

import React, { useState } from "react";
import { useRecoilState, atom } from "recoil";

const todoListState = atom({
  key: "todoListState",
  default: [
    { name: "Apples", isCompleted: false },
    { name: "Eggs", isCompleted: false },
    { name: "Butter", isCompleted: false },
  ],

ozcanzaferayan

const completeAt = (index) => {
  const todos = [...todoList];
  const todo = todos[index];
  todos[index] = { name: todo.name, isCompleted: !todo.isCompleted };
  setTodoList(todos);
};