Working towards a general links management window.

client/src/components/MainWindow.tsx

@@ -15,6 +15,8 @@ import RegisterWindow from './windows/register/RegisterWindow';
 import SettingsWindow from './windows/settings/SettingsWindow';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ProvideIntegrations } from '../lib/integration/useIntegrations';
+import ManageLinksWindow from './windows/manage_links/ManageLinksWindow';
+import ManageWindow from './windows/manage/ManageWindow';
 
 const darkTheme = createMuiTheme({
     palette: {
@@ -90,6 +92,14 @@ export default function MainWindow(props: any) {
                             <AppBar selectedTab={AppBarTab.Tags} />
                             <ManageTagsWindow />
                         </PrivateRoute>
+                        <PrivateRoute path="/links">
+                            <AppBar selectedTab={AppBarTab.Links} />
+                            <ManageLinksWindow />
+                        </PrivateRoute>
+                        <PrivateRoute path="/manage">
+                            <AppBar selectedTab={null} />
+                            <ManageWindow />
+                        </PrivateRoute>
                     </Switch>
                 </BrowserRouter>
             </ProvideIntegrations>

client/src/components/appbar/AppBar.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import { AppBar as MuiAppBar, Box, Tab as MuiTab, Tabs, IconButton, Typography, Menu, MenuItem } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 import LocalOfferIcon from '@material-ui/icons/LocalOffer';
+import OpenInNewIcon from '@material-ui/icons/OpenInNew';
 import { Link, useHistory } from 'react-router-dom';
 import { useAuth } from '../../lib/useAuth';
 
 export enum AppBarTab {
     Query = 0,
     Tags,
+    Links,
 }
 
 export const appBarTabProps: Record<any, any> = {
@@ -19,6 +21,10 @@ export const appBarTabProps: Record<any, any> = {
         label: <Box display="flex"><LocalOfferIcon /><Typography variant="button">Tags</Typography></Box>,
         path: "/tags",
     },
+    [AppBarTab.Links]: {
+        label: <Box display="flex"><OpenInNewIcon /><Typography variant="button">Links</Typography></Box>,
+        path: "/links",
+    },
 }
 
 export function UserMenu(props: {

client/src/components/windows/Windows.tsx

@@ -26,6 +26,8 @@ export enum WindowType {
     Login = "Login",
     Register = "Register",
     Settings = "Settings",
+    ManageLinks = "ManageLinks",
+    Manage = "Manage",
 }
 
 export interface WindowState { }
@@ -40,6 +42,8 @@ export const newWindowReducer = {
     [WindowType.Login]: LoginWindowReducer,
     [WindowType.Register]: RegisterWindowReducer,
     [WindowType.Settings]: SettingsWindowReducer,
+    [WindowType.ManageLinks]: ManageTagsWindowReducer,
+    [WindowType.Manage]: ManageTagsWindowReducer,
 }
 
 export const newWindowState = {
@@ -100,4 +104,10 @@ export const newWindowState = {
     [WindowType.Settings]: () => {
         return {}
     },
+    [WindowType.ManageLinks]: () => {
+        return {}
+    },
+    [WindowType.Manage]: () => {
+        return {}
+    },
 }

client/src/components/windows/manage/ManageWindow.tsx

@@ -0,0 +1,52 @@
+import React, { useReducer } 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';
+import { useAuth, Auth } from '../../../lib/useAuth';
+import Alert from '@material-ui/lab/Alert';
+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';
+
+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: {}) {
+    const [state, dispatch] = useReducer(ManageWindowReducer, {
+        dummy: true,
+    });
+
+    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>
+        </Box>
+        <ManageLinksWindow />
+    </Box>
+}

client/src/components/windows/manage_links/ManageLinksWindow.tsx

@@ -0,0 +1,38 @@
+import React, { useReducer } from 'react';
+import { WindowState } from "../Windows";
+import { Box, Paper, Typography, TextField, Button } from "@material-ui/core";
+import { useHistory } from 'react-router';
+import { useAuth, Auth } from '../../../lib/useAuth';
+import Alert from '@material-ui/lab/Alert';
+import { Link } from 'react-router-dom';
+
+export interface ManageLinksWindowState extends WindowState {
+    dummy: boolean
+}
+export enum ManageLinksWindowActions {
+    SetDummy = "SetDummy",
+}
+export function ManageLinksWindowReducer(state: ManageLinksWindowState, action: any) {
+    switch (action.type) {
+        case ManageLinksWindowActions.SetDummy: {
+            return state;
+        }
+        default:
+            throw new Error("Unimplemented ManageLinksWindow state update.")
+    }
+}
+
+export default function ManageLinksWindow(props: {}) {
+    const [state, dispatch] = useReducer(ManageLinksWindowReducer, {
+        dummy: true,
+    });
+
+    return <ManageLinksWindowControlled state={state} dispatch={dispatch} />
+}
+
+export function ManageLinksWindowControlled(props: {
+    state: ManageLinksWindowState,
+    dispatch: (action: any) => void,
+}) {
+    return <>Hi!</>;
+}