JSONCrack Codebase Analysis - Part 4.1 - Editor - Panes Component

jsoncrack.com is a popular opensource tool used to visualise json into a mindmap. It is built using Next.js.

We, at TThroo, love open source and perform codebase analysis on popular repositories, document, and provide a detailed explanation of the codebase. This enables OSS enthusiasts to learn and contribute to open source projects, and we also apply these learnings in our projects.

Part 4 talks about how Editor component is configured for the JSONCrack. It has the components overview, but let's dig deeper into how these components are entagled together. Interesting stuff from here on as this is where we will see the usage of zustand, hooks and draw more conclusions about design patterns used in this codebase.

In this post, let's understand the editor's Panes component used in jsoncrack.com. 

Panes

Panes comprise of two main components. One is the json editor and the other component renders the json as a mindmap

const Panes: React.FC = () => {
  const fullscreen = useGraph(state => state.fullscreen);

  return (
    <StyledEditor proportionalLayout={false}>
      <Allotment.Pane
        preferredSize={450}
        minSize={fullscreen ? 0 : 300}
        maxSize={800}
        visible={!fullscreen}
      >
        <JsonEditor />
      </Allotment.Pane>
      <Allotment.Pane minSize={0}>
        <LiveEditor />
      </Allotment.Pane>
    </StyledEditor>
  );
};

In the above code, Let's understand what useGraph is.

[useGraph](https://github.com/AykutSarac/jsoncrack.com/blob/main/src/store/useGraph.ts) is imported from src/store/useGraph.

useGraph is a zustand store. You could be tempted to understand useGraph fully but hang on, we will get there. Let's take a step back and check first line inside Panes component.

const fullscreen = useGraph(state => state.fullscreen);

It only relies on one value called fullscreen and that's all we have to know for now. useGraph has a lot going on, more on that in the later of part of this series.

fullscreen is used to set minSize prop in Panes component, then we have JsonEditor and LiveEditor

Conclusion:

When you are studying a new codebase, know when to stop. You cannot consume it all in one go. Which is what we did with useGraph, we just looked at it at high level and learnt that it uses zustand store and Panes only depends on fullscreen prop. In part 4.2, we will look at JsonEditor and in part 4.3, we will look at LiveEditor, this, in turn, gives us a better understanding as to how the editor changes trigger a live reload for the mindmap and how the stores are used to establish communication between these two components. It is going to be fun understanding this complicated entanglement.