Add support for sending messages

frontend/src/System/ContactModal.js

@@ -0,0 +1,87 @@
+import {useState} from 'react';
+import {
+  Modal,
+  Button,
+  Icon,
+  Label,
+  Form,
+  Grid
+} from "semantic-ui-react";
+import { useContactSystemMutation } from '../features/api/apiSlice'
+
+function ContactModal(props) {
+
+  const [contactSystem, { isLoading }] = useContactSystemMutation()
+  const {system, onClose} = props;
+  const [email, setEmail] = useState(false);
+  const [name, setName] = useState(false);
+  const [error, setError] = useState(false);
+  const [message, setMessage] = useState(false);
+
+  const handleSubmit = async () => {
+    if ((!name || name.length < 3) || (!email || email.length < 3) || (!message || message.length < 3)) {
+      setError("Please fill out your Name, Email and a Message with something useful");
+    } else {
+
+      const body = {
+        name,
+        email,
+        message
+      }
+      try {
+        const shortName = system.shortName;
+        const returned = await contactSystem({body,shortName}).unwrap();
+        console.log(returned);
+        setName(false);
+        setEmail(false);
+        setMessage(false);
+        //onClose();
+    } catch (submitError) {
+        console.error(error)
+        setError(submitError);
+      // you can handle errors here if you want to
+    }
+      
+
+    }
+  }
+  
+
+  return (
+    <Modal open={props.open} onClose={onClose} size='large' >
+      <Modal.Header>Contact Feed Contributer</Modal.Header>
+      <Modal.Content>
+        <Modal.Description>
+        <Grid columns={2} divided>
+        <Grid.Row>
+           <Grid.Column width={6}>
+            Stuf about what to do
+            </Grid.Column>
+            <Grid.Column width={10}>
+              <Form>
+              <Form.Group widths='equal'>
+          <Form.Input fluid label='Name' placeholder='Name' onChange={e => setName(e.target.value)}/>
+          <Form.Input fluid label='Email' placeholder='Email' onChange={e => setEmail(e.target.value)} />
+              </Form.Group>
+              <Form.TextArea label='Message' placeholder='Provide feedback to the Feed Contributer' onChange={e => setMessage(e.target.value)} />
+              </Form>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+        </Modal.Description>
+      </Modal.Content>
+      <Modal.Actions>
+      <Button onClick={(e) => onClose()} >
+          Cancel
+        </Button>
+        <Button onClick={(e) => {handleSubmit(); e.stopPropagation();}} >
+          Send
+        </Button>
+      </Modal.Actions>
+    </Modal>
+
+  )
+
+}
+
+export default ContactModal;

frontend/src/System/InternationList.js

@@ -6,7 +6,7 @@ import { useNavigate } from 'react-router-dom'
 import SystemCard from "./SystemCard";
 
 
-const InternationList = (other) => {
+const InternationList = (other, onContactClick) => {
     
     const navigate = useNavigate();
     let international = [];
@@ -15,7 +15,7 @@ const InternationList = (other) => {
         <Card.Group itemsPerRow={4} stackable={true}>
             {other &&
                 other.map((system) => {
-                    return <SystemCard system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)} />
+                    return <SystemCard system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)} onContactClick={onContactClick} />
                 })}
         </Card.Group>
     ))

frontend/src/System/ListSystems.js

@@ -1,6 +1,6 @@
-import { Component, useRef } from "react";
+import { Component, useRef, useState } from "react";
 import { Link, useNavigate } from 'react-router-dom'
-
+import ContactModal from "./ContactModal";
 import { useSelector, useDispatch } from 'react-redux'
 import {
   Container,
@@ -24,7 +24,8 @@ import InternationList from "./InternationList";
 // ----------------------------------------------------
 
 const ListSystems = (props) => {
-
+  const [contactVisible, setContactVisible] = useState(false);
+  const [contactSystem, setContactSystem] = useState(false);
   const { data: systems, isSuccess } = useGetSystemsQuery();
   //const systems = useSelector(selectActiveSystems)
   const contextRef = useRef();
@@ -45,13 +46,19 @@ const ListSystems = (props) => {
     }
   }
 
+  const handleContactClick = (system) => {
+    setContactSystem(system);
+    setContactVisible(true);
+  };
+  
   const stateList = StateLinkList(states);
-  const systemsByState = SystemsByState(states);
-  const international = InternationList(other);
+  const systemsByState = SystemsByState(states, handleContactClick);
+  const international = InternationList(other, handleContactClick);
 
   return (
     <div ref={contextRef}>
       <NavBar />
+      <ContactModal system={contactSystem} open={contactVisible} onClose={()=> setContactVisible(false)}/>
       <Container >
         <Divider horizontal style={{ paddingTop: "5em", paddingBottom: "2em" }}><Header as="h1">Radio Systems<Icon name='rss' /></Header></Divider>
         <Grid centered columns={2}>

frontend/src/System/SystemCard.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, useState } from "react";
 import {
   Card,
   Icon,
@@ -7,15 +7,26 @@ import {
 } from "semantic-ui-react";
 
 
-class SystemCard extends Component {
-
-  render() {
+function SystemCard (props) {
+  
+    const {system, keepShort, onClick, onContactClick} = props;
     var location = "";
-    const system = this.props.system;
     var clientCount = "";
     var callAvg = "";
-    var description = system.description;
-    if (this.props.keepShort && (description.length > 100)) {
+    const description = system.description;
+
+
+
+    const handleContactClick = (event) => {
+      event.stopPropagation();
+      onContactClick(system);
+    }
+
+    const onCardClick = (event) => {
+      onClick();
+    }
+
+    if (keepShort && (description.length > 100)) {
       description = description.substring(0, 96) + "...";
     }
     if (system.callAvg) {
@@ -75,7 +86,7 @@ class SystemCard extends Component {
       }
     }
     return (
-      <Card link onClick={this.props.onClick} raised={true} centered={true} >
+      <Card link onClick={onCardClick} raised={true} centered={true} >
         <Card.Content>
           <Card.Header >{system.name}</Card.Header>
           <Card.Meta>{location} </Card.Meta>
@@ -84,6 +95,7 @@ class SystemCard extends Component {
             <Grid.Row>
                 <Grid.Column >
                 {system.screenName && <Label size="mini"><Icon name='user' /> {system.screenName}</Label>}
+                <Label size="mini" onClick={handleContactClick}><Icon name='mail' />Mail</Label>
                 </Grid.Column>
               </Grid.Row>
               <Grid.Row>
@@ -99,7 +111,6 @@ class SystemCard extends Component {
         </Card.Content>
       </Card>
     );
-  }
 }
 
 export default SystemCard;

frontend/src/System/SystemsByState.js

@@ -6,7 +6,7 @@ import { useNavigate } from 'react-router-dom'
 import SystemCard from "./SystemCard";
 
 
-const SystemsByState = (states) => {
+const SystemsByState = (states, onContactClick) => {
     const navigate = useNavigate();
     let systemsByState = [];
 
@@ -23,7 +23,7 @@ const SystemsByState = (states) => {
                 <Card.Group  key={"group-" +state} itemsPerRow={4} stackable={true}>
                     {states[state] &&
                         states[state].map((system) => {
-                            return <SystemCard system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)} />
+                            return <SystemCard system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)} onContactClick={onContactClick} />
                         })}
                 </Card.Group>
             ))

frontend/src/features/api/apiSlice.js

@@ -54,10 +54,19 @@ export const apiSlice = createApi({
                 method: 'POST',
                 body: initialEvent
             })
+        }),
+        contactSystem: builder.mutation({
+            query: (args) => {
+                const {shortName, body} = args;
+                return {
+                url: `/${shortName}/contact`,
+                method: 'POST',
+                body: body
+            }}
         })
 
     })
 })
 
 // Export the auto-generated hook for the `getPosts` query endpoint
-export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetStatsQuery, useGetEventsQuery, useGetEventQuery, useAddNewEventMutation } = apiSlice
+export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetStatsQuery, useGetEventsQuery, useGetEventQuery, useAddNewEventMutation, useContactSystemMutation } = apiSlice