feat: admin messaging (Greenstand#236)

* feat: unresolved-messaging * feat: unresolved-messaging * feat(messaging): unresolved survey and announce * feat(messaging): unresolved survey and announce * feat(messaging): unresolved survey and announce * fix: message to grower context issue * fix: messaging context * fix: pr review fixes Co-authored-by: Nick Charlton <[email protected]>
gwynndp · Dec 24, 2021 · 2117f9b · 2117f9b
1 parent d04d1cf
commit 2117f9b
Show file tree

Hide file tree

Showing 15 changed files with 1,471 additions and 7 deletions.
diff --git a/.env.development b/.env.development
@@ -1,5 +1,6 @@
 REACT_APP_WEBMAP_DOMAIN=http://dev.treetracker.org
 REACT_APP_API_ROOT=https://dev-k8s.treetracker.org/api/admin
+REACT_APP_MESSAGING_ROOT=https://dev-k8s.treetracker.org/messaging
 REACT_APP_TREETRACKER_API_ROOT=https://dev-k8s.treetracker.org/treetracker
 REACT_APP_ENABLE_CAPTURE_MATCHING=true
 REACT_APP_REPORTING_API_ROOT=https://dev-k8s.treetracker.org/reporting

diff --git a/.prettierrc b/.prettierrc
@@ -4,6 +4,6 @@
   "singleQuote": true,
   "semi": true,
   "tabWidth": 2,
-  "trailingComma": "all",
+  "trailingComma": "es5",
   "bracketSpacing": true
 }
diff --git a/src/api/messaging.js b/src/api/messaging.js
@@ -0,0 +1,77 @@
+import { handleResponse, handleError } from './apiUtils';
+import { session } from '../models/auth';
+
+export default {
+  getRegion() {
+    const query = `${process.env.REACT_APP_MESSAGING_ROOT}/region`;
+
+    return fetch(query, {
+      method: 'GET',
+      headers: {
+        'content-type': 'application/json',
+        Authorization: session.token,
+      },
+    })
+      .then(handleResponse)
+      .catch(handleError);
+  },
+  postRegion(payload) {
+    const query = `${process.env.REACT_APP_MESSAGING_ROOT}/region`;
+    const { id, name, description, created_at } = payload;
+
+    return fetch(query, {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json',
+        Authorization: session.token,
+      },
+      body: JSON.stringify({ id, name, description, created_at }),
+    })
+      .then(handleResponse)
+      .catch(handleError);
+  },
+  getRegionById(region_id) {
+    const query = `${process.env.REACT_APP_MESSAGING_ROOT}/region/${region_id}`;
+
+    return fetch(query, {
+      headers: {
+        Authorization: session.token,
+      },
+    })
+      .then(handleResponse)
+      .catch(handleError);
+  },
+  getMessage(author_handle) {
+    const query = `${process.env.REACT_APP_MESSAGING_ROOT}/message?author_handle=${author_handle}`;
+
+    return fetch(query).then(handleResponse).catch(handleError);
+  },
+  postMessage(payload) {
+    const query = `${process.env.REACT_APP_MESSAGING_ROOT}/message`;
+
+    return fetch(query, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: session.token,
+      },
+      body: JSON.stringify({ ...payload }),
+    })
+      .then(handleResponse)
+      .catch(handleError);
+  },
+  postMessageSend(payload) {
+    const query = `${process.env.REACT_APP_MESSAGING_ROOT}/message/send`;
+
+    return fetch(query, {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json',
+        Authorization: session.token,
+      },
+      body: JSON.stringify(payload),
+    })
+      .then(handleResponse)
+      .catch(handleError);
+  },
+};
diff --git a/src/components/GrowerDetail.js b/src/components/GrowerDetail.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react';
+import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import CardMedia from '@material-ui/core/CardMedia';
@@ -17,12 +18,14 @@ import Divider from '@material-ui/core/Divider';
 import EditIcon from '@material-ui/icons/Edit';
 import { LinearProgress } from '@material-ui/core';
 import { Done, Clear, HourglassEmptyOutlined } from '@material-ui/icons';
+import Button from '@material-ui/core/Button';
 import Fab from '@material-ui/core/Fab';
 import api from '../api/growers';
 import { getDateTimeStringLocale } from '../common/locale';
 import { hasPermission, POLICIES } from '../models/auth';
 import { AppContext } from '../context/AppContext';
 import { GrowerContext } from '../context/GrowerContext';
+import { MessagingContext } from 'context/MessagingContext';
 import EditGrower from './EditGrower';
 import OptimizedImage from './OptimizedImage';
 import LinkToWebmap from './common/LinkToWebmap';
@@ -87,6 +90,19 @@ const useStyle = makeStyles((theme) => ({
     fontWeight: 700,
     fontSize: '0.8em',
   },
+  messageButton: {
+    background: theme.palette.primary.main,
+    color: 'white',
+    position: 'relative',
+    right: -175,
+    bottom: 90,
+    borderRadius: '25px',
+    '&:hover': {
+      backgroundColor: '#fff',
+      borderColor: theme.palette.primary.main,
+      color: theme.palette.primary.main,
+    },
+  },
 }));
 
 const GrowerDetail = (props) => {
@@ -95,6 +111,7 @@ const GrowerDetail = (props) => {
   const { growerId } = props;
   const appContext = useContext(AppContext);
   const growerContext = useContext(GrowerContext);
+  const { sendMessageFromGrower } = useContext(MessagingContext);
   const [growerRegistrations, setGrowerRegistrations] = useState(null);
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [grower, setGrower] = useState({});
@@ -125,7 +142,7 @@ const GrowerDetail = (props) => {
             console.log('grower registrations: ', registrations);
             if (registrations && registrations.length) {
               const sortedRegistrations = registrations.sort((a, b) =>
-                a.created_at > b.created_at ? 1 : -1,
+                a.created_at > b.created_at ? 1 : -1
               );
               setGrowerRegistrations(sortedRegistrations);
               setDeviceIdentifiers(
@@ -137,7 +154,7 @@ const GrowerDetail = (props) => {
                         ? 'iOS'
                         : 'Android',
                   }))
-                  .filter((id) => id),
+                  .filter((id) => id)
               );
             }
           });
@@ -270,6 +287,18 @@ const GrowerDetail = (props) => {
                 ID: <LinkToWebmap value={grower.id} type="user" />
               </Typography>
             </Grid>
+            {hasPermission(appContext.user, [POLICIES.SUPER_PERMISSION]) && (
+              <Grid item>
+                <Button
+                  className={classes.messageButton}
+                  onClick={() => sendMessageFromGrower(grower)}
+                  component={Link}
+                  to={'/messaging'}
+                >
+                  Send Message
+                </Button>
+              </Grid>
+            )}
             <Divider />
             <Grid container direction="column" className={classes.box}>
               <Typography variant="subtitle1">Captures</Typography>
@@ -385,8 +414,7 @@ const GrowerDetail = (props) => {
                   growerRegistrations
                     .map((item) => item.country)
                     .filter(
-                      (country, i, arr) =>
-                        country && arr.indexOf(country) === i,
+                      (country, i, arr) => country && arr.indexOf(country) === i
                     )
                     .join(', ')) ||
                   '---'}