prettier lint

src/components/CustomNode/ImageNode.tsx

@@ -1,100 +0,0 @@
-import React from "react";
-import { MdLink, MdLinkOff } from "react-icons/md";
-// import { useInViewport } from "react-in-viewport";
-import { CustomNodeProps } from "src/components/CustomNode";
-import useGraph from "src/store/useGraph";
-import useStored from "src/store/useStored";
-import styled from "styled-components";
-import * as Styled from "./styles";
-
-const inViewport = true;
-
-const StyledExpand = styled.button`
-  pointer-events: all;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: ${({ theme }) => theme.TEXT_NORMAL};
-  background: rgba(0, 0, 0, 0.1);
-  height: 100%;
-  width: 40px;
-  border-left: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
-
-  &:hover {
-    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
-  }
-`;
-
-const StyledTextNodeWrapper = styled.div<{ hasCollapse: boolean }>`
-  display: flex;
-  justify-content: ${({ hasCollapse }) => (hasCollapse ? "space-between" : "center")};
-  align-items: center;
-  height: 100%;
-  width: 100%;
-`;
-
-const StyledImage = styled.img`
-  object-fit: contain;
-`;
-
-const TextNode: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) => {
-  const { id, text, width, height, data } = node;
-  const ref = React.useRef(null);
-  const hideCollapse = useStored(state => state.hideCollapse);
-  const childrenCount = useStored(state => state.childrenCount);
-  const expandNodes = useGraph(state => state.expandNodes);
-  const collapseNodes = useGraph(state => state.collapseNodes);
-  const isExpanded = useGraph(state => state.collapsedParents.includes(id));
-  const performanceMode = useGraph(state => state.performanceMode);
-  // const { inViewport } = useInViewport(ref);
-
-  const handleExpand = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-
-    if (!isExpanded) collapseNodes(id);
-    else expandNodes(id);
-  };
-
-  return (
-    <Styled.StyledForeignObject
-      width={width}
-      height={height}
-      x={0}
-      y={0}
-      hasCollapse={data.parent && hasCollapse}
-      ref={ref}
-    >
-      <StyledTextNodeWrapper hasCollapse={data.parent && hideCollapse}>
-        {(!performanceMode || inViewport) && (
-          <Styled.StyledKey
-            data-x={x}
-            data-y={y}
-            data-key={JSON.stringify(text)}
-            parent={data.parent}
-          >
-            <Styled.StyledLinkItUrl>
-              {JSON.stringify(text).replaceAll('"', "")}
-            </Styled.StyledLinkItUrl>
-          </Styled.StyledKey>
-        )}
-        <StyledImage src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg" alt="" />
-
-        {data.parent && data.childrenCount > 0 && childrenCount && (
-          <Styled.StyledChildrenCount>({data.childrenCount})</Styled.StyledChildrenCount>
-        )}
-
-        {inViewport && data.parent && hasCollapse && hideCollapse && (
-          <StyledExpand onClick={handleExpand}>
-            {isExpanded ? <MdLinkOff size={18} /> : <MdLink size={18} />}
-          </StyledExpand>
-        )}
-      </StyledTextNodeWrapper>
-    </Styled.StyledForeignObject>
-  );
-};
-
-function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
-  return prev.node.text === next.node.text && prev.node.width === next.node.width;
-}
-
-export default React.memo(TextNode, propsAreEqual);

src/components/CustomNode/index.tsx

@@ -21,11 +21,7 @@ export const CustomNode = (nodeProps: NodeProps) => {
   const { text, data } = nodeProps.properties;
 
   return (
-    <Node
-      {...nodeProps}
-      {...(data.isEmpty && rootProps)}
-      label={<React.Fragment />}
-    >
+    <Node {...nodeProps} {...(data.isEmpty && rootProps)} label={<React.Fragment />}>
       {({ node, x, y }) => {
         if (Array.isArray(text)) {
           return <ObjectNode node={node as NodeData} x={x} y={y} />;

src/containers/Home/index.tsx

@@ -9,6 +9,7 @@ import {
   HiOutlineDownload,
   HiOutlineSearchCircle,
 } from "react-icons/hi";
+import { IoRocketSharp } from "react-icons/io5";
 import { SiVisualstudiocode } from "react-icons/si";
 import { CarbonAds } from "src/components/CarbonAds";
 import { Footer } from "src/components/Footer";
@@ -17,7 +18,6 @@ import { Sponsors } from "src/components/Sponsors";
 import { SupportButton } from "src/components/SupportButton";
 import { baseURL } from "src/constants/data";
 import * as Styles from "./styles";
-import { IoRocketSharp } from "react-icons/io5";
 
 const Navbar = () => (
   <Styles.StyledNavbar>

src/containers/Modals/ShareModal/index.tsx

@@ -42,7 +42,7 @@ export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
   const onEmbedClick = () => {
     push("/docs");
     setVisible(false);
-  }
+  };
 
   return (
     <Modal visible={visible} setVisible={setVisible}>

src/pages/docs.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import { materialDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import styled from "styled-components";
-import { Footer } from "src/components/Footer";
 import { Button } from "src/components/Button";
+import { Footer } from "src/components/Footer";
+import styled from "styled-components";
 
 const SyntaxHighlighter = dynamic(
   () => import("react-syntax-highlighter").then(c => c.PrismAsync),
@@ -57,7 +57,6 @@ const StyledHighlight = styled.span<{ link?: boolean; alert?: boolean }>`
   margin: ${({ alert }) => alert && "8px 0"};
 `;
 
-
 const Docs = () => {
   return (
     <>
@@ -66,7 +65,9 @@ const Docs = () => {
         <meta name="description" content="Embedding JSON Crack tutorial into your websites." />
       </Head>
       <StyledPage>
-        <Button href="/" link status="SECONDARY">&lt; Go Back</Button>
+        <Button href="/" link status="SECONDARY">
+          &lt; Go Back
+        </Button>
         <h1>Documentation</h1>
         <StyledContent>
           <h2># Fetching from URL</h2>

src/services/db/json.tsx

@@ -2,7 +2,13 @@ import { compressToBase64 } from "lz-string";
 import { altogic, AltogicResponse } from "src/api/altogic";
 import { Json } from "src/typings/altogic";
 
-const saveJson = async ({ id, data }: { id?: string | null; data: string }): Promise<AltogicResponse<{ _id: string }>> => {
+const saveJson = async ({
+  id,
+  data,
+}: {
+  id?: string | null;
+  data: string;
+}): Promise<AltogicResponse<{ _id: string }>> => {
   const compressedData = compressToBase64(data);
 
   if (id) {

src/store/useUser.tsx

@@ -42,7 +42,7 @@ const useUser = create<UserStates & UserActions>()((set, get) => ({
 
     if (currentSession) {
       const dbUser = await altogic.auth.getUserFromDB();
-      
+
       altogic.auth.setSession(currentSession);
       set({ user: dbUser.user as any, isAuthenticated: true });
     } else {

src/typings/altogic.ts

@@ -10,7 +10,6 @@ export interface User {
   type: UserType;
 }
 
-
 export interface Json {
   _id: string;
   createdAt: string;
@@ -22,7 +21,7 @@ export interface Json {
 
 export enum UserType {
   "DEFAULT" = 0,
-  "PREMIUM" = 1
+  "PREMIUM" = 1,
 }
 
 interface Device {