Pulling feat/delete-selected-news into develop

apps/dicty-frontpage/src/common/components/DeleteNewsButton.tsx

@@ -0,0 +1,40 @@
+import { useState } from "react"
+import { Fab, Tooltip, makeStyles } from "@material-ui/core"
+import DeleteIcon from "@material-ui/icons/Delete"
+import { red } from "@material-ui/core/colors"
+import { DeleteSelectedNewsDialog } from "./DeleteSelectedNewsDialog"
+
+const useDeleteNewsButtonStyles = makeStyles({
+  root: {
+    backgroundColor: red[700],
+    color: red[50],
+    "&:hover": {
+      backgroundColor: red[900],
+    },
+  },
+})
+
+const DeleteNewsButton = () => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const { root } = useDeleteNewsButtonStyles()
+  const handleClick = () => {
+    setIsDialogOpen(true)
+  }
+  const handleClose = () => {
+    setIsDialogOpen(false)
+  }
+  return (
+    <>
+      <Tooltip
+        title="Delete Selected News Articles"
+        aria-label="delete-news-articles">
+        <Fab className={root} onClick={handleClick}>
+          <DeleteIcon />
+        </Fab>
+      </Tooltip>
+      <DeleteSelectedNewsDialog open={isDialogOpen} onClose={handleClose} />
+    </>
+  )
+}
+
+export { DeleteNewsButton }

apps/dicty-frontpage/src/common/components/DeleteSelectedNewsDialog.tsx

@@ -0,0 +1,32 @@
+import {
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+} from "@material-ui/core"
+
+type DeleteDialogProperties = {
+  open: boolean
+  onClose: () => void
+}
+
+const DeleteSelectedNewsDialog = ({
+  open,
+  onClose,
+}: DeleteDialogProperties) => (
+  <Dialog open={open} onClose={onClose}>
+    <DialogTitle>Delete Content</DialogTitle>
+    <DialogContent>
+      <DialogContentText>
+        Are you sure you want to delete this content?
+      </DialogContentText>
+    </DialogContent>
+    <DialogActions>
+      <Button onClick={onClose}> Cancel </Button>
+    </DialogActions>
+  </Dialog>
+)
+
+export { DeleteSelectedNewsDialog }

apps/dicty-frontpage/src/common/components/EditableNewsItem.tsx

@@ -1,35 +1,81 @@
-import { Typography, Grid } from "@material-ui/core"
-import { Link } from "react-router-dom"
+import { ChangeEvent } from "react"
+import { useAtom } from "jotai"
 import { pipe } from "fp-ts/function"
+import { match as Bmatch } from "fp-ts/boolean"
+import {
+  elem as Aelem,
+  uniq as Auniq,
+  filter as Afilter,
+  append as Aappend,
+} from "fp-ts/Array"
+import { Eq as SEq } from "fp-ts/string"
+import {
+  Typography,
+  Grid,
+  Checkbox,
+  List,
+  ListItem,
+  ListItemIcon,
+} from "@material-ui/core"
+import { Link } from "react-router-dom"
 import { parseISO, format } from "date-fns/fp"
 import { parseContentToText } from "@dictybase/editor"
 import { truncateString } from "../utils/truncateString"
+import { selectedNewsArticlesAtom } from "../../state"
 
 type NewsItemProperties = {
+  id: string
   name: string
   content: string
   updated_at: string
 }
 
 const EditableNewsItem = ({
+  id,
   name,
   content,
   updated_at,
-}: NewsItemProperties) => (
-  <Link to={`../news/${name}/editable`}>
-    <Grid container spacing={2} direction="column">
-      <Grid item>
-        <Typography variant="h2">
-          {pipe(updated_at, parseISO, format("PPPP"))}
-        </Typography>
-      </Grid>
-      <Grid item>
-        <Typography color="textPrimary">
-          {truncateString(parseContentToText(content), 400)}
-        </Typography>
+}: NewsItemProperties) => {
+  const [selectedNewsArticles, setSelectedNewsArticles] = useAtom(
+    selectedNewsArticlesAtom,
+  )
+  const isChecked = pipe(selectedNewsArticles, Aelem(SEq)(id))
+
+  const addToSelected = () => {
+    setSelectedNewsArticles(pipe(selectedNewsArticles, Aappend(id), Auniq(SEq)))
+  }
+
+  const removeFromSelected = () => {
+    setSelectedNewsArticles(
+      pipe(
+        selectedNewsArticles,
+        Afilter((element) => element !== id),
+      ),
+    )
+  }
+
+  const handleChange = ({
+    target: { checked },
+  }: ChangeEvent<HTMLInputElement>) => {
+    pipe(checked, Bmatch(removeFromSelected, addToSelected))
+  }
+
+  return (
+    <Link to={`../news/${name}/editable`}>
+      <Grid container spacing={2} direction="column">
+        <Grid item>
+          <Typography variant="h2">
+            {pipe(updated_at, parseISO, format("PPPP"))}
+          </Typography>
+        </Grid>
+        <Grid item>
+          <Typography color="textPrimary">
+            {truncateString(parseContentToText(content), 400)}
+          </Typography>
+        </Grid>
       </Grid>
-    </Grid>
-  </Link>
-)
+    </Link>
+  )
+}
 
 export { EditableNewsItem }

apps/dicty-frontpage/src/pages/news/editable.tsx

@@ -59,6 +59,7 @@ const NewsView = ({ contentList }: NewsViewProperties) => {
     Amap(({ id, name, content, created_at }) => (
       <EditableNewsItem
         key={id}
+        id={id}
         name={name}
         updated_at={created_at}
         content={content}

apps/dicty-frontpage/src/state.ts

@@ -3,4 +3,7 @@ import { Option, none } from "fp-ts/Option"
 
 const contentIdAtom = atom<Option<string>>(none)
 
-export { contentIdAtom }
+// News Content IDs
+const selectedNewsArticlesAtom = atom<Array<string>>([])
+
+export { contentIdAtom, selectedNewsArticlesAtom }