Notion screen kenny goff

test.tsx

import { block } from "./data";
import { Checks } from "./components/Checks";
import { WelcomeParagraph } from "./components/WelcomeParagraph";
import { useState } from "react";
import styled from "@emotion/styled";

console.log(block);

// pt 1
// full json structure
// button w/ toggle state
// future expanability note: more complex primitive support

// pt 2
// parse original JSON data
// get and create nested components for each new property
// name | button | curly

// pt 3
// functional nesting
// indentation
// properties on the same line as values

const collapsedObject = "{...}";
const collapsedArray = "[...]";

type CollapseButtonProps = {
  collapsed: boolean;
  onClick: () => void;
};
const CollapseButton = ({ collapsed, onClick }: CollapseButtonProps) => (
  <button onClick={onClick}>{collapsed ? "▶" : "▼"}</button>
);

const IndentationWrapper = styled.div`
  padding-left: "16px";
`;

type JSONObjectViewerProps = {
  block: any;
};
const JSONObjectViewer = ({ block }: JSONObjectViewerProps) => {
  const [collapsed, setCollapsed] = useState(true);

  // console.log(block);
  // console.log(
  //   Object.entries(block).filter(([name, value]) => typeof value === "object")
  // );

  const primitiveProperties = Object.entries(block).filter(
    ([name, value]) => typeof value !== "object"
  );
  const objectProperties = Object.entries(block).filter(
    ([name, value]) => typeof value === "object" && !Array.isArray(value)
  );
  const arrayProperties = Object.entries(block).filter(
    ([name, value]) => typeof value === "object" && Array.isArray(value)
  );

  // string
  // number
  // boolean

  const isArray = Array.isArray(block);
  const isObject = typeof block === "object" && !Array.isArray(block);

  console.log("arrays", arrayProperties);

  if (collapsed) {
    return (
      <div>
        <CollapseButton
          collapsed={collapsed}
          onClick={() => setCollapsed(!collapsed)}
        />
        {isArray ? collapsedArray : collapsedObject}
      </div>
    );
  }

  return (
    <div>
      <CollapseButton
        collapsed={collapsed}
        onClick={() => setCollapsed(!collapsed)}
      />
      <div>{isArray ? "[" : "{"}</div>
      <div className="indentation">
        {primitiveProperties.map(([name, value]) => {
          const formattedValue =
            typeof value === "string" ? `"${value}"` : value;
          return <div key={name}>{`"${name}": ${formattedValue}`}</div>;
        })}
        {objectProperties.map(([name, value]) => {
          return (
            <div key={name}>
              {`"${name}": `}
              <JSONObjectViewer block={value} />
            </div>
          );
        })}
        {arrayProperties.map(([name, value]) => {
          return (
            <div key={name}>
              {`"${name}": `}
              <JSONObjectViewer block={value} />
            </div>
          );
        })}
      </div>
      <div>{isArray ? "]" : "}"}</div>
    </div>
  );
};

export function App() {
  return (
    <main>
      <WelcomeParagraph>
        An empty React app to get you started! Edit me in App.tsx
      </WelcomeParagraph>
      <div>
        <p>◀ ▼ ▲ ▶</p>
      </div>
      <JSONObjectViewer block={"hello"} />
      <JSONObjectViewer block={block} />
      <Checks />
    </main>
  );
}