Templee_0323) 검색 자동 완성 기능

Partical Structure of App

"TodoView"

   TodoCardsList
  - State 1 : todos ( initial Todo )
  - State 2 : searchedTodos
  - State 3 : selectedTags
  - Function 1 : { searchTodoByTyping }
  - Function 2 : { setTodosInSelectedTags }
  - Function 3 : { selectTodoByTag }
    forEach => { TodoCard }
    forEach => { TodoCard }
    forEach => { TodoCard }
    forEach => { TodoCard }

Point

1) Rather than going "up" to root component, "Todoview" ,
dealing with changes in "TodoCardsList"

const TodoCardsList: React.FC<TodoListProps> = memo(
  ({ teamId, todos, toggleTodo, toggleFixTodo }) => {
    const initTeamTodos = filterTeamTodo(todos, teamId);
    const todoTagLists: string[] = useMemo(() => filterTagLists(todos), [
      todos,
    ]);
    // console.log('render 1st CardsLists', initTeamTodos);
    const [teamTodos, SetTeamTodos] = useState<Todo[]>(initTeamTodos);
    const [searchedTodos, SetSearchedTodos] = useState<Todo[]>(initTeamTodos);
    const [searchedtmps, SetSearchedtemps] = useState<Todo[]>(initTeamTodos);
    const [selectedTags, SetSelectedTags] = useState<string[]>(todoTagLists);

    // console.log('searched Todos', searchedTodos);
    // console.log('searched Test Samples', searchedtmps);
    // console.log('render after CardsLists', filterTeamTodo(todos, teamId));
    // console.log('render final CardsLists', filterTeamTodo(todos, teamId));

    // Tag update
    const setTodosInSelectedTags = useCallback(
      (selectedTags: string[]): Todo[] =>
        teamTodos.reduce((acc: Todo[], todo: Todo) => {
          const chosenTagsLen = todo.tags!.filter((tag) =>
            selectedTags.includes(tag.text)
          ).length;
          if (chosenTagsLen != 0) {
            acc.push(todo);
          }
          return acc;
        }, []),
      [teamTodos]
    );

    // 단어 검색기능
    const searchTodoByTyping = useCallback(
      (word: string) => {
        const tmpArr: Array<Todo> = [];
        console.log('search word');

        // selectedTags 들 목록에 포함된
        // tag들을 가지고 있는 할일 추출
        const filteredTodos = setTodosInSelectedTags(selectedTags);
        filteredTodos.forEach((todo: Todo) => {
          word.split(' ').map((word) => {
            // 해당 항목을 가지고 있지 않은 이야기는 숨기기
            // -1 이 나오면, 해당 항목을 포함하지 않는다는 것
            // -1 이 나오지 않으면, 해당 항목을 포함한다는 것
            if (todo.title.toLowerCase().indexOf(word.toLowerCase()) != -1) {
              // 그렇지 않은 항목에 대해서는 display
              tmpArr.push(todo);
            }
          });
        });
        SetSearchedTodos(tmpArr);
      },
      [selectedTags]
    );

    // 태그 검색 기능
    const selectTodoByTag = useCallback(
      (tags: string[]) => {
        const filteredTodos = setTodosInSelectedTags(tags);
        SetSearchedTodos(filteredTodos);
        SetSelectedTags(tags);
      },
      [teamTodos]
    );

    // 초기화 기능
    const resetTodos = useCallback(() => {
      // const initTagsLists = filterTagLists(todos);
      const initTagsLists = filterTagLists(initTeamTodos);
      SetSelectedTags(initTagsLists);
      const filteredTodos = setTodosInSelectedTags(initTagsLists);
      console.log('reset');
      SetSearchedTodos(filteredTodos);
    }, [teamTodos]);

    return (
      <>
        <SearchBox
          todoTagLists={todoTagLists}
          searchFunc={searchTodoByTyping}
          selectTags={selectTodoByTag}
          resetFunc={resetTodos}
        />
        <StyledUl>
          {searchedTodos.map((filteredTodo: Todo) => (
            <>
              <TodoCard
                key={filteredTodo.id}
                id={filteredTodo.id}
                todo={filteredTodo}
                toggleTodo={toggleTodo}
                toggleFixTodo={toggleFixTodo}
              />
            </>
          ))}
        </StyledUl>
      </>
    );
  }
);

-