Create interactive Kanban with drag and drop functionality, as well a…

…s add task dialog for prototyping purposes of UX

Using `react-dnd` with HTML5 drag and drop backend.

client/src/App.tsx

@@ -2,6 +2,8 @@ import { CssBaseline, Typography } from "@material-ui/core";
 import { makeStyles, ThemeProvider } from "@material-ui/core/styles";
 import { Assignment } from "@material-ui/icons";
 import React from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import "./App.css";
 import Layout from "./Layout";
@@ -34,43 +36,45 @@ function App() {
   );
 
   return (
-    <Router>
-      <div className={classes.root}>
-        <ThemeProvider theme={theme}>
-          <ThemeProvider theme={colorTheme}>
-            <CssBaseline />
-            <Layout
-              toggleDarkTheme={toggleDarkTheme}
-              darkTheme={darkTheme}
-              links={[
-                {
-                  icon: <Assignment />,
-                  text: "Tasks",
-                  url: "/tasks",
-                },
-              ]}
-            >
-              <Switch>
-                <Route path="/" component={Dashboard} exact />
-                <Route path="/tasks">
-                  <div>Test.</div>
-                </Route>
-                <Route path="/projects/:id" component={Project} />
-                <Route path="*">
-                  <Typography variant="h3" component="h1">
-                    Error!
-                  </Typography>
-                  <br />
-                  <Typography variant="h4" component="p">
-                    404: Not Found
-                  </Typography>
-                </Route>
-              </Switch>
-            </Layout>
+    <DndProvider backend={HTML5Backend}>
+      <Router>
+        <div className={classes.root}>
+          <ThemeProvider theme={theme}>
+            <ThemeProvider theme={colorTheme}>
+              <CssBaseline />
+              <Layout
+                toggleDarkTheme={toggleDarkTheme}
+                darkTheme={darkTheme}
+                links={[
+                  {
+                    icon: <Assignment />,
+                    text: "Tasks",
+                    url: "/tasks",
+                  },
+                ]}
+              >
+                <Switch>
+                  <Route path="/" component={Dashboard} exact />
+                  <Route path="/tasks">
+                    <div>Test.</div>
+                  </Route>
+                  <Route path="/projects/:id" component={Project} />
+                  <Route path="*">
+                    <Typography variant="h3" component="h1">
+                      Error!
+                    </Typography>
+                    <br />
+                    <Typography variant="h4" component="p">
+                      404: Not Found
+                    </Typography>
+                  </Route>
+                </Switch>
+              </Layout>
+            </ThemeProvider>
           </ThemeProvider>
-        </ThemeProvider>
-      </div>
-    </Router>
+        </div>
+      </Router>
+    </DndProvider>
   );
 }
 

client/src/components/kanban/AddTaskDialog.tsx

@@ -0,0 +1,68 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogProps,
+  DialogTitle,
+  TextField,
+} from "@material-ui/core";
+import React from "react";
+
+interface AddTaskDialogProps extends DialogProps {
+  handleClose: () => void;
+  handleAdd: (title: string, description: string) => void;
+  status: string;
+}
+
+function AddTaskDialog({
+  status,
+  handleClose,
+  handleAdd,
+  ...props
+}: AddTaskDialogProps) {
+  const [title, setTitle] = React.useState("");
+  const [description, setDescription] = React.useState("");
+
+  return (
+    <Dialog {...props} aria-labelledby="responsive-dialog-title">
+      <DialogTitle id="responsive-dialog-title">
+        Add Task to {status}:
+      </DialogTitle>
+      <form onSubmit={() => handleAdd(title, description)}>
+        <DialogContent>
+          <TextField
+            autoFocus
+            margin="dense"
+            id="title"
+            label="Title"
+            type="text"
+            fullWidth
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
+          <TextField
+            autoFocus
+            margin="dense"
+            id="description"
+            label="Description"
+            type="text"
+            fullWidth
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button autoFocus onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button autoFocus type="submit">
+            Add
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  );
+}
+
+export default AddTaskDialog;