GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-12 19:02:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

code refactor sidebar & cloud modal

Browse Source
This commit is contained in:
AykutSarac 2022-12-20 11:00:34 +03:00
parent ca9cd881c4
commit f0399b68a5
4 changed files with 100 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
src/components/Sidebar/index.tsx
View File

@ -132,6 +132,19 @@ function rotateLayout(direction: "LEFT" | "RIGHT" | "DOWN" | "UP") {
return 360;
}
const SidebarButton: React.FC<{
onClick: () => void;
deviceDisplay?: "desktop" | "mobile";
title: string;
component: React.ReactNode;
}> = ({ onClick, deviceDisplay, title, component }) => {
return (
<Tooltip className={deviceDisplay} title={title}>
<StyledElement onClick={onClick}>{component}</StyledElement>
</Tooltip>
);
};
export const Sidebar: React.FC = () => {
const setVisible = useModal(state => state.setVisible);
const setDirection = useGraph(state => state.setDirection);
@ -184,77 +197,84 @@ export const Sidebar: React.FC = () => {
</StyledElement>
</Link>
<Tooltip className="mobile" title="Edit JSON">
<StyledElement onClick={() => toggleFullscreen(!fullscreen)}>
<AiOutlineEdit />
</StyledElement>
</Tooltip>
<SidebarButton
title="Edit JSON"
deviceDisplay="mobile"
onClick={() => toggleFullscreen(!fullscreen)}
component={<AiOutlineEdit />}
/>
<Tooltip title="Import File">
<StyledElement onClick={() => setVisible("import")(true)}>
<AiOutlineFileAdd />
</StyledElement>
</Tooltip>
<SidebarButton
title="Import File"
onClick={() => setVisible("import")(true)}
component={<AiOutlineFileAdd />}
/>
<Tooltip title="Rotate Layout">
<StyledElement onClick={toggleDirection}>
<StyledFlowIcon rotate={rotateLayout(direction)} />
</StyledElement>
</Tooltip>
<SidebarButton
title="Rotate Layout"
onClick={toggleDirection}
component={<StyledFlowIcon rotate={rotateLayout(direction)} />}
/>
<Tooltip className="mobile" title="Center View">
<StyledElement onClick={centerView}>
<MdCenterFocusWeak />
</StyledElement>
</Tooltip>
<SidebarButton
title="Center View"
deviceDisplay="mobile"
onClick={centerView}
component={<MdCenterFocusWeak />}
/>
<Tooltip className="desktop" title={foldNodes ? "Unfold Nodes" : "Fold Nodes"}>
<StyledElement onClick={toggleFoldNodes}>
{foldNodes ? <CgArrowsShrinkH /> : <CgArrowsMergeAltH />}
</StyledElement>
</Tooltip>
<SidebarButton
title={foldNodes ? "Unfold Nodes" : "Fold Nodes"}
deviceDisplay="desktop"
onClick={toggleFoldNodes}
component={foldNodes ? <CgArrowsShrinkH /> : <CgArrowsMergeAltH />}
/>
<Tooltip className="desktop" title={graphCollapsed ? "Expand Graph" : "Collapse Graph"}>
<StyledElement onClick={toggleExpandCollapseGraph}>
{graphCollapsed ? <VscExpandAll /> : <VscCollapseAll />}
</StyledElement>
</Tooltip>
<SidebarButton
title={graphCollapsed ? "Expand Graph" : "Collapse Graph"}
deviceDisplay="desktop"
onClick={toggleExpandCollapseGraph}
component={graphCollapsed ? <VscExpandAll /> : <VscCollapseAll />}
/>
<Tooltip className="desktop" title="Download JSON">
<StyledElement onClick={handleSave}>
<AiOutlineSave />
</StyledElement>
</Tooltip>
<SidebarButton
title="Download JSON"
deviceDisplay="desktop"
onClick={handleSave}
component={<AiOutlineSave />}
/>
<Tooltip className="mobile" title="Download Image">
<StyledElement onClick={() => setVisible("download")(true)}>
<FiDownload />
</StyledElement>
</Tooltip>
<SidebarButton
title="Download Image"
deviceDisplay="mobile"
onClick={() => setVisible("download")(true)}
component={<FiDownload />}
/>
<Tooltip title="Delete JSON">
<StyledElement onClick={() => setVisible("clear")(true)}>
<AiOutlineDelete />
</StyledElement>
</Tooltip>
<SidebarButton
title="Delete JSON"
onClick={() => setVisible("clear")(true)}
component={<AiOutlineDelete />}
/>
<Tooltip className="desktop" title="View Cloud">
<StyledElement onClick={() => setVisible("cloud")(true)}>
<VscCloud />
</StyledElement>
</Tooltip>
<SidebarButton
title="View Cloud"
deviceDisplay="desktop"
onClick={() => setVisible("cloud")(true)}
component={<VscCloud />}
/>
</StyledTopWrapper>
<StyledBottomWrapper>
<Tooltip title="Account">
<StyledElement onClick={() => setVisible("account")(true)}>
<VscAccount />
</StyledElement>
</Tooltip>
<Tooltip title="Settings">
<StyledElement onClick={() => setVisible("settings")(true)}>
<VscSettingsGear />
</StyledElement>
</Tooltip>
<SidebarButton
title="Account"
onClick={() => setVisible("account")(true)}
component={<VscAccount />}
/>
<SidebarButton
title="Settings"
onClick={() => setVisible("settings")(true)}
component={<VscSettingsGear />}
/>
</StyledBottomWrapper>
</StyledSidebar>
);

39
src/components/Tooltip/index.tsx
View File

@ -5,14 +5,9 @@ interface TooltipProps extends React.ComponentPropsWithoutRef<"div"> {
title?: string;
}
const StyledTooltipWrapper = styled.div`
position: relative;
width: fit-content;
height: 100%;
`;
const StyledTooltip = styled.div<{ visible: boolean }>`
const StyledTooltip = styled.div`
position: absolute;
display: none;
top: 0;
right: 0;
transform: translate(calc(100% + 15px), 25%);
@ -21,7 +16,6 @@ const StyledTooltip = styled.div<{ visible: boolean }>`
color: ${({ theme }) => theme.TEXT_NORMAL};
border-radius: 5px;
padding: 6px 8px;
display: ${({ visible }) => (visible ? "initial" : "none")};
white-space: nowrap;
font-family: "Mona Sans";
font-size: 16px;
@ -47,22 +41,23 @@ const StyledTooltip = styled.div<{ visible: boolean }>`
}
`;
const StyledChildren = styled.div``;
const StyledTooltipWrapper = styled.div`
position: relative;
width: fit-content;
height: 100%;
&:hover ${StyledTooltip} {
display: initial;
}
`;
export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
children,
title,
...props
}) => {
const [visible, setVisible] = React.useState(false);
return (
<StyledTooltipWrapper {...props}>
{title && <StyledTooltip visible={visible}>{title}</StyledTooltip>}
<StyledChildren onMouseEnter={() => setVisible(true)} onMouseLeave={() => setVisible(false)}>
{children}
</StyledChildren>
</StyledTooltipWrapper>
);
};
}) => (
<StyledTooltipWrapper {...props}>
{title && <StyledTooltip>{title}</StyledTooltip>}
<div>{children}</div>
</StyledTooltipWrapper>
);

6
src/containers/Modals/CloudModal/index.tsx
View File

@ -152,11 +152,9 @@ const CreateCard: React.FC = () => (
);
export const CloudModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
const { isReady, query } = useRouter();
const { query } = useRouter();
const { data, isFetching, refetch } = useQuery(["allJson", query], () => getAllJson(), {
enabled: isReady,
});
const { data, isFetching, refetch } = useQuery(["allJson", query], () => getAllJson());
return (
<StyledModal visible={visible} setVisible={setVisible}>

2
src/services/db/json.tsx
View File

@ -24,7 +24,7 @@ const saveJson = async ({ id, data }): Promise<{ data: { _id: string } }> => {
});
};
const getAllJson = async (): Promise<{ data: JSON[] }> => await altogic.endpoint.get(`json`);
const getAllJson = async (): Promise<{ data: { result: JSON[] } }> => await altogic.endpoint.get(`json`);
const updateJson = async (id: string, data: object) =>
await altogic.endpoint.put(`json/${id}`, {