|
|
|
|
@ -1,4 +1,4 @@ |
|
|
|
|
import React, { useReducer } from 'react'; |
|
|
|
|
import React, { ReactFragment, useReducer, useState } from 'react'; |
|
|
|
|
import { WindowState } from "../Windows"; |
|
|
|
|
import { Box, Paper, Typography, TextField, Button, Tabs, Tab, Divider, IconButton } from "@material-ui/core"; |
|
|
|
|
import { useHistory } from 'react-router'; |
|
|
|
|
@ -8,45 +8,52 @@ import { Link } from 'react-router-dom'; |
|
|
|
|
import LocalOfferIcon from '@material-ui/icons/LocalOffer'; |
|
|
|
|
import OpenInNewIcon from '@material-ui/icons/OpenInNew'; |
|
|
|
|
import ManageLinksWindow from '../manage_links/ManageLinksWindow'; |
|
|
|
|
import ManageTagsWindow from '../manage_tags/ManageTagsWindow'; |
|
|
|
|
|
|
|
|
|
export enum ManageWhat { |
|
|
|
|
Tags = 0, |
|
|
|
|
Links, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export interface ManageWindowState extends WindowState { |
|
|
|
|
dummy: boolean |
|
|
|
|
} |
|
|
|
|
export enum ManageWindowActions { |
|
|
|
|
SetDummy = "SetDummy", |
|
|
|
|
} |
|
|
|
|
export function ManageWindowReducer(state: ManageWindowState, action: any) { |
|
|
|
|
switch (action.type) { |
|
|
|
|
case ManageWindowActions.SetDummy: { |
|
|
|
|
return state; |
|
|
|
|
} |
|
|
|
|
default: |
|
|
|
|
throw new Error("Unimplemented ManageWindow state update.") |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
export default function ManageWindow(props: { |
|
|
|
|
selectedWindow: ManageWhat, |
|
|
|
|
}) { |
|
|
|
|
let history = useHistory(); |
|
|
|
|
|
|
|
|
|
export default function ManageWindow(props: {}) { |
|
|
|
|
const [state, dispatch] = useReducer(ManageWindowReducer, { |
|
|
|
|
dummy: true, |
|
|
|
|
}); |
|
|
|
|
let NavButton = (props: { |
|
|
|
|
label: string, |
|
|
|
|
icon: ReactFragment, |
|
|
|
|
selected: boolean, |
|
|
|
|
onClick?: () => void, |
|
|
|
|
}) => { |
|
|
|
|
return <Button |
|
|
|
|
style={{ textTransform: "none" }} |
|
|
|
|
onClick={props.onClick} |
|
|
|
|
variant={props.selected ? "outlined" : "text"} |
|
|
|
|
> |
|
|
|
|
<Box display="flex" flexDirection="column" alignItems="center"> |
|
|
|
|
{props.icon}{props.label} |
|
|
|
|
</Box> |
|
|
|
|
</Button> |
|
|
|
|
|
|
|
|
|
return <ManageWindowControlled state={state} dispatch={dispatch} /> |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export function ManageWindowControlled(props: { |
|
|
|
|
state: ManageWindowState, |
|
|
|
|
dispatch: (action: any) => void, |
|
|
|
|
}) { |
|
|
|
|
return <Box display="flex" alignItems="top" height="100%" m={2}> |
|
|
|
|
<Box display="flex" flexDirection="column" alignItems="center"> |
|
|
|
|
<Box mt={2}><IconButton size="small"><LocalOfferIcon/></IconButton>Tags</Box> |
|
|
|
|
<Box mt={2}><IconButton size="small"><OpenInNewIcon/></IconButton>Links</Box> |
|
|
|
|
<NavButton |
|
|
|
|
label="Tags" |
|
|
|
|
icon={<LocalOfferIcon />} |
|
|
|
|
selected={props.selectedWindow === ManageWhat.Tags} |
|
|
|
|
onClick={() => history.push('/manage/tags')} |
|
|
|
|
/> |
|
|
|
|
<NavButton |
|
|
|
|
label="Links" |
|
|
|
|
icon={<OpenInNewIcon />} |
|
|
|
|
selected={props.selectedWindow === ManageWhat.Links} |
|
|
|
|
onClick={() => history.push('/manage/links')} |
|
|
|
|
/> |
|
|
|
|
</Box> |
|
|
|
|
<ManageLinksWindow /> |
|
|
|
|
</Box> |
|
|
|
|
{props.selectedWindow === ManageWhat.Tags && <ManageTagsWindow/>} |
|
|
|
|
{props.selectedWindow === ManageWhat.Links && <ManageLinksWindow/>} |
|
|
|
|
</Box > |
|
|
|
|
} |
