enhancement of the documentation, added comments

Author: kevinrss01

README.md

@@ -1,27 +1,48 @@
 # Introduction
 
-An example about how works the modal.
-![](./assets/global_architecture.png)
+This project is a web application based on react flow (A highly customizable React component for building node-based editors and interactive diagrams).
+
+This project is using Next.js, React.js, Typescript, Tremor and Tailwind.
+
+Despite it is not recommended for clean code, I added few comments in the code to improve the comprenhension for beginners.
 
 ## Getting Started
 
-First, run the development server:
+First, install the dependencies with
+
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
+```
 
 ```bash
 npm run dev
 # or
 yarn dev
 # or
-pnpm dev
+pnpm run dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Utilisation
+
+In the home page, you can add your own _JSON_ file or start with an exemple and modify it after. (Excel isn't available for the moment).
+You can also download the file in two formats : _JSON_ or _Excel (xlsx)_.
+You can see at top right a boutton to see all keyboard shortcuts.
+
+---
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+You can add different types of nodes by clicking on "add node".
+If you click on the black circle on each group/node bottom you can create edges between them.
 
-## Learn More
+## Learn more
+
+An example about how works the modal.
+![](./assets/global_architecture.png)
 
 To learn more about Next.js, take a look at the following resources:
 
@@ -30,8 +51,12 @@ To learn more about Next.js, take a look at the following resources:
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-## Deploy on Vercel
+### React Flow
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+If you're interested in learning more about React Flow, here are some resources to get you started:
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+- [React Flow Documentation](https://reactflow.dev/docs/getting-started/introduction) - the official documentation for React Flow.
+- [React Flow Tutorial](https://www.smashingmagazine.com/2020/09/node-based-editor-react-flow/) - a tutorial on building a node-based editor with React Flow.
+- [React Flow Examples](https://github.com/wbkd/react-flow/tree/main/examples) - a collection of examples demonstrating different use cases for React Flow.
+- [React Flow Playground](https://reactflow.dev/examples/playground/) - an interactive playground where you can experiment with React Flow.
+- [React Flow GitHub Repository](https://github.com/wbkd/react-flow) - the GitHub repository for React Flow, where you can find the source code and contribute to the project.

src/app/api/flow/route.ts

@@ -1,5 +1,3 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { redirect } from "next/navigation";
 import controlJsonFile from "@/utils/controlJsonFile";
 import { NextResponse } from "next/server";
 

src/app/components/ReactFlowContainer.tsx

@@ -22,7 +22,7 @@ import { ExcelConvertedJson } from "@/app/types/interface";
 
 import "reactflow/dist/style.css";
 import { ToastContainer } from "react-toastify";
-import { Button, Select, SelectItem } from "@tremor/react";
+import { Button, Select, SelectItem, Title } from "@tremor/react";
 
 type NodeType = "Group" | "input" | "output" | "default" | "resizeRotate";
 
@@ -64,8 +64,12 @@ const ReactFlowContainer = () => {
     }
   }, [nodes]);
 
+  /**
+   * The above code snippet is a TypeScript React component that uses the useEffect hook to update the
+   * nodes and edges state variables based on changes in the jsonData and jsonFormattedData variables.
+   * It also defines functions for opening and closing a modal, and for handling node and edge changes.
+   */
   useEffect(() => {
-    console.log("geg");
     if (jsonData.nodes.length === 0) return;
     const formattedData = getReactFlowFromJson(jsonData);
     if (!formattedData) return;
@@ -166,7 +170,7 @@ const ReactFlowContainer = () => {
         <MiniMap />
         {/*// @ts-ignore*/}
         <Background variant="lines" gap={12} size={1} />
-        <Panel position="top-left">
+        <Panel position="top-left" className="flex items-center justify-center">
           <Select
             placeholder="Add node"
             onValueChange={(value) => onAdd(value as NodeType)}
@@ -176,6 +180,11 @@ const ReactFlowContainer = () => {
             <SelectItem value="output">Output Node</SelectItem>
             <SelectItem value="Group">Group</SelectItem>
           </Select>
+          {nodes.length === 0 && (
+            <Title color="red" className="w-[300px] pl-3">
+              Please add data
+            </Title>
+          )}
         </Panel>
       </ReactFlow>
     </div>

src/app/components/download/DownloadFlow.tsx

@@ -6,6 +6,15 @@ import { DownloadFlowProps } from "@/app/types/interface";
 import * as XLSX from "xlsx";
 import { Node, Edge } from "reactflow";
 
+/**
+ * The `downloadExcel` function takes an array of nodes and edges, converts them into worksheets, and
+ * then saves them as an Excel file.
+ * @param {Node[]} nodes - The `nodes` parameter is an array of objects representing nodes in a graph.
+ * Each node object has the following properties:
+ * @param {Edge[]} edges - The `edges` parameter is an array of objects representing the connections
+ * between nodes. Each object in the array should have properties such as `source`, `target`, and any
+ * other relevant information about the edge.
+ */
 const downloadExcel = (nodes: Node[], edges: Edge[]) => {
   const flattenedNodes = nodes.map((node) => {
     return {
@@ -31,6 +40,12 @@ const downloadExcel = (nodes: Node[], edges: Edge[]) => {
   XLSX.writeFile(workbook, "data.xlsx");
 };
 
+/**
+ * The `DownloadFlow` function is a React component that handles the download of data in either JSON or
+ * Excel format.
+ * @param {"JSON" | "Excel"} fileType - The `fileType` parameter is a string that can have two possible
+ * values: "JSON" or "Excel". It is used to determine the type of file to be downloaded.
+ */
 const DownloadFlow: React.FC<DownloadFlowProps> = ({ nodes, edges }) => {
   const handleDownload = (fileType: "JSON" | "Excel") => {
     if (fileType === "Excel") {

src/app/components/uploadFile/UploadJson.tsx

@@ -14,7 +14,15 @@ export const UploadJson: React.FC<UploadJsonFileProps> = ({
 }) => {
   const [isValidJsonUpload, setIsValidJsonUpload] = useState<boolean>(false);
   const [unverifiedJson, setUnverifiedJson] = useState<{}>({});
+
   const fileInputRef = useRef<HTMLInputElement>(null);
+
+  /**
+   * The function handles the change event when a JSON file is selected, reads the file, parses the
+   * JSON data, and sets the parsed JSON as state.
+   * @param {any} event - The event parameter is an object that represents the event that triggered the
+   * file change. It contains information about the selected file, such as its name, size, and type.
+   */
   const handleJsonFileChange = (event: any) => {
     const jsonFile = event.target.files[0];
 
@@ -38,6 +46,10 @@ export const UploadJson: React.FC<UploadJsonFileProps> = ({
     }
   };
 
+  /**
+   * The function handles the upload of a JSON file, verifies its structure, sets the formatted data,
+   * and displays success or error messages.
+   */
   const handleJsonFileUpload = () => {
     try {
       controlJsonFile(unverifiedJson);

src/utils/controlJsonFile.ts

@@ -48,6 +48,13 @@ const optionalEdgesFields = [
   "updatable",
 ];
 
+/**
+ * The function `controlJsonFile` checks if a given JSON file has the required keys and valid structure
+ * for nodes and edges.
+ * @param {any} json - The `json` parameter is an object that represents a JSON file. It is expected to
+ * have a `nodes` property and an `edges` property, both of which should be arrays. Each element in the
+ * `nodes` and `edges` arrays should be an object with at least three properties.
+ */
 const controlJsonFile = (json: any): void => {
   if (!json.nodes || !json.edges) {
     throw new Error("Your file should have a nodes and edges key");

src/utils/jsonToFlow.ts

@@ -1,3 +1,5 @@
+//Take a JSON file resulted from a Excel conversion
+
 import { Edge, Node } from "reactflow";
 import {
   ColorType,
@@ -7,11 +9,27 @@ import {
 } from "@/app/types/interface";
 import { toast } from "react-toastify";
 
+/*
+ * * This code below are not used in the application because layouting is to complex to handle,
+ * * the best way to do that are either use JSON file or Excel file with specifiq and required fields such as
+ * * nodes positions and sizes.
+ */
+
 //TODO : Create a function to adapt the group position depending of the group number and the number of nodes in the group
 //TODO : Create a function to adapt the node position in the group depending of the group number and the number of nodes in the group
 
+/**
+ * The function `getReactFlowFromJson` takes in JSON data and returns formatted nodes and edges for
+ * ReactFlow, or undefined if there is an error.
+ * @param {ExcelConvertedJson} jsonData - The `jsonData` parameter is of type `ExcelConvertedJson`. It
+ * is an object that contains the data extracted from an Excel file and converted to JSON format. The
+ * `jsonData` object has two properties: `nodes` and `edges`.
+ * @returns an object with two properties: "formattedNodes" and "formattedEdges". The value of
+ * "formattedNodes" is an array of Node objects, and the value of "formattedEdges" is an array of Edge
+ * objects.
+ */
 export const getReactFlowFromJson = (
-  jsonData: ExcelConvertedJson,
+  jsonData: ExcelConvertedJson
 ):
   | {
       formattedNodes: Node[];
@@ -35,7 +53,7 @@ export const getReactFlowFromJson = (
 
 export const createNodesData = (
   jsonDataNode: ExcelConvertedJsonNode[],
-  edgesData: Edge[],
+  edgesData: Edge[]
 ) => {
   const formattedNodes: Node[] = [];
   const numberNodeByGroup = getNumberNodeByGroup(jsonDataNode);
@@ -184,7 +202,7 @@ interface SizeByGroup {
 
 export const setSizeByGroup = (
   numberNodeByGroup: NumberNodeByGroup,
-  edgesData: Edge[],
+  edgesData: Edge[]
 ): SizeByGroup => {
   const numberOfNodesPerRow = 3;
 
@@ -238,7 +256,7 @@ interface GroupTree {
 
 const getGroupPosition = (
   sizeAndNodesDataByGroup: SizeByGroup,
-  edgeData: Edge[],
+  edgeData: Edge[]
 ) => {
   //
 };