import React from "react";

import ReactDOM from "react-dom";

import { useUnit } from "effector-react";

import { createEvent, createEffect, createStore, sample } from "effector";

​

interface Node {

  name: string;

  children?: Node[];

}

​

// Events

const folderNodeAdded = createEvent<{ path: string; newNode: Node }>();

const folderNodeDeleted = createEvent<string>();

const folderToggled = createEvent<string>();

​

// Effects

const getFoldersFx = createEffect(async () => {

  const url = 'https://gist.githubusercontent.com/raw/' + 'd961d7eba48d4319debf57306f72cd63'

  const req = await fetch(url)

  const res = await req.json()

  return res

})

​

const addNodeFx = createEffect(

  ({

    folderTree,

    path,

    newNode,

  }: {

    folderTree: Node;

    path: string;

    newNode: Node;

  }) => {

    const updatedTree = JSON.parse(JSON.stringify(folderTree));

    addNode(updatedTree, path, newNode);

    return updatedTree;

  }

);

​

const deleteNodeFx = createEffect(

  ({ folderTree, path }: { folderTree: Node; path: string }) => {

    const updatedTree = JSON.parse(JSON.stringify(folderTree));

    deleteNode(updatedTree, path);

    return updatedTree;

  }

);

​

const toggleFolderFx = createEffect(

  ({

    openFolders,

    path,

  }: {

    openFolders: Record<string, boolean>;

    path: string;

  }) => {

    return {

      ...openFolders,

      [path]: !openFolders[path],

    };

  }

);

​

// Stores

​

const $folderTree = createStore<Node>({}).on(

  getFoldersFx.doneData,

  (_, result) => result

);

​

​

const $openFolders = createStore<Record<string, boolean>>({});

​

// Sample logic to update stores with the effects

sample({

  clock: folderNodeAdded,

  source: $folderTree,

  fn: (folderTree, { path, newNode }) => ({ folderTree, path, newNode }),

  target: addNodeFx,

});

​

sample({

  clock: folderNodeDeleted,

  source: $folderTree,

  fn: (folderTree, path) => ({ folderTree, path }),

  target: deleteNodeFx,

});

​

sample({

  clock: folderToggled,

  source: $openFolders,

  fn: (openFolders, path) => ({ openFolders, path }),

  target: toggleFolderFx,

});

​

// Connect effects to store updates

$folderTree.on(addNodeFx.doneData, (_, updatedTree) => updatedTree);

$folderTree.on(deleteNodeFx.doneData, (_, updatedTree) => updatedTree);

$openFolders.on(toggleFolderFx.doneData, (_, updatedFolders) => updatedFolders);

​

// Helper functions

const findNodeAndParent = (data: Node, path: string) => {

  const parts = path.split("/");

  let current: Node | undefined = data;

  let parent: Node | undefined = undefined;

​

  for (const part of parts) {

    parent = current;

    current = current?.children?.find((child) => child.name === part);

    if (!current) {

      return { node: undefined, parent: undefined };

    }

  }

  return { node: current, parent };

};

​

const deleteNode = (data: Node, path: string) => {

  if (path === "") {

    return;

  }

​

  const { node, parent } = findNodeAndParent(data, path);

  if (parent && node) {

    parent.children = parent.children?.filter((child) => child !== node);

  }

};

​

const addNode = (data: Node, path: string, newNode: Node) => {

  if (path === "") {

    data.children = data.children || [];

    data.children.push(newNode);

    return;

  }

​

  const { node } = findNodeAndParent(data, path);

  if (node) {

    node.children = node.children || [];

    node.children.push(newNode);

  }

};

​

// React Component

const FolderTree = () => {

  const [

    folderTree,

    openFolders,

    onFolderNodeAdded,

    onFolderNodeDeleted,

    onFolderToggled,

  ] = useUnit([

    $folderTree,

    $openFolders,

    folderNodeAdded,

    folderNodeDeleted,

    folderToggled,

  ]);

  React.useEffect(() => {

    getFoldersFx();

  }, []);

  const handleCreate = (path: string, type: string) => {

    const name = prompt(`Enter the name of the new ${type}:`);

    if (!name) {

      return;

    }

    const newNode: Node = {

      name,

      children: type === "folder" ? [] : undefined,

    };

    onFolderNodeAdded({ path, newNode });

  };

​

  const handleDelete = (path: string) => {

    if (window.confirm("Are you sure you want to delete this item?")) {

      onFolderNodeDeleted(path);

    }

  };

​

  const renderTree = () => {

    const stack = [{ data: folderTree, path: "" }];

    const elements: React.ReactNode[] = [];

​

    const renderFolder = (currentData: Node, path: string) => {

      const folderElement = (

        <div key={path} style={{ marginLeft: path !== "" && path.split("/").length * 20 }}>

          <div>

            <span

              onClick={() => onFolderToggled(path)}

              style={{ cursor: "pointer" }}

            >

              {openFolders[path] ? "[-]" : "[+]"} {currentData.name}

            </span>

            <button onClick={() => handleCreate(path, "folder")}>

              Create Folder

            </button>

            <button onClick={() => handleCreate(path, "file")}>

              Create File

            </button>

            {path !== "" && (

              <button onClick={() => handleDelete(path)}>Delete</button>

            )}

          </div>

        </div>

      );

​

      elements.push(folderElement);

​

      if (openFolders[path]) {

        currentData.children?.forEach((child) => {

          const newPath = path === "" ? child.name : `${path}/${child.name}`;

          stack.push({ data: child, path: newPath });

        });

      }

    };

​

    const renderFile = (currentData: Node, path: string) => (

      <div key={path} style={{ marginLeft: path.split("/").length * 20 }}>

        {currentData.name}

        <button onClick={() => handleDelete(path)}>Delete</button>

      </div>

    );

​

    while (stack.length > 0) {

      const { data: currentData, path } = stack.pop()!;

​

      if (Array.isArray(currentData.children)) {

        elements.push(renderFolder(currentData, path));

      } else {

        elements.push(renderFile(currentData, path));

      }

    }

​

    return elements;

  };

​

  const folders = renderTree();

  return <div>{folders}</div>;

};

​

const Example = () => {

  return (

    <div>

      <h1>Folder Tree</h1>

      <FolderTree />

    </div>

  );

};

​

ReactDOM.render(<Example />, document.getElementById("root"));