28일차 배운 것 정리

import BreadCrumb from "./src/components/BreadCrumb.js";
import ImageViewer from "./src/components/ImageViewer.js";
import NodeList from "./src/components/NodeList.js";
import Loading from "./src/components/Loading.js";
import { request } from "./src/api/request.js";

const catheStorage = new Map();

export default function App({ $target }) {
  this.state = {
    isRoot: true,
    isLoading: true,
    nodeList: [],
    selectedImageUrl: null,
    visitedNodeList: [],
  };

  this.setState = (nextState) => {
    console.log("!!!!!!!! <App> - SetState 호출".nextState);
    this.state = { ...this.state, ...nextState };
    //* 컴포넌트 별 분기 or State별 분기

    //* state별 분기시, 여러개 state가지는 컴포넌트 업데이트시 setState,rendering 단계적으로 일어남
    //* map을 통해 컴포넌트 별로 변화가 일어난 property를 모아 한 번에 setState 진행
    const updateMap = new Map(); // {key: component, value: property[] }
    const setProperty = (key, property) => {
      if (updateMap.has(key)) {
        const newPropertyList = [...updateMap.get(key), property];
        updateMap.set(key, newPropertyList);
      } else {
        updateMap.set(key, [property]);
      }
    };

    if (nextState.hasOwnProperty("isLoading")) {
      setProperty(loading, "isLoading");
    }
    if (nextState.hasOwnProperty("visitedNodeList")) {
      setProperty(breadcrumb, "visitedNodeList");
    }
    if (nextState.hasOwnProperty("isRoot")) {
      setProperty(nodes, "isRoot");
    }
    if (nextState.hasOwnProperty("nodeList")) {
      setProperty(nodes, "nodeList");
    }
    if (nextState.hasOwnProperty("selectedImageUrl")) {
      setProperty(imageViewer, "selectedImageUrl");
    }

    //* map 순회하며, 컴포넌트 별 setState 진행
    console.log(updateMap);
    [...updateMap].forEach(([component, propertyList]) => {
      const newState = {};
      propertyList.forEach((p) => (newState[p] = this.state[p]));
      component.setState(newState);
    });
  };

  this.init = () => {
    fetchNodes();
  };

  const onClickBreadCrumb = async (targetId) => {
    const { visitedNodeList } = this.state;
    if (
      visitedNodeList.length === 0 ||
      targetId === visitedNodeList[visitedNodeList.length - 1].id
    ) {
      return;
    }

    if (targetId) {
      const nextVisitedNodeList = [...visitedNodeList];
      const targetIdx = visitedNodeList.findIndex((node) => node.id === targetId);

      this.setState({ visitedNodeList: nextVisitedNodeList.slice(0, targetIdx + 1) });
    } else {
      this.setState({ visitedNodeList: [], isRoot: true });
    }
    await fetchNodes(targetId);
  };

  const onClickItem = async (node) => {
    if (node.type === "DIRECTORY") {
      await fetchNodes(node.id);
      this.setState({
        visitedNodeList: [...this.state.visitedNodeList, node],
      });
    }

    if (node.type === "FILE") {
      this.setState({
        selectedImageUrl: `https://fe-dev-matching-2021-03-serverlessdeploymentbuck-t3kpj3way537.s3.ap-northeast-2.amazonaws.com/public${node.filePath}`,
      });
    }
  };

  const onClickPrev = async () => {
    const newVisitedNodeList = [...this.state.visitedNodeList];
    newVisitedNodeList.pop();

    this.setState({
      visitedNodeList: newVisitedNodeList,
    });
    if (newVisitedNodeList.length === 0) {
      await fetchNodes();
    } else {
      const lastNode = newVisitedNodeList[newVisitedNodeList.length - 1];
      await fetchNodes(lastNode.id);
    }
  };

  const { isRoot, nodeList, selectedImageUrl, visitedNodeList } = this.state;

  const loading = new Loading({
    $target,
  });

  const breadcrumb = new BreadCrumb({
    $target,
    initialState: {
      visitedNodeList,
    },
    onClickBreadCrumb,
  });

  const nodes = new NodeList({
    $target,
    initialState: {
      isRoot,
      nodeList,
    },
    onClickItem: (node) => onClickItem(node),
    onClickPrev,
  });

  const imageViewer = new ImageViewer({
    $target,
    initialState: {
      selectedImageUrl,
    },
    onClose: () => {
      this.setState({
        selectedImageUrl: null,
      });
    },
  });

  const fetchNodes = async (id) => {
    console.log("fetchNodes, id: ", id);
    if (catheStorage.has(id)) {
      this.setState({ nodeList: catheStorage.get(id) });
      return;
    }
    if (!id && catheStorage.has("root")) {
      this.setState({ isRoot: true, nodeList: catheStorage.get("root") });
      return;
    }
    this.setState({
      isLoading: true,
    });
    const nodeList = await request(id ? `/${id}` : `/`);
    if (!id) {
      catheStorage.set("root", nodeList);
    } else {
      catheStorage.set(id, nodeList);
    }
    this.setState({
      nodeList,
      isRoot: id ? false : true,
      isLoading: false,
    });
  };

  this.init();
}