prettier lint

src/components/Modal/styles.tsx

@@ -24,7 +24,8 @@ export const ModalWrapper = styled.div`
 
 export const ModalInnerWrapper = styled.div<{ size: "sm" | "md" | "lg" }>`
   min-width: 440px;
-  max-width: ${({ size }) => (size === "sm" ? "490px" : size === "md" ? "50%" : "90%")};
+  max-width: ${({ size }) =>
+    size === "sm" ? "490px" : size === "md" ? "50%" : "90%"};
   width: fit-content;
   animation: ${appearAnimation} 220ms ease-in-out;
   line-height: 20px;

src/components/MonacoEditor/index.tsx

@@ -52,10 +52,11 @@ export const MonacoEditor = () => {
   );
 
   const debouncedSetJson = React.useMemo(
-    () => debounce(value => {
-      if (hasError) return;
-      setJson(value || "[]");
-    }, 1200),
+    () =>
+      debounce(value => {
+        if (hasError) return;
+        setJson(value || "[]");
+      }, 1200),
     [hasError, setJson]
   );
 

src/components/Sidebar/index.tsx

@@ -20,10 +20,10 @@ import {
 } from "react-icons/vsc";
 import { Tooltip } from "src/components/Tooltip";
 import useGraph from "src/store/useGraph";
+import useJson from "src/store/useJson";
 import useModal from "src/store/useModal";
 import { getNextDirection } from "src/utils/getNextDirection";
 import styled from "styled-components";
-import useJson from "src/store/useJson";
 
 const StyledSidebar = styled.div`
   display: flex;
@@ -142,7 +142,7 @@ export const Sidebar: React.FC = () => {
   const setVisible = useModal(state => state.setVisible);
   const setDirection = useGraph(state => state.setDirection);
   const getJson = useJson(state => state.getJson);
-  
+
   const collapseGraph = useGraph(state => state.collapseGraph);
   const expandGraph = useGraph(state => state.expandGraph);
   const centerView = useGraph(state => state.centerView);

src/components/Spinner/index.tsx

@@ -1,28 +1,28 @@
-import React from 'react'
-import { CgSpinner } from 'react-icons/cg'
-import styled, { keyframes } from 'styled-components'
+import React from "react";
+import { CgSpinner } from "react-icons/cg";
+import styled, { keyframes } from "styled-components";
 
 const rotateAnimation = keyframes`
   to { transform: rotate(360deg); }
 `;
 
 const StyledSpinnerWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    padding: 25px;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    
-    svg {
-        animation: ${rotateAnimation} 1s linear infinite;
-    }
+  display: flex;
+  align-items: center;
+  padding: 25px;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  svg {
+    animation: ${rotateAnimation} 1s linear infinite;
+  }
 `;
 
 export const Spinner = () => {
   return (
     <StyledSpinnerWrapper>
-        <CgSpinner size={40} />
+      <CgSpinner size={40} />
     </StyledSpinnerWrapper>
-  )
-}
+  );
+};

src/components/Tooltip/index.tsx

@@ -23,7 +23,7 @@ const StyledTooltip = styled.div<{ visible: boolean }>`
   padding: 6px 8px;
   display: ${({ visible }) => (visible ? "initial" : "none")};
   white-space: nowrap;
-  font-family: 'Mona Sans';
+  font-family: "Mona Sans";
   font-size: 16px;
   user-select: none;
   font-weight: 500;

src/containers/Editor/BottomBar.tsx

@@ -10,11 +10,11 @@ import {
 } from "react-icons/ai";
 import { VscAccount } from "react-icons/vsc";
 import { saveJson, updateJson } from "src/services/db/json";
+import useJson from "src/store/useJson";
 import useModal from "src/store/useModal";
 import useStored from "src/store/useStored";
 import useUser from "src/store/useUser";
 import styled from "styled-components";
-import useJson from "src/store/useJson";
 
 const StyledBottomBar = styled.div`
   display: flex;
@@ -69,12 +69,12 @@ export const BottomBar = () => {
   const user = useUser(state => state.user);
   const lightmode = useStored(state => state.lightmode);
   const hasChanges = useJson(state => state.hasChanges);
-  
+
   const getJson = useJson(state => state.getJson);
   const setVisible = useModal(state => state.setVisible);
   const setHasChanges = useJson(state => state.setHasChanges);
   const [isPrivate, setIsPrivate] = React.useState(false);
-  
+
   React.useEffect(() => {
     setIsPrivate(data?.private ?? false);
   }, [data]);

src/containers/Editor/JsonEditor/index.tsx

@@ -11,7 +11,6 @@ const StyledEditorWrapper = styled.div`
   user-select: none;
 `;
 export const JsonEditor: React.FC = () => {
-
   return (
     <StyledEditorWrapper>
       <ErrorContainer />

src/containers/Editor/Panes.tsx

@@ -3,8 +3,8 @@ import dynamic from "next/dynamic";
 import { Allotment } from "allotment";
 import "allotment/dist/style.css";
 import { JsonEditor } from "src/containers/Editor/JsonEditor";
-import styled from "styled-components";
 import useGraph from "src/store/useGraph";
+import styled from "styled-components";
 
 export const StyledEditor = styled(Allotment)`
   position: relative !important;

src/containers/Home/index.tsx

@@ -291,7 +291,7 @@ const Footer = () => (
     <Styles.StyledFooterText>
       <img width="120" src="assets/icon.png" alt="icon" loading="lazy" />
       <span>
-      © {new Date().getFullYear()} JSON Crack - {pkg.version}
+        © {new Date().getFullYear()} JSON Crack - {pkg.version}
       </span>
     </Styles.StyledFooterText>
     <Styles.StyledIconLinks>

src/containers/Modals/CloudModal/index.tsx

@@ -27,7 +27,8 @@ const StyledModalContent = styled.div`
 const StyledJsonCard = styled.a<{ active?: boolean }>`
   display: block;
   background: ${({ theme }) => theme.BLACK_SECONDARY};
-  border: 2px solid ${({ theme, active }) => active ? theme.SEAGREEN : theme.BLACK_SECONDARY};
+  border: 2px solid
+    ${({ theme, active }) => (active ? theme.SEAGREEN : theme.BLACK_SECONDARY)};
   border-radius: 5px;
   overflow: hidden;
   flex: 1;
@@ -87,7 +88,7 @@ const StyledNameInput = styled.input`
   font-weight: 600;
 `;
 
-const GraphCard: React.FC<{ data: any; refetch: () => void, active: boolean }> = ({
+const GraphCard: React.FC<{ data: any; refetch: () => void; active: boolean }> = ({
   data,
   refetch,
   active,
@@ -178,7 +179,12 @@ export const CloudModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
             <>
               <CreateCard />
               {data?.data?.result?.map(json => (
-                <GraphCard data={json} key={json._id} refetch={refetch} active={query.json === json._id} />
+                <GraphCard
+                  data={json}
+                  key={json._id}
+                  refetch={refetch}
+                  active={query.json === json._id}
+                />
               ))}
             </>
           )}

src/containers/Modals/DownloadModal/index.tsx

@@ -7,8 +7,8 @@ import { FiCopy, FiDownload } from "react-icons/fi";
 import { Button } from "src/components/Button";
 import { Input } from "src/components/Input";
 import { Modal, ModalProps } from "src/components/Modal";
-import styled from "styled-components";
 import useGraph from "src/store/useGraph";
+import styled from "styled-components";
 
 const ColorPickerStyles: Partial<TwitterPickerStylesProps> = {
   card: {

src/pages/widget.tsx

@@ -108,7 +108,7 @@ const WidgetPage = () => {
         if (options.theme === "light" || options.theme === "dark")
           setTheme(options.theme);
 
-          setNodeEdges(nodes, edges);
+        setNodeEdges(nodes, edges);
       } catch (error) {
         console.error(error);
         toast.error("Invalid JSON!");

src/services/db/json.tsx

@@ -27,9 +27,6 @@ const saveJson = async ({ id, data }): Promise<{ data: { _id: string } }> => {
 const getAllJson = async (): Promise<{ data: JSON[] }> =>
   await altogic.endpoint.get(`json`);
 
-const getJson = async (id: string): Promise<{ data: JSON }> =>
-  await altogic.endpoint.get(`json/${id}`)
-
 const updateJson = async (id: string, data: object) =>
   await altogic.endpoint.put(`json/${id}`, {
     ...data,
@@ -37,4 +34,4 @@ const updateJson = async (id: string, data: object) =>
 
 const deleteJson = async (id: string) => await altogic.endpoint.delete(`json/${id}`);
 
-export { saveJson, getJson, getAllJson, updateJson, deleteJson };
+export { saveJson, getAllJson, updateJson, deleteJson };

src/store/useGraph.tsx

@@ -53,7 +53,7 @@ const useGraph = create<Graph & GraphActions>((set, get) => ({
       collapsedNodes: [],
       collapsedEdges: [],
       graphCollapsed: false,
-      loading: true
+      loading: true,
     });
   },
   setDirection: direction => set({ direction }),
@@ -65,7 +65,7 @@ const useGraph = create<Graph & GraphActions>((set, get) => ({
       collapsedNodes: [],
       collapsedEdges: [],
       graphCollapsed: false,
-      loading: true
+      loading: true,
     }),
   setLoading: loading => set({ loading }),
   expandNodes: nodeId => {

src/store/useModal.tsx

@@ -15,7 +15,7 @@ const initialStates = {
   node: false,
   settings: false,
   share: false,
-  login: false
+  login: false,
 };
 
 type ModalType = keyof typeof initialStates;

src/utils/getOutgoers.ts

@@ -19,7 +19,7 @@ export const getOutgoers = (
         matchingNodes.push(n.id);
       return outgoerIds.includes(n.id) && !parent.includes(n.id);
     });
-    
+
     outgoerNodes.push(...nodeList);
     nodeList.forEach(node => runner(node.id));
   };