GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-20 05:12:54 +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; 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 = () => { export const Sidebar: React.FC = () => {
const setVisible = useModal(state => state.setVisible); const setVisible = useModal(state => state.setVisible);
const setDirection = useGraph(state => state.setDirection); const setDirection = useGraph(state => state.setDirection);
@ -184,77 +197,84 @@ export const Sidebar: React.FC = () => {
</StyledElement> </StyledElement>
</Link> </Link>
<Tooltip className="mobile" title="Edit JSON"> <SidebarButton
<StyledElement onClick={() => toggleFullscreen(!fullscreen)}> title="Edit JSON"
<AiOutlineEdit /> deviceDisplay="mobile"
</StyledElement> onClick={() => toggleFullscreen(!fullscreen)}
</Tooltip> component={<AiOutlineEdit />}
/>
<Tooltip title="Import File"> <SidebarButton
<StyledElement onClick={() => setVisible("import")(true)}> title="Import File"
<AiOutlineFileAdd /> onClick={() => setVisible("import")(true)}
</StyledElement> component={<AiOutlineFileAdd />}
</Tooltip> />
<Tooltip title="Rotate Layout"> <SidebarButton
<StyledElement onClick={toggleDirection}> title="Rotate Layout"
<StyledFlowIcon rotate={rotateLayout(direction)} /> onClick={toggleDirection}
</StyledElement> component={<StyledFlowIcon rotate={rotateLayout(direction)} />}
</Tooltip> />
<Tooltip className="mobile" title="Center View"> <SidebarButton
<StyledElement onClick={centerView}> title="Center View"
<MdCenterFocusWeak /> deviceDisplay="mobile"
</StyledElement> onClick={centerView}
</Tooltip> component={<MdCenterFocusWeak />}
/>
<Tooltip className="desktop" title={foldNodes ? "Unfold Nodes" : "Fold Nodes"}> <SidebarButton
<StyledElement onClick={toggleFoldNodes}> title={foldNodes ? "Unfold Nodes" : "Fold Nodes"}
{foldNodes ? <CgArrowsShrinkH /> : <CgArrowsMergeAltH />} deviceDisplay="desktop"
</StyledElement> onClick={toggleFoldNodes}
</Tooltip> component={foldNodes ? <CgArrowsShrinkH /> : <CgArrowsMergeAltH />}
/>
<Tooltip className="desktop" title={graphCollapsed ? "Expand Graph" : "Collapse Graph"}> <SidebarButton
<StyledElement onClick={toggleExpandCollapseGraph}> title={graphCollapsed ? "Expand Graph" : "Collapse Graph"}
{graphCollapsed ? <VscExpandAll /> : <VscCollapseAll />} deviceDisplay="desktop"
</StyledElement> onClick={toggleExpandCollapseGraph}
</Tooltip> component={graphCollapsed ? <VscExpandAll /> : <VscCollapseAll />}
/>
<Tooltip className="desktop" title="Download JSON"> <SidebarButton
<StyledElement onClick={handleSave}> title="Download JSON"
<AiOutlineSave /> deviceDisplay="desktop"
</StyledElement> onClick={handleSave}
</Tooltip> component={<AiOutlineSave />}
/>
<Tooltip className="mobile" title="Download Image"> <SidebarButton
<StyledElement onClick={() => setVisible("download")(true)}> title="Download Image"
<FiDownload /> deviceDisplay="mobile"
</StyledElement> onClick={() => setVisible("download")(true)}
</Tooltip> component={<FiDownload />}
/>
<Tooltip title="Delete JSON"> <SidebarButton
<StyledElement onClick={() => setVisible("clear")(true)}> title="Delete JSON"
<AiOutlineDelete /> onClick={() => setVisible("clear")(true)}
</StyledElement> component={<AiOutlineDelete />}
</Tooltip> />
<Tooltip className="desktop" title="View Cloud"> <SidebarButton
<StyledElement onClick={() => setVisible("cloud")(true)}> title="View Cloud"
<VscCloud /> deviceDisplay="desktop"
</StyledElement> onClick={() => setVisible("cloud")(true)}
</Tooltip> component={<VscCloud />}
/>
</StyledTopWrapper> </StyledTopWrapper>
<StyledBottomWrapper> <StyledBottomWrapper>
<Tooltip title="Account"> <SidebarButton
<StyledElement onClick={() => setVisible("account")(true)}> title="Account"
<VscAccount /> onClick={() => setVisible("account")(true)}
</StyledElement> component={<VscAccount />}
</Tooltip> />
<Tooltip title="Settings"> <SidebarButton
<StyledElement onClick={() => setVisible("settings")(true)}> title="Settings"
<VscSettingsGear /> onClick={() => setVisible("settings")(true)}
</StyledElement> component={<VscSettingsGear />}
</Tooltip> />
</StyledBottomWrapper> </StyledBottomWrapper>
</StyledSidebar> </StyledSidebar>
); );

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

@ -5,14 +5,9 @@ interface TooltipProps extends React.ComponentPropsWithoutRef<"div"> {
title?: string; title?: string;
} }
const StyledTooltipWrapper = styled.div` const StyledTooltip = styled.div`
position: relative;
width: fit-content;
height: 100%;
`;
const StyledTooltip = styled.div<{ visible: boolean }>`
position: absolute; position: absolute;
display: none;
top: 0; top: 0;
right: 0; right: 0;
transform: translate(calc(100% + 15px), 25%); transform: translate(calc(100% + 15px), 25%);
@ -21,7 +16,6 @@ const StyledTooltip = styled.div<{ visible: boolean }>`
color: ${({ theme }) => theme.TEXT_NORMAL}; color: ${({ theme }) => theme.TEXT_NORMAL};
border-radius: 5px; border-radius: 5px;
padding: 6px 8px; padding: 6px 8px;
display: ${({ visible }) => (visible ? "initial" : "none")};
white-space: nowrap; white-space: nowrap;
font-family: "Mona Sans"; font-family: "Mona Sans";
font-size: 16px; 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>> = ({ export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
children, children,
title, title,
...props ...props
}) => { }) => (
const [visible, setVisible] = React.useState(false); <StyledTooltipWrapper {...props}>
{title && <StyledTooltip>{title}</StyledTooltip>}
return ( <div>{children}</div>
<StyledTooltipWrapper {...props}> </StyledTooltipWrapper>
{title && <StyledTooltip visible={visible}>{title}</StyledTooltip>} );
<StyledChildren onMouseEnter={() => setVisible(true)} onMouseLeave={() => setVisible(false)}>
{children}
</StyledChildren>
</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 }) => { export const CloudModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
const { isReady, query } = useRouter(); const { query } = useRouter();
const { data, isFetching, refetch } = useQuery(["allJson", query], () => getAllJson(), { const { data, isFetching, refetch } = useQuery(["allJson", query], () => getAllJson());
enabled: isReady,
});
return ( return (
<StyledModal visible={visible} setVisible={setVisible}> <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) => const updateJson = async (id: string, data: object) =>
await altogic.endpoint.put(`json/${id}`, { await altogic.endpoint.put(`json/${id}`, {