diff --git a/.DS_Store b/.DS_Store index 2a559d6..b4b7e59 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/.env.test b/.env.test index dd4df7c..1c0acdb 100644 --- a/.env.test +++ b/.env.test @@ -2,6 +2,7 @@ MEDIA=/Users/luke/Testing/media DATA=/Users/luke/Testing/data MAILJET_KEY="4d2a0f6deb20a7890afee2daf595c22d" MAILJET_SECRET="fb74f682d68bf6b05ab626c0ac93a6da" +GOOGLE_ANALYTICS="UA-45563211-1" STAGE=test TAG=1.7 DOMAIN_NAME="openmhz.test" diff --git a/README.md b/README.md index ba8488e..dc98aa7 100644 --- a/README.md +++ b/README.md @@ -131,11 +131,15 @@ yarn start This should build the frontend and open a browser. In order to have all the cookies work correctly, you have to use the same domain name. Make sure you have setup the local domains as described above. Then goto the base domain, for me that is openmhz.test, at port 3000 `openmhz.test:3000` +## Upgrading a "Frontend" server + +https://create-react-app.dev/docs/updating-to-new-releases/ + ## Managing MongoDB MongoDB is used in the backend to store data. It is pretty fast, flexible and has worked well enough for me. -All of the files that MongoDB uses to store the DB are in the */data* directory, which gets mapped into the contianer. +All of the files that MongoDB uses to store the DB are in the */data* directory, which gets mapped into the container. Mapping this directory makes sure that the data persists each time you run the mongo container. ### Working with the MongoDB Container diff --git a/backend/controllers/calls.js b/backend/controllers/calls.js index 762c2ad..ef3170a 100644 --- a/backend/controllers/calls.js +++ b/backend/controllers/calls.js @@ -21,6 +21,7 @@ function get_calls(query, numResults, res) { name: true, time: true, srcList: true, + freq: true, star: true, len: true, url: true @@ -43,6 +44,7 @@ function get_calls(query, numResults, res) { time: item.time, srcList: item.srcList, star: item.star, + freq: item.freq, len: Math.round(item.len) }; calls.push(call); @@ -239,7 +241,39 @@ function package_call(item) { return call; } - +exports.remove_star = function(req, res, next) { + var objectId = req.params.id; + try { + var o_id = ObjectID.createFromHexString(objectId); + } catch (err) { + console.warn("[" + req.params.shortName + "] Error - /:shortName/call/:id generating ObjectID " + err); + res.status(500); + res.send(JSON.stringify({ + success: false, + message: err, + "_id": objectId + })); + return; + } + Call.findOneAndUpdate({ _id: objectId }, { $inc: { star: -1 } }, {new: true },function(err, item) { + if (err) { + res.status(500); + res.send(JSON.stringify({ + success: false, + message: err, + "_id": objectId + })); + } else { + var call = package_call(item); + req.call = call; + res.send(JSON.stringify({ + success: true, + call: call + })); + next(); + } + }) +} exports.add_star = function(req, res, next) { diff --git a/backend/controllers/uploads.js b/backend/controllers/uploads.js index a4d12aa..c77c413 100644 --- a/backend/controllers/uploads.js +++ b/backend/controllers/uploads.js @@ -13,9 +13,9 @@ var secrets = require("../config/secrets"); var util = require("util") var config = require('../config/config.json'); -var s3_endpoint = process.env['S3_ENDPOINT'] != null ? process.env['S3_ENDPOINT'] : 's3.us-west-1.wasabisys.com'; -var s3_bucket = process.env['S3_BUCKET'] != null ? process.env['S3_BUCKET'] : 'openmhz-west'; -var s3_profile = process.env['S3_PROFILE'] != null ? process.env['S3_PROFILE'] : 'wasabi-account'; +var s3_endpoint = process.env['S3_ENDPOINT'] != null ? process.env['S3_ENDPOINT'] : 's3.us-west-1.wasabisys.com'; +var s3_bucket = process.env['S3_BUCKET'] != null ? process.env['S3_BUCKET'] : 'openmhz-west'; +var s3_profile = process.env['S3_PROFILE'] != null ? process.env['S3_PROFILE'] : 'wasabi-account'; const wasabi = require('aws-sdk'); @@ -31,19 +31,19 @@ const wasabiS3 = new wasabi.S3({ async function callLength(file) { - return new Promise((resolve, reject) => { - probe(file, function(err, probeData) { - if (err) { - reject(err); - } else { - resolve(Math.round(probeData.format.duration)); - } - }); - }) + return new Promise((resolve, reject) => { + probe(file, function (err, probeData) { + if (err) { + reject(err); + } else { + resolve(Math.round(probeData.format.duration)); + } + }); + }) } -exports.upload = function(req, res, next) { -process.nextTick(function() { +exports.upload = function (req, res, next) { + process.nextTick(function () { @@ -61,235 +61,235 @@ process.nextTick(function() { res.send("Error, invalid filename:\n"); return; } - var shortName = req.params.shortName.toLowerCase(); - var apiKey = req.body.api_key; + var shortName = req.params.shortName.toLowerCase(); + var apiKey = req.body.api_key; - System.findOne({ - 'shortName': shortName - },["key", "ignoreUnknownTalkgroup"], async function(err, item) { + System.findOne({ + 'shortName': shortName + }, ["key", "ignoreUnknownTalkgroup"], async function (err, item) { - if (err) { - console.warn("[" + req.params.shortName + "] Error /:shortName/upload - Error: " + err); - res.status(500); - res.send("Error, invalid shotName:\n" + err); - return; - } - if (item === null) { - console.warn("[" + req.params.shortName + "] Error /:shortName/upload ShortName does not exist"); - res.status(500); - res.send("ShortName does not exist: " + shortName + "\n"); - return; - } - if (apiKey != item.key) { - console.warn("[" + req.params.shortName + "] Error /:shortName/upload API Key Mismatch - Provided key: " + apiKey); - res.status(500); - res.send("API Keys do not match!\n"); - return; - } + if (err) { + console.warn("[" + req.params.shortName + "] Error /:shortName/upload - Error: " + err); + res.status(500); + res.send("Error, invalid shotName:\n" + err); + return; + } + if (item === null) { + console.warn("[" + req.params.shortName + "] Error /:shortName/upload ShortName does not exist"); + res.status(500); + res.send("ShortName does not exist: " + shortName + "\n"); + return; + } + if (apiKey != item.key) { + console.warn("[" + req.params.shortName + "] Error /:shortName/upload API Key Mismatch - Provided key: " + apiKey); + res.status(500); + res.send("API Keys do not match!\n"); + return; + } - var talkgroupNum = parseInt(req.body.talkgroup_num); - var freq = parseFloat(req.body.freq); - var time = new Date(parseInt(req.body.start_time) * 1000); - var stopTime = new Date(); - if (req.body.stop_time) { - var stopTime = new Date(parseInt(req.body.stop_time) * 1000); - } - var startTime = req.body.start_time; - var emergency = parseInt(req.body.emergency); - + var talkgroupNum = parseInt(req.body.talkgroup_num); + var freq = parseFloat(req.body.freq); + var time = new Date(parseInt(req.body.start_time) * 1000); + var stopTime = new Date(); + if (req.body.stop_time) { + var stopTime = new Date(parseInt(req.body.stop_time) * 1000); + } + var startTime = req.body.start_time; + var emergency = parseInt(req.body.emergency); - if (item.ignoreUnknownTalkgroup == true) { - //console.log("ignore unknown talkgroup "); - //await Talkgroup.findOne({ answer: 42 }).select({ _id: 1 }).lean().then(doc => !!doc) - talkgroupExists = await Talkgroup.exists({ - 'shortName': shortName, - 'num': talkgroupNum - }); - //console.log("In talkgroup: " + talkgroupExists); - //talkgroupExists = await Talkgroup.findOne({ 'shortName': shortName, 'num': talkgroupNum }).select({ _id: 1 }).lean().then(doc => !!doc).exec(); - if (!talkgroupExists) { - try { - fs.unlinkSync(req.file.path) - //file removed - } catch(err) { - console.log("[" + call.shortName + "] error deleting: " + req.file.path); - } - - res.status(500); - res.send("Talkgroup does not exist, skipping.\n"); - return; - + + if (item.ignoreUnknownTalkgroup == true) { + //console.log("ignore unknown talkgroup "); + //await Talkgroup.findOne({ answer: 42 }).select({ _id: 1 }).lean().then(doc => !!doc) + talkgroupExists = await Talkgroup.exists({ + 'shortName': shortName, + 'num': talkgroupNum + }); + //console.log("In talkgroup: " + talkgroupExists); + //talkgroupExists = await Talkgroup.findOne({ 'shortName': shortName, 'num': talkgroupNum }).select({ _id: 1 }).lean().then(doc => !!doc).exec(); + if (!talkgroupExists) { + try { + fs.unlinkSync(req.file.path) + //file removed + } catch (err) { + console.log("[" + call.shortName + "] error deleting: " + req.file.path); } - } - // Add in an API Key check - - try { - - var srcList = JSON.parse(req.body.source_list); - - // Mongoose does not allow 'errors' to be used in the Schema for call. need to rename to error. - var badFreqList = JSON.parse(req.body.freq_list); - var freqList = badFreqList.map(obj =>{ - obj.error = obj.errors; - delete obj.errors; - return obj; - }); - - } catch (err) { - var srcList = []; - var freqList = []; - console.warn("[" + req.params.shortName + "] Error /:shortName/upload Parsing Source/Freq List - Error: " + err); res.status(500); - res.send("Error parsing sourcelist " + err); + res.send("Talkgroup does not exist, skipping.\n"); + return; + } + } + // Add in an API Key check - var base_path = config.mediaDirectory; - var local_path = "/" + shortName + "/" + time.getFullYear() + "/" + (time.getMonth() + 1) + "/" + time.getDate() + "/"; - var target_file = base_path + local_path + path.basename(req.file.originalname); - var object_key = "media/" + shortName + "-" + talkgroupNum + "-" + startTime + ".m4a"; - - var endpoint = s3_endpoint; - var bucket = s3_bucket; - + try { - // If not a pro plan, use S3 storage - var url = 'https://' + s3_endpoint + "/" + s3_bucket + "/" + object_key; - var objectStore = true; - + var srcList = JSON.parse(req.body.source_list); - var call = new Call({ - shortName: shortName, - talkgroupNum: talkgroupNum, - objectKey: object_key, - endpoint: endpoint, - bucket: bucket, - time: time, - name: talkgroupNum + "-" + startTime + ".m4a", - freq: freq, - url: url, - emergency: emergency, - path: local_path, - srcList: srcList, - freqList: freqList, - len: -1 + // Mongoose does not allow 'errors' to be used in the Schema for call. need to rename to error. + var badFreqList = JSON.parse(req.body.freq_list); + var freqList = badFreqList.map(obj => { + obj.error = obj.errors; + delete obj.errors; + return obj; }); - try { - if (req.body.call_length) { - call.len = parseInt(req.body.call_length); - } else { - call.len = (stopTime - time)/1000; //await callLength(req.file.path); - } - res.status(200).end(); + } catch (err) { + var srcList = []; + var freqList = []; + console.warn("[" + req.params.shortName + "] Error /:shortName/upload Parsing Source/Freq List - Error: " + err); + + res.status(500); + res.send("Error parsing sourcelist " + err); + } + + var base_path = config.mediaDirectory; + var local_path = "/" + shortName + "/" + time.getFullYear() + "/" + (time.getMonth() + 1) + "/" + time.getDate() + "/"; + var target_file = base_path + local_path + path.basename(req.file.originalname); + var object_key = "media/" + shortName + "-" + talkgroupNum + "-" + startTime + ".m4a"; + + var endpoint = s3_endpoint; + var bucket = s3_bucket; - if (!objectStore) { - mkdirp.sync(base_path + local_path, function(err) { - if (err) console.error(err); - }); - var src = fs.createReadStream(req.file.path); - var dest = fs.createWriteStream(target_file); - dest.on('unpipe', (src) => { - src.end(); - dest.end(); - }); - src.pipe(dest); - src.unpipe() - src.on('error', function(err) { - console.warn("[" + call.shortName + "] Error /:shortName/upload copying to location - Error: " + err + " Read: " + req.file.path + " Target: " + target_file); - fs.unlink(req.file.path, (err) => { - if (err) - console.log("[" + call.shortName + "] error deleting: " + req.file.path); - }); - res.contentType('json'); - res.send(JSON.stringify({ - success: false, - error: "Upload failed" - })); - }); - src.on('end', function() { - fs.unlink(req.file.path); - }); - } else { - //var spacesSrc = fs.createReadStream(req.file.path); - //var awsSrc = fs.createReadStream(req.file.path); - var wasabiSrc = fs.createReadStream(req.file.path); + // If not a pro plan, use S3 storage + var url = 'https://' + s3_endpoint + "/" + s3_bucket + "/" + object_key; + var objectStore = true; + + var call = new Call({ + shortName: shortName, + talkgroupNum: talkgroupNum, + objectKey: object_key, + endpoint: endpoint, + bucket: bucket, + time: time, + name: talkgroupNum + "-" + startTime + ".m4a", + freq: freq, + url: url, + emergency: emergency, + path: local_path, + srcList: srcList, + freqList: freqList, + len: -1 + }); + + try { + if (req.body.call_length) { + call.len = parseInt(req.body.call_length); + } else { + call.len = (stopTime - time) / 1000; //await callLength(req.file.path); + } + res.status(200).end(); + + + if (!objectStore) { + mkdirp.sync(base_path + local_path, function (err) { + if (err) console.error(err); + }); + var src = fs.createReadStream(req.file.path); + var dest = fs.createWriteStream(target_file); + dest.on('unpipe', (src) => { + src.end(); + dest.end(); + }); + src.pipe(dest); + src.unpipe() + src.on('error', function (err) { + console.warn("[" + call.shortName + "] Error /:shortName/upload copying to location - Error: " + err + " Read: " + req.file.path + " Target: " + target_file); + fs.unlink(req.file.path, (err) => { + if (err) + console.log("[" + call.shortName + "] error deleting: " + req.file.path); + }); + res.contentType('json'); + res.send(JSON.stringify({ + success: false, + error: "Upload failed" + })); + }); + src.on('end', function () { + fs.unlink(req.file.path); + }); + } else { + //var spacesSrc = fs.createReadStream(req.file.path); + //var awsSrc = fs.createReadStream(req.file.path); + var wasabiSrc = fs.createReadStream(req.file.path); + + // call S3 to retrieve upload file to specified bucket + + /* var spacesParams = {Bucket: 'openmhz', Key: object_key, Body: spacesSrc, ACL: 'public-read'}; // call S3 to retrieve upload file to specified bucket - - /* var spacesParams = {Bucket: 'openmhz', Key: object_key, Body: spacesSrc, ACL: 'public-read'}; - // call S3 to retrieve upload file to specified bucket - spacesS3.upload (spacesParams, function (err, data) { - //fs.unlink(req.file.path); - if (err) { - console.log("Spaces Error", err); - } - });*/ - /* - var awsParams = {Bucket: 'openmhz', Key: object_key, Body: awsSrc, ACL: 'public-read'}; - - awsS3.upload (awsParams, function (err, data) { - fs.unlink(req.file.path); + spacesS3.upload (spacesParams, function (err, data) { + //fs.unlink(req.file.path); if (err) { - console.log("AWS Error", err); + console.log("Spaces Error", err); } });*/ + /* + var awsParams = {Bucket: 'openmhz', Key: object_key, Body: awsSrc, ACL: 'public-read'}; - var wasabiParams = { - Bucket: s3_bucket, - Key: object_key, - Body: wasabiSrc, - ACL: 'public-read' - }; + awsS3.upload (awsParams, function (err, data) { + fs.unlink(req.file.path); + if (err) { + console.log("AWS Error", err); + } + });*/ + + var wasabiParams = { + Bucket: s3_bucket, + Key: object_key, + Body: wasabiSrc, + ACL: 'public-read' + }; - //var options = {partSize: 10 * 1024 * 1024, queueSize: 1}; - /*var upload = new wasabiS3.ManagedUpload({ - leavePartsOnError: true, - partSize: 10 * 1024 * 1024, queueSize: 1, - params: wasabiParams - });*/ - //wasabiS3.upload(wasabiParams, options, function(err, data) { - wasabiS3.upload(wasabiParams, function(err, data) { - wasabiSrc.destroy(); - fs.unlink(req.file.path, (err) => { - if (err) { - console.log("[" + call.shortName + "]error deleting: " + req.file.path); - } - call.save(); - sysStats.addCall(call.toObject()); - - // we only want to notify clients if the clip is longer than 1 second. - if (call.len >= 1) { - req.call = call.toObject(); - next(); - } - }); + //var options = {partSize: 10 * 1024 * 1024, queueSize: 1}; + /*var upload = new wasabiS3.ManagedUpload({ + leavePartsOnError: true, + partSize: 10 * 1024 * 1024, queueSize: 1, + params: wasabiParams + });*/ + //wasabiS3.upload(wasabiParams, options, function(err, data) { + wasabiS3.upload(wasabiParams, function (err, data) { + wasabiSrc.destroy(); + fs.unlink(req.file.path, (err) => { if (err) { - console.log("[" + call.shortName + "] " + call.name + " - content-length: " + req.headers['content-length'] + " Wasabi Error", err); + console.log("[" + call.shortName + "]error deleting: " + req.file.path); + } + call.save(); + sysStats.addCall(call.toObject()); + + // we only want to notify clients if the clip is longer than 1 second. + if (call.len >= 1) { + req.call = call.toObject(); + next(); } }); - } - } catch (err) { - console.warn("[" + call.shortName + "] Upload Error: " + err + " Filename: " + call.name + " content-length: " + req.headers['content-length']); - res.status(500); - sysStats.addError(call.toObject()); - res.contentType('json'); - res.send(JSON.stringify({ - success: false, - error: "FFProbe" - })); - fs.unlink(req.file.path, (err) => { - if (err) - console.log("error deleting: " + req.file.path); + if (err) { + console.log("[" + call.shortName + "] " + call.name + " - content-length: " + req.headers['content-length'] + " Wasabi Error", err); + } }); } + } catch (err) { + console.warn("[" + call.shortName + "] Upload Error: " + err + " Filename: " + call.name + " content-length: " + req.headers['content-length']); + res.status(500); + sysStats.addError(call.toObject()); + res.contentType('json'); + res.send(JSON.stringify({ + success: false, + error: "FFProbe" + })); + fs.unlink(req.file.path, (err) => { + if (err) + console.log("error deleting: " + req.file.path); + }); + } - }); }); + }); } diff --git a/backend/index.js b/backend/index.js index 80c0f0e..a748c0f 100644 --- a/backend/index.js +++ b/backend/index.js @@ -30,12 +30,17 @@ var app = express(); const server = require('http').createServer(app); -const io = require('socket.io')(server, {}); +const io = require('socket.io')(server, { + cors: { + origin: "*", + methods: ["GET", "POST"], + } +}); var Twitter = require('twitter-lite'); -io.origins('*:*'); +//io.origins('*:*'); /* io.origins((origin, callback) => { //if (origin !== 'https://foo.example.com') { @@ -173,7 +178,7 @@ app.get('/:shortName/calls/older', calls.get_older_calls); app.get('/:shortName/calls/:time/older', calls.get_iphone_calls); app.get('/:shortName/calls', calls.get_calls); app.post('/:shortName/star/:id', calls.add_star); - +app.post('/:shortName/removeStar/:id', calls.remove_star); /*------ UPLOADS ---------- upload.single('call'), uploads.upload,*/ app.post('/:shortName/upload', upload.single('call'), uploads.upload, async function (req, res) { diff --git a/backend/package.json b/backend/package.json index b633309..c1a0b6f 100644 --- a/backend/package.json +++ b/backend/package.json @@ -26,7 +26,7 @@ "node-schedule": "1.2.4", "passport": "0.4.0", "passport-local": "1.0.0", - "socket.io": "2.1.1", + "socket.io": "^4.0.0", "twitter-lite": "1.1.0", "websocket": "^1.0.24", "ws": "^3.1.0" diff --git a/frontend/package.json b/frontend/package.json index 687d23d..ac813ba 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,17 +13,20 @@ "date-fns": "2.29.3", "ejs": "3.1.8", "history": "^5.3.0", + "mongodb": "^4.13.0", "react": "^18.2.0", "react-audio-player": "0.17.0", "react-datepicker": "4.8.0", "react-dom": "^18.2.0", "react-ga": "^3.3.1", + "react-intersection-observer": "^9.4.1", "react-redux": "^8.0.5", "react-router-dom": "6.6.1", "react-scripts": "5.0.1", "redux-thunk": "2.4.2", "semantic-ui-css": "2.5.0", - "semantic-ui-react": "2.1.4" + "semantic-ui-react": "2.1.4", + "socket.io-client": "^4.5.4" }, "scripts": { "start": "react-scripts start", diff --git a/frontend/public/index.html b/frontend/public/index.html index f8fac76..cd503df 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -27,10 +27,6 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - - %REACT_APP_SITE_NAME% diff --git a/frontend/src/About/AboutComponent.js b/frontend/src/About/AboutComponent.js index 9a41605..45db264 100644 --- a/frontend/src/About/AboutComponent.js +++ b/frontend/src/About/AboutComponent.js @@ -1,47 +1,44 @@ -import React, { Component } from "react"; +import React from "react"; import { Link } from 'react-router-dom' import { Container, Header, Divider, Icon, Menu, Button } from "semantic-ui-react"; -class AboutComponent extends Component { +const AboutComponent = () => { + return ( +
+ + Home + Listen + + +
About
 + +

I wrote Trunk Recorder because I was curious + about what my local fire station was up to and I put together the original version of OpenMHz because I + figured other people might want to listen to the recordings too.

+

The latest version of this site makes it easy for other people running Trunk Recorder to share their recrodings. + I am hoping that making it easier to listen to what our local fire, police and EMS have to go through everyday will + lead to greater appreciation for all the work they do that goes largely unseen. I am personally amazed by the number + of medical runs the DC's Fire and EMS department has to cover every day, and the shocking number of them that are ODs.

+ +

Each system should have a 30 day archive. This is to help make sure things don't get overloaded and make sure I don't get a crazy bill + at the end of the month.

+

- Luke luke@robotastic.com

+ +
Open Source
 +

Have changes you would like to suggest? Want to run your own server for your community? The source code for OpenMHz has been released:

+

Trunk Server

+
Support
 +

If OpenMHz brings you joy, think about becoming a supporter! It will cover hosting costs and help keep me focused on development.

+ +

+ + +
+ ); +} - render() { - return ( -
- - Home - Listen - - -
About
 - -

I wrote Trunk Recorder because I was curious - about what my local fire station was up to and I put together the original version of OpenMHz because I - figured other people might want to listen to the recordings too.

-

The latest version of this site makes it easy for other people running Trunk Recorder to share their recrodings. - I am hoping that making it easier to listen to what our local fire, police and EMS have to go through everyday will - lead to greater appreciation for all the work they do that goes largely unseen. I am personally amazed by the number - of medical runs the DC's Fire and EMS department has to cover every day, and the shocking number of them that are ODs.

- -

Each system should have a 30 day archive. This is to help make sure things don't get overloaded and make sure I don't get a crazy bill - at the end of the month.

-

- Luke luke@robotastic.com

- -
Open Source
 -

Have changes you would like to suggest? Want to run your own server for your community? The source code for OpenMHz has been released:

-

Trunk Server

-
Support
 -

If OpenMHz brings you joy, think about becoming a supporter! It will cover hosting costs and help keep me focused on development.

- -

- - -
- ); - } - } - - export default AboutComponent; \ No newline at end of file +export default AboutComponent; \ No newline at end of file diff --git a/frontend/src/Call/CalendarModal.js b/frontend/src/Call/CalendarModal.js index 112f7fe..76322c2 100644 --- a/frontend/src/Call/CalendarModal.js +++ b/frontend/src/Call/CalendarModal.js @@ -1,70 +1,62 @@ -import React, { Component } from "react"; +import React, { useState } from "react"; import { Modal, Button, Icon } from "semantic-ui-react"; import "./CalendarModal.css"; +import { setDateFilter } from "../features/callPlayer/callPlayerSlice"; import DatePicker from 'react-datepicker'; -import { subDays } from 'date-fns' +import { useDispatch } from 'react-redux' +import { subDays } from 'date-fns' import 'react-datepicker/dist/react-datepicker.css'; -class CalendarModal extends Component { - constructor(props) { - super(props) - this.handleDateChange = this.handleDateChange.bind(this); - this.handleDone = this.handleDone.bind(this); - this.handleClose = this.handleClose.bind(this); +function CalendarModal(props) { + const [startDate, setStartDate] = useState(new Date()); + const dispatch = useDispatch() + const onClose = props.onClose; - this.state = { - open: false, - startDate: new Date() - } -} - -handleDateChange = (date) => { - this.setState({ - startDate: date - }); + const handleDateChange = (date) => { + setStartDate(date); } -handleClose = () => this.props.onClose(false); -handleDone(event) { - this.props.callActions.setDateFilter(this.state.startDate.getTime()); - this.props.onClose(true); -} - - - render() { - - return ( - - - Select a Date & Time - - - - - - - - - - - ) + const handleClose = () => this.props.onClose(false); + const handleDone = (onClose) => { + dispatch(setDateFilter(startDate.getTime())); + onClose(true); } + + + + + return ( + + + Select a Date & Time + + + + + + + + + + + ) } + export default CalendarModal; diff --git a/frontend/src/Call/CalendarModalContainer.js b/frontend/src/Call/CalendarModalContainer.js deleted file mode 100644 index 4e30e1a..0000000 --- a/frontend/src/Call/CalendarModalContainer.js +++ /dev/null @@ -1,28 +0,0 @@ -import { connect } from "react-redux" -import * as callActionCreators from "./call-actions" -import { bindActionCreators } from 'redux' -import CalendarModal from "./CalendarModal" - -function mapStateToProps(state, props) { - return { - groups: state.group.items[props.shortName], - talkgroups: state.talkgroup.items[props.shortName], - talkgroupsIsWaiting: state.talkgroup.isWaiting, - groupsIsWaiting: state.group.isWaiting, - shortName: props.shortName, - activeTab: state.call.filterType, - selectedTalkgroups: state.call.filterTalkgroups - } -} - -function mapDispatchToProps(dispatch) { - return { - callActions: bindActionCreators(callActionCreators, dispatch) - } -} - - -export default connect( - mapStateToProps, - mapDispatchToProps -)(CalendarModal) diff --git a/frontend/src/Call/CallInfo.js b/frontend/src/Call/CallInfo.js index 107dab3..71ae3c6 100644 --- a/frontend/src/Call/CallInfo.js +++ b/frontend/src/Call/CallInfo.js @@ -1,7 +1,6 @@ import React from "react"; import { Header, - Button, Divider, List, Segment, @@ -11,20 +10,17 @@ import { } from "semantic-ui-react"; // ---------------------------------------------------- -class CallInfo extends React.Component { - - - render() { - var srcList = ""; - var callLength = "-"; - var callFreq = "-"; - var callDate = "-"; - var callTime = "-"; - var talkgroupNum = "-"; - var callDownload = ""; - var callTweet = ""; - if (this.props.call) { - const currentCall = this.props.call; +function CallInfo(props) { + let srcList = ""; + let callLength = "-"; + let callFreq = "-"; + let callDate = "-"; + let callTime = "-"; + let talkgroupNum = "-"; + let callDownload = ""; + let callTweet = ""; + if (props.call) { + const currentCall = props.call; var time = new Date(currentCall.time); callTime = time.toLocaleTimeString(); callDate = time.toLocaleDateString(); @@ -33,20 +29,17 @@ class CallInfo extends React.Component { callFreq = Math.round(freq * 1000) / 1000; } - srcList = currentCall.srcList.map((source, index) => {source.src} - [{source.pos}]); + srcList = currentCall.srcList.map((source, index) => {source.src}[{source.pos}]); callLength = currentCall.len; talkgroupNum = currentCall.talkgroupNum; callDownload = currentCall.url; - callTweet = "https://twitter.com/intent/tweet?url="+encodeURIComponent(document.location.origin+this.props.link)+"&via="+encodeURIComponent("OpenMHz"); + callTweet = "https://twitter.com/intent/tweet?url="+encodeURIComponent(document.location.origin+props.link)+"&via="+encodeURIComponent("OpenMHz"); } - - return (
-
{this.props.header}
+
{props.header}
{srcList} @@ -84,11 +77,10 @@ class CallInfo extends React.Component { Tweet Download - Link + Link
); - } } export default CallInfo; diff --git a/frontend/src/Call/CallItem.js b/frontend/src/Call/CallItem.js index d41949d..dcfd011 100644 --- a/frontend/src/Call/CallItem.js +++ b/frontend/src/Call/CallItem.js @@ -1,88 +1,43 @@ - -import React, { Component } from "react"; +import React, { useState } from "react"; import { Table, Icon, Label } from "semantic-ui-react"; -import { connect } from "react-redux" -import { bindActionCreators } from 'redux' -import * as callActionCreators from "./call-actions" -function mapStateToProps(state, props) { - return { - shortName: props.shortName +import { addStar, removeStar } from "../features/calls/callsSlice"; +import { useDispatch } from 'react-redux' - } -} +const CallItem = (props) => { -function mapDispatchToProps(dispatch) { - return { - callActions: bindActionCreators(callActionCreators, dispatch) - } -} - - -class CallItem extends Component { -constructor(props) { - super(props); - this.hideStar = this.hideStar.bind(this); - this.showStar = this.showStar.bind(this); - this.addStar = this.addStar.bind(this); - this.state = { - starVisible: false, - starClicked: false - } -} -sourceString(call) { - var srcString = ""; - if (call.srcList) { - for (var src in call.srcList) { - /* srcNum = call.srcList[src].src; - if (sources.hasOwnProperty(srcNum)) { - srcString = srcString + sources[srcNum].codeName + ", "; - }*/ - } - } - - return srcString; -} - -componentDidUpdate(){ - if (this.props.activeCall) { - console.log("Active call mounted") - } -} -addStar(e) { - e.preventDefault(); - e.stopPropagation(); - e.nativeEvent.stopImmediatePropagation(); - if (!this.state.starClicked) { - - this.props.callActions.addStar(this.props.call._id); - this.setState({starClicked: true}); - } -} - -hideStar() { - this.setState({ starVisible: false }) -} - -showStar() { - this.setState({ starVisible: true }) -} - -render() { - const call = this.props.call; + const [starVisible, setStarVisible] = useState(false); + const [starClicked, setStarClicked] = useState(false); + const dispatch = useDispatch(); + const call = props.call; const time = new Date(call.time); - var rowSelected={}; + const activeCall = props.activeCall; + + const handleStarClicked = (e) => { + e.preventDefault(); + e.stopPropagation(); + e.nativeEvent.stopImmediatePropagation(); + if (!starClicked) { + setStarClicked(true); + dispatch(addStar(props.call._id)); + } else { + setStarClicked(false); + dispatch(removeStar(props.call._id)); + } + } + + var rowSelected = {}; let starButton; var starClickable = {}; - if (!this.state.starClicked) { - starClickable = {link: true }; + if (!starClicked) { + starClickable = { link: true }; } - if (!call.star && this.state.starVisible) { + if (!call.star && starVisible) { starButton = } @@ -91,41 +46,37 @@ render() { } if (call.star && call.star > 1) { starButton = ( - - - ) + + + ) } - if (this.props.activeCall) { - rowSelected={positive: true, + if (activeCall) { + rowSelected = { + positive: true, color: "blue", - key: "blue", - inverted: "true" - } + key: "blue", + inverted: "true" + } } var talkgroup; - if ((typeof this.props.talkgroups == 'undefined') || (typeof this.props.talkgroups[call.talkgroupNum] == 'undefined')) { - talkgroup = call.talkgroupNum; + if ((typeof props.talkgroups == 'undefined') || (typeof props.talkgroups[call.talkgroupNum] == 'undefined')) { + talkgroup = call.talkgroupNum; } else { - talkgroup = this.props.talkgroups[call.talkgroupNum].description; + talkgroup = props.talkgroups[call.talkgroupNum].description; } return ( - this.props.onClick({call: call}, e)} {...rowSelected}> - {call.len} - {talkgroup} - {time.toLocaleTimeString()} - {starButton} + props.onClick({ call: call }, e)} {...rowSelected}> + {call.len} + {talkgroup} + {time.toLocaleTimeString()} + setStarVisible(true)} onMouseLeave={() => setStarVisible(false)} onClick={handleStarClicked}>{starButton} ); } -} - -export default connect( - mapStateToProps, - mapDispatchToProps -)(CallItem) +export default CallItem; diff --git a/frontend/src/Call/CallPlayer.js b/frontend/src/Call/CallPlayer.js index 7f8c751..ee39862 100644 --- a/frontend/src/Call/CallPlayer.js +++ b/frontend/src/Call/CallPlayer.js @@ -1,12 +1,18 @@ -import React from "react"; -import { Link } from 'react-router-dom'; +import React, { useEffect, useLayoutEffect, useState, useRef } from "react"; +import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'; + import MediaPlayer from "./MediaPlayer"; -import FilterModal from "./FilterModalContainer"; -import GroupModal from "./GroupModalContainer"; +import FilterModal from "./FilterModal"; +import GroupModal from "./GroupModal"; import SupportModal from "./SupportModal"; -import CalendarModal from "./CalendarModalContainer"; +import CalendarModal from "./CalendarModal"; import CallInfo from "./CallInfo"; import ListCalls from "./ListCalls"; +import { useSelector, useDispatch } from 'react-redux' +import { setLive, setFilter,setDateFilter } from "../features/callPlayer/callPlayerSlice"; +import { getCalls, getOlderCalls, getNewerCalls, addCall } from "../features/calls/callsSlice"; +import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice' +import { useInView } from 'react-intersection-observer'; import { Container, Label, @@ -14,304 +20,251 @@ import { Sticky, Menu, Icon, - Sidebar, - Visibility + Sidebar } from "semantic-ui-react"; import "./CallPlayer.css"; -//import setupSocket from '../socket/SetupSocket.js' import queryString from '../query-string'; +import io from 'socket.io-client'; - +const socket = io(process.env.REACT_APP_BACKEND_SERVER); // ---------------------------------------------------- -class CallPlayer extends React.Component { +function CallPlayer(props) { - constructor(props) { - super(props); - this.loadNewerCalls = this.loadNewerCalls.bind(this); - this.loadOlderCalls = this.loadOlderCalls.bind(this); - this.playCall = this.playCall.bind(this); - this.updateUri = this.updateUri.bind(this); - this.switchAutoPlay = this.switchAutoPlay.bind(this); - this.callEnded = this.callEnded.bind(this); - this.addCall = this.addCall.bind(this); - this.handlePusherClick = this.handlePusherClick.bind(this); - this.handleSidebarToggle = this.handleSidebarToggle.bind(this); - this.handleFilterClose = this.handleFilterClose.bind(this); - this.handleGroupClose = this.handleGroupClose.bind(this); - this.handleCalendarToggle = this.handleCalendarToggle.bind(this); - this.handleCalendarClose = this.handleCalendarClose.bind(this); - this.handleLiveToggle = this.handleLiveToggle.bind(this); - this.handlePlayPause = this.handlePlayPause.bind(this); - this.getFilter = this.getFilter.bind(this); - this.socket = window.socket; - this.setupSocket = this.setupSocket.bind(this); - this.endSocket = this.endSocket.bind(this); - this.changeUrl = this.changeUrl.bind(this); - this.audioRef = React.createRef(); - this.currentCallRef = React.createRef(); - this.state = { - requestMessage: "", - callUrl: "", - autoPlay: true, - callId: false, - playTime: 0, - callScroll: false, - callSelect: false, - urlOptions: false, - isPlaying: false, - sidebarOpened: false, - filterVisible: false, - groupVisible: false, - calendarVisible: false + const { shortName } = useParams(); + const { ref: loadOlderRef, inView: loadOlderInView } = useInView({ + /* Optional options */ + threshold: 0.5 + }); + const { ref: loadNewerRef, inView: loadNewerInView } = useInView({ + /* Optional options */ + threshold: 0.5 + }); + const { data: groupsData, isSuccess: isGroupsSuccess } = useGetGroupsQuery(shortName); + const { loading: callsLoading, data: callsData } = useSelector((state) => state.calls); + const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName); + + + const [autoPlay, setAutoPlay] = useState(true); + const [currentCall, setCurrentCall] = useState(false); + const [urlOptions, setUrlOptions] = useState(false); + const [isPlaying, setIsPlaying] = useState(false); + const [sidebarOpened, setSidebarOpened] = useState(false); + const [filterVisible, setFilterVisible] = useState(false); + const [groupVisible, setGroupVisible] = useState(false); + const [calendarVisible, setCalendarVisible] = useState(false); + const [isConnected, setIsConnected] = useState(socket.connected); + const [loadCallId, setLoadCallId] = useState(false); + + const navigate = useNavigate(); + const dispatch = useDispatch(); + const positionRef = useRef(); // lets us get the Y Scroll offset for the Call List + const pageYOffset = useRef(); // Store the current Scroll Offset in a way that guarantees the latest value is available when Call Data is updated + const shouldPlayAddCallRef = useRef(); // we need to do this to make the current value of isPlaying available in the socket message callback + shouldPlayAddCallRef.current = (!isPlaying && autoPlay)?true:false; + + const filterType = useSelector((state) => state.callPlayer.filterType); + const filterGroupId = useSelector((state) => state.callPlayer.filterGroupId); + const filterTalkgroups = useSelector((state) => state.callPlayer.filterTalkgroups); + const filterStarred = useSelector((state) => state.callPlayer.filterStarred); + const filterDate = useSelector((state) => state.callPlayer.filterDate); + const live = useSelector((state) => state.callPlayer.live); + const uri = queryString.parse(useLocation().search); + const pathname = useLocation().pathname; + + let currentCallId = false; + + + if (currentCall) { + currentCallId = currentCall._id; + } + + const handlePlayPause = (playing) => { + setIsPlaying(playing); + } + + const handlePusherClick = () => { + if (sidebarOpened) setSidebarOpened(false); + } + + const handleAutoPlay = (currentAutoPlay) => { + setAutoPlay(!currentAutoPlay); + } + const handleSidebarToggle = () => setSidebarOpened(!sidebarOpened); + const handleFilterToggle = () => setFilterVisible(!filterVisible); + const handleCalendarToggle = () => setCalendarVisible(!calendarVisible); + + const playCall = (data) => { + setCurrentCall(data.call); + setIsPlaying(true); + } + + + const callEnded = () => { + if (callsData) { + const currentIndex = callsData.ids.findIndex(callId => callId === currentCallId); + if (autoPlay && (currentIndex > 0)) { + const nextCallId = callsData.ids[currentIndex - 1]; + const nextCall = callsData.entities[nextCallId]; + + setCurrentCall(nextCall); + setIsPlaying(true); + } else { + setIsPlaying(false); + } + } else { + console.log("Somehow called, callEnded() but callsData was false"); } } - switchAutoPlay = () => this.setState({ - autoPlay: !this.state.autoPlay - }) - handlePlayPause = (playing) => this.setState({ - isPlaying: playing - }) - handlePusherClick = () => { - const { sidebarOpened } = this.state + const getFilterDescription = () => { - if (sidebarOpened) this.setState({ sidebarOpened: false }) - } - - handleSidebarToggle = () => this.setState({ sidebarOpened: !this.state.sidebarOpened }) - - handleFilterToggle = () => this.setState({ - filterVisible: !this.state.filterVisible - }) - - handleContextRef = contextRef => this.setState({ contextRef }) - changeUrl = url => this.props.callActions.changeUrl(url) - - loadNewerCalls() { - - console.log("Loading Newer Calls"); - this.props.callActions.fetchNewerCalls(this.props.newestCallTime.getTime()); - } - - loadOlderCalls() { - - console.log("Loading Older Calls"); - this.props.callActions.fetchOlderCalls(this.props.oldestCallTime.getTime()); - - } - - handleCalendarToggle = () => this.setState({ - calendarVisible: !this.state.calendarVisible - }) - - getFilter() { var filter = { type: 'all', code: "", filterStarred: false }; - switch (this.props.filterType) { + + switch (filterType) { case 1: filter.type = "group"; - filter.code = this.props.filterGroupId; + filter.code = filterGroupId break; case 2: filter.type = "talkgroup"; - filter.code = this.props.filterTalkgroups; + filter.code = filterTalkgroups break; default: case 0: filter.type = "all"; filter.code = "" } - filter.filterStarred = this.props.filterStarred; + filter.filterStarred = filterStarred return filter; } - endSocket() { - this.socket.removeAllListeners("new message"); - this.socket.removeAllListeners("reconnect"); - } - setupSocket() { - this.socket.on('new message', this.addCall); - this.socket.on('reconnect', (attempts) => { - console.log("Socket Reconnected after attempts: " + attempts); // true - if (this.props.live) { - var filter = this.getFilter(); - this.startSocket(this.props.shortName, filter.type, filter.code, filter.filterStarred); - } - }) - } - startSocket(shortName, filterType = "", filterCode = "", filterStarred = false) { - this.socket.emit("start", { - filterCode: filterCode, - filterType: filterType, - filterName: "OpenMHz", - filterStarred: filterStarred, - shortName: shortName - }); - } - stopSocket() { - this.socket.emit("stop"); - } - handleLiveToggle() { - if (!this.props.live) { - this.props.callActions.setDateFilter(false); - this.props.callActions.setLive(false); - this.setState({ callUrl: "", callId: false }); - this.props.callActions.fetchCalls(); - var filter = this.getFilter(); - this.startSocket(this.props.shortName, filter.type, filter.code, filter.filterStarred); + + + const handleSocketMessage = (data) => { + const message = JSON.parse(data) + switch (message.type) { + case 'calls': + + pageYOffset.current = positionRef.current.clientHeight; + + if (shouldPlayAddCallRef.current) { + setCurrentCall(message); + } + dispatch(addCall(message)); + + console.log("Got: " + message._id); + break + default: + break } } - updateUri(props, state) { + const startSocket = () => { + const filter = getFilterDescription(); + + socket.emit("start", { + filterCode: filter.code, + filterType: filter.type, + filterName: "OpenMHz", + filterStarred: filter.starred, + shortName: shortName + }); + } + const stopSocket = () => { + socket.emit("stop"); + } + + const updateUri = () => { var search = "?" - switch (props.filterType) { + switch (filterType) { case 1: - search = search + `filter-type=group&filter-code=${props.filterGroupId}`; + search = search + `filter-type=group&filter-code=${filterGroupId}`; break; case 2: - search = search + `filter-type=talkgroup&filter-code=${props.filterTalkgroups}`; + search = search + `filter-type=talkgroup&filter-code=${filterTalkgroups}`; break; default: case 0: break; } - if (state.callId) { + if (loadCallId) { if (search.length !== 1) { search = search + '&'; } - search = search + `call-id=${state.callId}` + search = search + `call-id=${loadCallId}` } - if (props.filterDate) { + if (filterDate) { if (search.length !== 1) { search = search + '&'; } - search = search + `time=${props.filterDate}`; + search = search + `time=${filterDate}`; } - if (props.filterStarred) { + if (filterStarred) { if (search.length !== 1) { search = search + '&'; } search = search + `starred=true`; } + navigate(pathname + search, { replace: true }); - this.props.history.push({ - pathname: this.props.history.location.pathname, - search: search - }); } - handleCalendarClose(didUpdate) { - this.setState({ - calendarVisible: !this.state.calendarVisible - }); + const handleLiveToggle = (currentlyLive) => { + if (!live) { + dispatch(setDateFilter(false)); + dispatch(setLive(true)); + setCurrentCall(false); + dispatch(getCalls({})); + + startSocket(); + } + } + + const handleCalendarClose = (didUpdate) => { + setCalendarVisible(!calendarVisible); + if (didUpdate) { - this.props.callActions.setLive(false); - this.props.callActions.fetchCalls(); - - this.setState({ callUrl: "", callId: false }); - this.stopSocket(); - //this.socket.close(); - + dispatch(setLive(false)); + setCurrentCall(false); + stopSocket(); } } - handleGroupClose(didUpdate) { - this.setState({ - groupVisible: !this.state.groupVisible - }); - this.props.callActions.fetchCalls(); + const handleGroupClose = (didUpdate) => { + setGroupVisible(!groupVisible); } - handleFilterClose(didUpdate) { - this.setState({ - filterVisible: !this.state.filterVisible - }); + const handleFilterClose = (didUpdate) => { + setFilterVisible(!filterVisible); + if (didUpdate) { - this.setState({ callUrl: "", callId: false }); - this.props.callActions.fetchCalls(); + setCurrentCall(false); } } - callEnded(data) { - const audio = this.audioRef.current; - const currentIndex = this.props.callsAllIds.findIndex(callId => callId === this.state.callId); - if (this.state.autoPlay && (currentIndex > 0)) { - const nextCallId = this.props.callsAllIds[currentIndex - 1]; - const nextCall = this.props.callsById[nextCallId]; - var callUrl = nextCall.url; - this.setState({ callUrl: callUrl, callId: nextCallId, isPlaying: true }, () => { audio.playSource(callUrl) }); //scrollToComponent(this.currentCallRef.current); - if (this.currentCallRef.current) { - this.currentCallRef.current.scrollIntoView({ - behavior: "smooth", - block: "center", - }); - } - this.props.callActions.fetchCallInfo(nextCallId); - } else { - this.setState({ isPlaying: false }); - } - } - - playCall(data) { - const audio = this.audioRef.current; - var callUrl = data.call.url; - this.setState({ - callUrl: callUrl, - callId: data.call._id, - isPlaying: true - }, () => { audio.playSource(callUrl); }); //scrollToComponent(this.currentCallRef.current); - this.props.callActions.fetchCallInfo(data.call._id); - } - - addCall(data) { - const message = JSON.parse(data) - switch (message.type) { - case 'calls': - const refs = this.refs.current; - this.props.callActions.addCall(message); - const newCall = this.props.callsById[this.props.callsAllIds[0]]; - if (!this.state.isPlaying && this.state.autoPlay) { - this.playCall({ call: newCall }); - if (this.currentCallRef.current) { - this.currentCallRef.current.scrollIntoView({ - behavior: "smooth", - block: "center", - }); - } - } - break - default: - break - } - } - componentWillUnmount() { - this.endSocket(); - } - componentDidMount() { - //const parsed = queryString.parse(location.search); - //console.log(parsed); - this.props.callActions.setShortName(this.props.shortName); + const setStateFromUri = async () => { var filter = { filterDate: false, filterType: 0, // this is "all" filterTalkgroups: [], filterGroupId: false, filterStarred: false, - live: true + live: true, + shortName: shortName }; - const uri = queryString.parse(this.props.location.search); // is there a star filter? if (uri.hasOwnProperty('starred')) { const starred = uri['starred']; filter.filterStarred = starred === 'true' ? true : false; - this.setState({ urlOptions: true }); + if (!urlOptions) setUrlOptions(true); } // is there a time based filter? @@ -319,42 +272,25 @@ class CallPlayer extends React.Component { const date = new Date(parseInt(uri['time'])); filter.filterDate = date.getTime(); filter.live = false; - this.setState({ urlOptions: true }); + if (!urlOptions) setUrlOptions(true); } // is this just for one call? if (uri.hasOwnProperty('call-id')) { const _id = uri['call-id']; - const date = new Date(parseInt(uri['time'])); - - filter.live = false; - this.setState({ - callId: _id, - urlOptions: true, - autoPlay: false, - callScroll: true, - callSelect: true - }); - this.props.callActions.fetchCallInfo(_id); - this.props.callActions.setCallTime(date); - - + setLoadCallId(_id); + setAutoPlay(false); + if (!urlOptions) setUrlOptions(true); } - - var filterType = "all"; - var filterCode = ""; - // is there a Filter set? if ((uri.hasOwnProperty('filter-code')) && (uri.hasOwnProperty('filter-type'))) { - this.setState({ urlOptions: true }); + if (!urlOptions) setUrlOptions(true); // The Filter is a group if (uri['filter-type'] === "group") { filter.filterType = 1; filter.filterGroupId = uri["filter-code"]; - filterType = "group"; - filterCode = uri["filter-code"]; } // The Filter is talkgroups @@ -362,256 +298,227 @@ class CallPlayer extends React.Component { const tg = uri["filter-code"].split(',').map(Number); filter.filterType = 2; filter.filterTalkgroups = tg; - filterType = "talkgroup"; - filterCode = tg; } } - this.props.callActions.setFilter(filter); - - // When a time/date is provided in the URL, it will be added to the filter - // When fetchCalls is called it will selected calls that are older - this.props.callActions.fetchCalls(); - this.props.talkgroupActions.fetchTalkgroups(this.props.shortName); - this.props.groupActions.fetchGroups(this.props.shortName); - this.props.systemActions.fetchSystems(); - this.setupSocket(); - - if (filter.live) { - this.startSocket(this.props.shortName, filterType, filterCode, filter.filterStarred); - } - } - compareArray(a1, a2) { - var i = a1.length; - while (i--) { - if (a1[i] !== a2[i]) - return false; - } - return true + dispatch(setFilter(filter)); } - componentWillUpdate(nextProps, nextState) { - if (!this.props.groups && nextProps.groups) { - if (!this.state.urlOptions && (nextProps.groups.length > 0)) { - this.setState({ - groupVisible: true - }); - } + useEffect(() => { + if (loadNewerInView && callsData && (callsData.ids.length > 0)) { + dispatch(getNewerCalls({})); } + }, [loadNewerInView]); - const filterChanged = (nextProps.filterType !== this.props.filterType) || !this.compareArray(nextProps.filterTalkgroups, this.props.filterTalkgroups) || (nextProps.filterGroupId !== this.props.filterGroupId) || (nextProps.filterDate !== this.props.filterDate) || (nextProps.filterStarred !== this.props.filterStarred); - if (filterChanged) { - var typeString = 'all'; - var filterCode = ''; - switch (nextProps.filterType) { - case 1: - typeString = 'group'; - filterCode = nextProps.filterGroupId; - break; - case 2: - typeString = 'talkgroup'; - filterCode = nextProps.filterTalkgroups; - break; - default: - case 0: - typeString = "all"; - filterCode = ''; - break; - } - - this.updateUri(nextProps, nextState); - if (this.props.live) { - this.startSocket(this.props.shortName, typeString, filterCode, nextProps.filterStarred); - } + useEffect(() => { + if (loadOlderInView && callsData && (callsData.ids.length > 0)) { + dispatch(getOlderCalls({})); } + }, [loadOlderInView]); - const callsChanged = nextProps.callsAllIds[0] !== this.props.callsAllIds[0]; - if (callsChanged) { - const { contextRef } = this.state; - this.scrollPos = contextRef.scrollTop; - this.prevHeight = contextRef.clientHeight; - this.autoScroll = true; - } - /* // if you do this, you also need to update time in the URI to be the call time... - if (this.state.callId != nextState.callId) { - this.updateUri(nextProps, nextState); - }*/ - - if (this.state.callId && !this.state.callUrl) { - const call = this.props.callsById[this.state.callId]; + useEffect(() => { + if ( loadCallId && callsData) { + const call = callsData.entities[loadCallId]; if (call) { - this.setState({ callUrl: call.url }); + setCurrentCall(call); } } + }, [callsData]) + + useLayoutEffect( () => { + const scrollAmount = parseInt(positionRef.current.clientHeight) - parseInt(pageYOffset.current); + if (scrollAmount > 0) { + console.log("useLayoutEffect for callsData - ref: " + pageYOffset.current + " current: " + positionRef.current.clientHeight + " Scroll Amount: " + scrollAmount) + window.scrollBy(0, scrollAmount); + } + }, [callsData]) + +/* + useEffect(() => { + + }, [callsData]); +*/ + useEffect(() => { + setStateFromUri(); + return () => { + stopSocket(); + }; + }, []); + + useEffect(() => { + socket.on('connect', () => { + setIsConnected(true); + }); + + socket.on('disconnect', () => { + setIsConnected(false); + }); + + socket.on('reconnect', (attempts) => { + console.log("Socket Reconnected after attempts: " + attempts); // true + + if (live) { + this.startSocket(); + } + }) + + socket.on("new message", handleSocketMessage ); + + return () => { + socket.off('connect'); + socket.off('disconnect'); + socket.off('pong'); + }; + }, []); + + useEffect(() => { + dispatch(getCalls({})); + if (live) { + startSocket(); + } + }, [shortName, filterGroupId, filterTalkgroups, filterType, filterDate, filterStarred]) + + + // Update the Browser URI when any relevant values change + useEffect(() => { + updateUri(); + }, [filterGroupId, filterTalkgroups, filterType, filterDate, filterStarred, loadCallId]) + + + useEffect(() => { + if (!urlOptions && groupsData && (groupsData.length > 0)) { + setGroupVisible(true); + } + }, [groupsData]) + + + + var archiveLabel = ""; + if (filterDate) { + const filterDateObj = new Date(filterDate); + archiveLabel = filterDateObj.toLocaleDateString() + " " + filterDateObj.toLocaleTimeString() } - componentDidUpdate(prevProps, prevState) { - const { contextRef } = this.state - //console.log( contextRef.clientHeight - this.prevHeight ); - if (this.autoScroll) { - this.autoScroll = false; - window.scrollBy(0, contextRef.clientHeight - this.prevHeight); + var callInfoHeader = "Call Info"; + var callLink = "" + var callDownload = "" + if (currentCall) { + if ((talkgroupsData) && talkgroupsData[currentCall.talkgroupNum]) { + callInfoHeader = talkgroupsData[currentCall.talkgroupNum].description; } + const callDate = new Date(currentCall.time); + var search = "" + switch (filterType) { - // scroll to a call once the calls have loaded - if (this.state.callScroll && (this.props.callsAllIds.length > prevProps.callsAllIds.length)) { - const call = this.props.callsById[this.state.callId]; - if (call) { - this.setState({ callScroll: false }); - if (this.currentCallRef.current) { - this.currentCallRef.current.scrollIntoView({ - behavior: "auto", - block: "center", - }); - } - this.scrollPos = contextRef.scrollTop; - this.prevHeight = contextRef.clientHeight; - } - } - - if (this.state.callSelect) { - const call = this.props.callsById[this.state.callId]; - if (call) { - const audio = this.audioRef.current; - var callUrl = call.url; - this.setState({ - callUrl: callUrl, - isPlaying: true, - callSelect: false - }, () => { audio.playSource(callUrl); }); //scrollToComponent(this.currentCallRef.current); - } - } - } - - //https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux - //https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter - render() { - const { contextRef } = this.state - const { sidebarOpened } = this.state - var archiveLabel = ""; - if (this.props.filterDate) { - const filterDate = new Date(this.props.filterDate); - archiveLabel = filterDate.toLocaleDateString() + " " + filterDate.toLocaleTimeString() - } - - var callInfoHeader = "Call Info"; - - const currentCall = this.props.callsById[this.state.callId]; - - var callLink = "" - var callDownload = "" - if (currentCall) { - if ((this.props.talkgroups) && this.props.talkgroups[currentCall.talkgroupNum]) { - callInfoHeader = this.props.talkgroups[currentCall.talkgroupNum].description; - } - const callDate = new Date(currentCall.time); - callLink = "/system/" + this.props.shortName + "?call-id=" + currentCall._id + "&time=" + (callDate.getTime() + 1); - callDownload = currentCall.url; - } - var archive = process.env.REACT_APP_ARCHIVE_DAYS - - var filterLabel = "All" - switch (this.props.filterType) { case 1: - filterLabel = "Group" + search = `filter-type=group&filter-code=${filterGroupId}&`; break; - case 2: - filterLabel = "Talkgroups" + search = `filter-type=talkgroup&filter-code=${filterTalkgroups}&`; break; default: case 0: - filterLabel = "All" + break; + } - /* if (this.props.calls) { - var callRows = calls.map((call) => - - )) - }*/ - return ( -
- - - - - - - - Home - Systems - About - - - - - - - - Filter - - - - {this.props.system && this.props.system.name} - - - - - - { - archiveLabel - ? archiveLabel - : "Archive" - } - - - - - Live - - - - - - - - - - - - - - - - - - - - - - - - this.switchAutoPlay()}>Autoplay - - - - Download - Link - - - -
- - - - - - ); + callLink = "/system/" + shortName + "?" + search + "call-id=" + currentCall._id + "&time=" + (callDate.getTime() + 1); + callDownload = currentCall.url; } + + const archive = process.env.REACT_APP_ARCHIVE_DAYS + + var filterLabel = "All" + switch (filterType) { + case 1: + filterLabel = "Group" + break; + + case 2: + filterLabel = "Talkgroups" + break; + default: + case 0: + filterLabel = "All" + } + + return ( +
+ + + + + + + + Home + Systems + About + + + + + + + + Filter + + + + {/*system && system.name*/} + + + + + + { + archiveLabel + ? archiveLabel + : "Archive" + } + + + + + Live + + + + + + + +
+ +
+ + + + + + + + + + + + + handleAutoPlay(autoPlay)}>Autoplay + + + + Download + Link + + + +
+ ); } + export default CallPlayer; diff --git a/frontend/src/Call/CallPlayerContainer.js b/frontend/src/Call/CallPlayerContainer.js deleted file mode 100644 index fb12af3..0000000 --- a/frontend/src/Call/CallPlayerContainer.js +++ /dev/null @@ -1,69 +0,0 @@ -import { connect } from "react-redux" -import * as callActionCreators from "./call-actions" -import * as talkgroupActionCreators from "../Talkgroups/talkgroup-actions" -import * as groupActionCreators from "../Group/group-actions" -import * as systemActionCreators from "../System/system-actions" -import { bindActionCreators } from 'redux' -import CallPlayer from "./CallPlayer" -import { - useLocation, - useNavigate, - useParams -} from "react-router-dom"; - -// glorious solution here: https://stackoverflow.com/questions/71097375/how-can-i-use-withrouter-in-react-router-v6-for-passing-props -function withRouter(Component) { - function ComponentWithRouterProp(props) { - let location = useLocation(); - let navigate = useNavigate(); - let params = useParams(); - return ( - - ); - } - - return ComponentWithRouterProp; -} - -function mapStateToProps(state, props) { - const shortName = props.router.params.shortName; - return { - callsById: state.call.byId, - callsAllIds: state.call.allIds, - oldestCallTime: state.call.oldestCallTime, - newestCallTime: state.call.newestCallTime, - live: state.call.live, - filterDate: state.call.filterDate, - filterType: state.call.filterType, - filterTalkgroups: state.call.filterTalkgroups, - filterGroupId: state.call.filterGroupId, - filterStarred: state.call.filterStarred, - system: state.system.items.find((item) => item.shortName === shortName), - groups: state.group.items[shortName], - talkgroups: state.talkgroup.items[shortName], - callsIsWaiting: state.call.isWaiting, - systemIsWaiting: state.system.isWaiting, - talkgroupsIsWaiting: state.talkgroup.isWaiting, - groupsIsWaiting: state.group.isWaiting, - location: props.router.location, - shortName: shortName - } -} - -function mapDispatchToProps(dispatch) { - return { - groupActions: bindActionCreators(groupActionCreators, dispatch), - systemActions: bindActionCreators(systemActionCreators, dispatch), - callActions: bindActionCreators(callActionCreators, dispatch), - talkgroupActions: bindActionCreators(talkgroupActionCreators, dispatch) - } -} - - -export default withRouter(connect( - mapStateToProps, - mapDispatchToProps -)(CallPlayer)) diff --git a/frontend/src/Call/FilterModal.js b/frontend/src/Call/FilterModal.js index a8df8d3..bf55082 100644 --- a/frontend/src/Call/FilterModal.js +++ b/frontend/src/Call/FilterModal.js @@ -1,4 +1,7 @@ -import React, { Component } from "react"; +import React, { useState } from "react"; +import { setGroupFilter, setTalkgroupFilter, setAllFilter, setStarredFilter } from "../features/callPlayer/callPlayerSlice"; +import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice' +import { useSelector, useDispatch } from 'react-redux' import { Modal, Button, @@ -12,136 +15,132 @@ import { import "./FilterModal.css"; -class FilterModal extends Component { - constructor(props) { - super(props) - this.handleInputChange = this.handleInputChange.bind(this); - this.handleTabChange = this.handleTabChange.bind(this); - this.toggleStarred = this.toggleStarred.bind(this); - this.handleDone = this.handleDone.bind(this); - this.handleClose = this.handleClose.bind(this); +function FilterModal(props) { + const globalFilterStarred = useSelector((state) => state.callPlayer.filterStarred); + const { data:groupsData, isSuccess:isGroupsSuccess } = useGetGroupsQuery(props.shortName); + const { data:talkgroupsData, isSuccess:isTalkgroupsSuccess } = useGetTalkgroupsQuery(props.shortName); + const [selectedTalkgroup, setSelectedTalkgroup] = useState([]); + const [selectedGroup, setSelectedGroup] = useState(false); + const [filterStarred, setFilterStarred] = useState(false); + const [activeTab, setActiveTab] = useState(0); + const dispatch = useDispatch() - this.state = { - open: false, - selectedTalkgroup: this.props.selectedTalkgroups, - selectedGroup: this.props.selectedGroup, - filterStarred: this.props.filterStarred, - activeTab: this.props.activeTab + const handleTabChange = (e, data) => setActiveTab(data.activeIndex); + const handleGroupChange = (e, { name, value }) => setSelectedGroup(value); + const handleTalkgroupChange = (e, { name, value }) => setSelectedTalkgroup(value); + const toggleStarred = () => setFilterStarred(!filterStarred); + const handleClose = () => props.onClose(false); + const onClose = props.onClose; + + function handleDone(onClose) { + switch (activeTab) { + + case 1: + if (selectedGroup) { + dispatch(setGroupFilter(selectedGroup)); + props.onClose(true); + } else { + props.onClose(false); + } + break; + case 2: + if (selectedTalkgroup) { + dispatch(setTalkgroupFilter(selectedTalkgroup)) + props.onClose(true); + } else { + props.onClose(false); + } + break; + default: + case 0: + dispatch(setAllFilter()); + props.onClose(true); + break; + } + if (globalFilterStarred !== filterStarred) { + dispatch(setStarredFilter(filterStarred)); } -} - -handleTabChange = (e, data) => this.setState({activeTab: data.activeIndex}); -handleInputChange = (e, { name, value }) => this.setState({ [name]: value }); -toggleStarred = () => this.setState(prevState => ({ filterStarred: !prevState.filterStarred })); -handleClose = () => this.props.onClose(false); -handleDone(event) { - switch(this.state.activeTab) { - - case 1: - if (this.state.selectedGroup) { - this.props.callActions.setGroupFilter(this.state.selectedGroup); - this.props.onClose(true); - } else { - this.props.onClose(false); - } - break; - case 2: - if (this.state.selectedTalkgroup) { - this.props.callActions.setTalkgroupFilter(this.state.selectedTalkgroup); - this.props.onClose(true); - } else { - this.props.onClose(false); - } - break; - default: - case 0: - this.props.callActions.setAllFilter(); - this.props.onClose(true); - break; } - if (this.state.filterStarred !== this.props.filterStarred) { - this.props.callActions.setStarred(this.state.filterStarred); - this.props.onClose(true); + + + var obj; + let talkgroupList = []; + if (isTalkgroupsSuccess) { + for (const num in talkgroupsData["talkgroups"]) { + const talkgroup = talkgroupsData["talkgroups"][num]; + obj = { + key: talkgroup.num, + value: talkgroup.num, + text: talkgroup.description + } + talkgroupList.push(obj); + } + } + + let groupList = []; + if (isGroupsSuccess) { + for (const num in groupsData) { + const group = groupsData[num] + obj = { + key: group._id, + value: group._id, + text: group.groupName + } + groupList.push(obj); + } } -} -componentDidUpdate(prevProps) { - - const filterChanged = ((prevProps.selectedTalkgroups !== this.props.selectedTalkgroups) || (prevProps.selectedGroup !== this.props.selectedGroup)); - if (filterChanged) { - this.setState({selectedTalkgroup: prevProps.selectedTalkgroups, selectedGroup: prevProps.selectedGroup, activeTab: prevProps.activeTab}); - } -} - - render() { - var obj; - var talkgroupList = []; - if (this.props.talkgroups) { - for (const num in this.props.talkgroups) { - const talkgroup = this.props.talkgroups[num]; - obj = { - key: talkgroup.num, - value: talkgroup.num, - text: talkgroup.description - } - talkgroupList.push(obj); + const panes = [ + { + menuItem: 'All', render: () => { + return ( + +
All Calls
+

Dispaly all of the calls.

+ + ) } - } - var groupList = []; - if (this.props.groups) { - for (const num in this.props.groups) { - const group = this.props.groups[num]; - obj = { - key: group._id, - value: group._id, - text: group.groupName - } - groupList.push(obj); + }, + { + menuItem: 'Groups', render: () => { + return ( + + + + + ) } - } - const panes = [ - { menuItem: 'All', render: () => - { return ( - -
All Calls
-

Dispaly all of the calls.

- - )}}, - { menuItem: 'Groups', render: () => - { return ( - - + }, + { + menuItem: 'Talkgroups', render: () => { + return ( + + + + ) + } + }, + ] + return ( - - )} }, - { menuItem: 'Talkgroups', render: () => - { return ( - - - - )} }, -] - return ( + + Select a Filter + + + + + + + + + + + - - Select a Filter - - - - - - - - - - - - - ) - } + ) } export default FilterModal; diff --git a/frontend/src/Call/FilterModalContainer.js b/frontend/src/Call/FilterModalContainer.js deleted file mode 100644 index 0181368..0000000 --- a/frontend/src/Call/FilterModalContainer.js +++ /dev/null @@ -1,34 +0,0 @@ -import { connect } from "react-redux" -import * as talkgroupActionCreators from "../Talkgroups/talkgroup-actions" -import * as groupActionCreators from "../Group/group-actions" -import * as callActionCreators from "./call-actions" -import { bindActionCreators } from 'redux' -import FilterModal from "./FilterModal" - -function mapStateToProps(state, props) { - return { - groups: state.group.items[props.shortName], - talkgroups: state.talkgroup.items[props.shortName], - talkgroupsIsWaiting: state.talkgroup.isWaiting, - groupsIsWaiting: state.group.isWaiting, - shortName: props.shortName, - activeTab: state.call.filterType, - selectedTalkgroups: state.call.filterTalkgroups, - selectedGroup: state.call.filterGroupId, - filterStarred: state.call.filterStarred - } -} - -function mapDispatchToProps(dispatch) { - return { - groupActions: bindActionCreators(groupActionCreators, dispatch), - talkgroupActions: bindActionCreators(talkgroupActionCreators, dispatch), - callActions: bindActionCreators(callActionCreators, dispatch) - } -} - - -export default connect( - mapStateToProps, - mapDispatchToProps -)(FilterModal) diff --git a/frontend/src/Call/GroupModal.js b/frontend/src/Call/GroupModal.js index 328fbd5..59ebcbe 100644 --- a/frontend/src/Call/GroupModal.js +++ b/frontend/src/Call/GroupModal.js @@ -1,4 +1,8 @@ -import React, { Component } from "react"; +import React, { Component, useState } from "react"; +import { useGetGroupsQuery } from '../features/api/apiSlice' +import { setGroupFilter } from "../features/callPlayer/callPlayerSlice"; +import { useSelector, useDispatch } from 'react-redux' + import { Modal, Button, @@ -7,7 +11,65 @@ import { } from "semantic-ui-react"; import "./FilterModal.css"; +function GroupModal (props) { + const shortName = useSelector((state) => state.callPlayer.shortName); + const { data, isError, isLoading, isSuccess,error } = useGetGroupsQuery(props.shortName); + const [open, setOpen] = useState(false); + const [selectedGroup, setSelectedGroup] = useState(false); + const dispatch = useDispatch() + const onClose = props.onClose; + function handleDone(onClose) { + + if (selectedGroup) { + dispatch(setGroupFilter(selectedGroup)) + //dispatch({type: types.SET_GROUP_FILTER, groupId: selectedGroup }) + onClose(true); + } else { + onClose(false); + } +} + + + let groupOptions = [] + + if (isSuccess) { + + for (const num in data) { + const group = data[num]; + var obj = { + key: group._id, + value: group._id, + text: group.groupName + } + groupOptions.push(obj); + } +} + + + return ( + + setOpen(false)} onOpen={() => setOpen(true)} size='tiny'> + + Select a Group + + +

Choose the type of calls you want to listen to

+ setSelectedGroup(data.value)} /> + + + + + + + + + + ) +} +/* class GroupModal extends Component { constructor(props) { super(props) @@ -34,7 +96,7 @@ handleDone(event) { this.props.onClose(false); } -} +} componentDidUpdate(prevProps) { const filterChanged = (prevProps.selectedGroup !== this.props.selectedGroup); @@ -80,6 +142,6 @@ componentDidUpdate(prevProps) { ) } -} +}*/ export default GroupModal; diff --git a/frontend/src/Call/GroupModalContainer.js b/frontend/src/Call/GroupModalContainer.js deleted file mode 100644 index b5109f0..0000000 --- a/frontend/src/Call/GroupModalContainer.js +++ /dev/null @@ -1,27 +0,0 @@ -import { connect } from "react-redux" -import * as groupActionCreators from "../Group/group-actions" -import * as callActionCreators from "./call-actions" -import { bindActionCreators } from 'redux' -import GroupModal from "./GroupModal" - -function mapStateToProps(state, props) { - return { - groups: state.group.items[props.shortName], - groupsIsWaiting: state.group.isWaiting, - shortName: props.shortName, - selectedGroup: state.call.filterGroupId - } -} - -function mapDispatchToProps(dispatch) { - return { - groupActions: bindActionCreators(groupActionCreators, dispatch), - callActions: bindActionCreators(callActionCreators, dispatch) - } -} - - -export default connect( - mapStateToProps, - mapDispatchToProps -)(GroupModal) diff --git a/frontend/src/Call/ListCalls.js b/frontend/src/Call/ListCalls.js index 57b22bc..ed11a25 100644 --- a/frontend/src/Call/ListCalls.js +++ b/frontend/src/Call/ListCalls.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useRef } from "react"; import CallItem from "./CallItem"; import { Icon, @@ -8,11 +8,21 @@ import { import "./CallPlayer.css"; // ---------------------------------------------------- -class ListCalls extends React.Component { +const ListCalls = (props) => { + const activeCallRef = useRef(); //https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux //https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter - render() { + + useEffect(() => { + if (activeCallRef.current) { + activeCallRef.current.scrollIntoView({ + block: "center", + }); + } + }); + + const callsData = props.callsData; return ( @@ -24,23 +34,27 @@ class ListCalls extends React.Component { - + {callsData != false && + - {this.props.callsAllIds.map((callId, index) => { - if (callId === this.props.activeCallId) { - return () + { + props.callsData.ids.map((callId, index) => { + if (callId === props.activeCallId) { + return () } else { - return + return } }) - } + + } + }
- + ); - } + } export default ListCalls; diff --git a/frontend/src/Call/MediaPlayer.js b/frontend/src/Call/MediaPlayer.js index 0e491f6..0afcfe5 100644 --- a/frontend/src/Call/MediaPlayer.js +++ b/frontend/src/Call/MediaPlayer.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { Menu, Icon, @@ -8,29 +8,29 @@ import { import ReactAudioPlayer from 'react-audio-player' -class MediaPlayer extends React.Component { - constructor(props) { - super(props); - this.updatePlayProgress = this.updatePlayProgress.bind(this); - this.handlePlay = this.handlePlay.bind(this); - this.handlePause = this.handlePause.bind(this); - this.playPause = this.playPause.bind(this); - this.audioRef = React.createRef(); - this.state = { - sourceIndex: 0, - playProgress: 0, - isPlaying: false - } - } - handlePause = () => { this.setState({ isPlaying: false }); this.props.onPlayPause(false); } - handlePlay = () => { this.setState({ isPlaying: true }); this.props.onPlayPause(true); } - playPause = () => { const audio = this.audioRef.current.audioEl.current; if (this.state.isPlaying) { audio.pause(); } else { audio.play(); } } - playSource(callUrl) { - const audio = this.audioRef.current.audioEl.current; - var onEnded = this.props.onEnded; - audio.src = callUrl; +const MediaPlayer = (props) => { + const audioRef = React.createRef(); + const [sourceIndex, setSourceIndex] = useState(0); + const [playProgress, setPlayProgress] = useState(0); + const [playTime, setPlayTime] = useState(0); + const [isPlaying, setIsPlaying] = useState(false); + const parentHandlePlayPause = props.onPlayPause + + const handlePause = () => { setIsPlaying(false); parentHandlePlayPause(false); } + const handlePlay = () => { setIsPlaying(true); parentHandlePlayPause(true); } + const playPause = () => { const audio = audioRef.current.audioEl.current; if (isPlaying) { audio.pause(); } else { audio.play(); } } + + var call = props.call; + + useEffect(() => { + + const audio = audioRef.current.audioEl.current; + var onEnded = props.onEnded; + setSourceIndex(0); + if (call) { + audio.src = call.url; var playPromise = audio.play(); // In browsers that don’t yet support this functionality, @@ -43,82 +43,75 @@ class MediaPlayer extends React.Component { onEnded(); // Show a UI element to let the user manually start playback. }); + } else { + audio.src = false; } - } + } + }, [call]); - updatePlayProgress() { - const audio = this.audioRef.current.audioEl.current; + const updatePlayProgress = () => { + const audio = audioRef.current.audioEl.current; const { currentTime, duration } = audio; - var call = this.props.call; + // this checks to see if it should display the next Source ID - if (call && ((call.srcList.length - 1) >= (this.state.sourceIndex + 1)) && (currentTime > call.srcList[this.state.sourceIndex + 1].pos)) { - this.setState({ - sourceIndex: this.state.sourceIndex + 1 - }); + if (call && ((call.srcList.length - 1) >= (sourceIndex + 1)) && (currentTime > call.srcList[sourceIndex + 1].pos)) { + setSourceIndex(sourceIndex + 1); } // updates the play percentage progress and current playing time - this.setState({ - playProgress: currentTime / duration * 100, - playTime: Math.floor(currentTime) - }); + setPlayProgress(currentTime / duration * 100); + setPlayTime(Math.floor(currentTime)); + + } - componentDidUpdate(prevProps) { - if (this.props.call && (prevProps.call !== this.props.call)) { - this.setState({ - sourceIndex: 0 - }); + + + let playEnabled = { "disabled": true } + let sourceId = "-"; + + if (call) { + if (call.srcList.length > sourceIndex) { + sourceId = call.srcList[sourceIndex].src; } - + playEnabled = {}; } - - render() { - var playEnabled = { "disabled": true } - var sourceId = "-"; - - if (this.props.call) { - if (this.props.call.srcList.length > this.state.sourceIndex) { - sourceId = this.props.call.srcList[this.state.sourceIndex].src; - } - playEnabled = {}; - } - return ( - - + return ( + + - + - { - this.state.isPlaying - ? () - : () - } - - - - - + { + isPlaying + ? () + : () + } + + + + + - - - ) - } + + + ) } + export default MediaPlayer; diff --git a/frontend/src/Call/call-actions.js b/frontend/src/Call/call-actions.js deleted file mode 100644 index ac225d8..0000000 --- a/frontend/src/Call/call-actions.js +++ /dev/null @@ -1,358 +0,0 @@ -import axios from "axios"; - -import * as types from "./call-constants"; -import { push } from 'connected-react-router'; - -function beginFetchCallInfo() { - return { type: types.FETCH_CALL_INFO }; -} - -function fetchCallInfoSuccess(data) { - return { type: types.FETCH_SUCCESS_CALL_INFO, - data }; -} - -function fetchCallInfoError(data) { - return { type: types.FETCH_ERROR_CALL_INFO, - data }; -} - -function prependCall() { - return { type: types.PREPEND_CALL }; -} - -function beginAddStar() { - return { type: types.ADD_STAR }; -} - -function addStarSuccess(data) { - return { type: types.ADD_STAR_SUCCESS, data }; -} - -function addStarError(data) { - return { type: types.ADD_STAR_ERROR, data }; -} - -function beginFetchCall() { - return { type: types.FETCH_CALL }; -} - -function fetchCallSuccess(data) { - return { type: types.FETCH_SUCCESS_CALL, - data }; -} - - - -function fetchOlderCallSuccess(data) { - return { type: types.FETCH_SUCCESS_OLDER_CALL, - data }; -} - -function fetchNewerCallSuccess(data) { - return { type: types.FETCH_SUCCESS_NEWER_CALL, - data }; -} - -function fetchCallError(data) { - return { type: types.FETCH_ERROR_CALL, - data }; -} - -// The data field should be a JS date object -export function setCallTime(data) { - return {type: types.SET_CALL_TIME, data}; -} - -export function changeUrl(url) { - return dispatch => { - dispatch(push(url)); - }; -} - -// Example of an Async Action Creator -// http://redux.js.org/docs/advanced/AsyncActions.html - -function shouldFetchCalls(state, subreddit) { - return true; - if ((!state.call.items) || (state.call.items.length <1)) { - return true - } else if (state.call.isWaiting) { - return false - } else { - return false - } -} - - - - -function buildUrlParams(a) { - return Object.keys(a).map(function(k) { - return encodeURIComponent(k) + '=' + encodeURIComponent(a[k]) - }).join('&') -} - -function buildCallUrl(state, date, direction) { - var params = {}; - var url = ""; - - - if ((typeof direction === 'string') && (typeof date === 'number')) { - url = url + '/' + direction; - params["time"] = date; - } else { - if (state.call.filterDate){ - url = url + '/older' - params["time"] = state.call.filterDate; - } - } - if (state.call.filterStarred) { - params["filter-starred"] = true; - } - switch(state.call.filterType) { - case 1: - params["filter-type"] = "group"; - params["filter-code"] = state.call.filterGroupId; - break; - case 2: - params["filter-type"] = "talkgroup"; - params["filter-code"] = state.call.filterTalkgroups; - break; - default: - case 0: - } -/* - - if (this.filterCode != "") { - params["filter-code"] = this.filterCode; - } - - if (this.filterType == this.FilterType.Group) { - params["filter-type"] = "group"; - params["filter-name"] = this.filterName; - } - - if (this.filterType == this.FilterType.Talkgroup) { - params["filter-type"] = "talkgroup"; - } - - if (this.filterType == this.FilterType.Unit) { - params["filter-type"] = "unit"; - } - -*/ - // url = startUp.backend_server + "/" + startUp.shortName.toLowerCase() + "/calls" + url + '?' + buildUrlParams(params); - url = process.env.REACT_APP_BACKEND_SERVER + "/" + state.call.shortName + "/calls" + url + '?' + buildUrlParams(params); - console.log("Trying to fetch data from this url: " + url); - return url; -} - -export function fetchNewerCalls(timestamp) { - return (dispatch, getState) => { - const state = getState(); - if (shouldFetchCalls(state)) { - dispatch(beginFetchCall()); - const url = buildCallUrl(state, timestamp, "newer") - return axios - .get(url) - .then(response => { - if ((response.data) && (response.data.calls.length >0)) { - var data = {shortName: state.call.shortName, calls: response.data.calls} - dispatch(fetchNewerCallSuccess(data)); - } else { - dispatch(fetchCallError()); - let registerMessage = response.data.message; - return registerMessage; - } - }) - .catch(response => { - if (response instanceof Error) { - // Something happened in setting up the request that triggered an Error - console.log("Error", response.message); - } - }); - }; -}; -} - - -export function fetchOlderCalls( timestamp) { - return (dispatch, getState) => { - const state = getState(); - if (shouldFetchCalls(state)) { - dispatch(beginFetchCall()); - const url = buildCallUrl(state, timestamp, "older") - return axios - .get(url) - .then(response => { - if (response.data) { - var data = {shortName: state.call.shortName, calls: response.data.calls} - dispatch(fetchOlderCallSuccess(data)); - } else { - dispatch(fetchCallError()); - let registerMessage = response.data.message; - return registerMessage; - } - }) - .catch(response => { - if (response instanceof Error) { - // Something happened in setting up the request that triggered an Error - console.log("Error", response.message); - } - }); - }; -}; -} - - -export function addStar( callId) { - return (dispatch, getState) => { - const state = getState(); - dispatch(beginAddStar()); - - const url = process.env.REACT_APP_BACKEND_SERVER + "/" + state.call.shortName.toLowerCase() + "/star/" + callId - return axios - .post(url,{}, { - headers: { - 'Content-Type': 'application/x-www-form-urlencoded' - } - }).then(response => { - if (response.data.success) { - dispatch(addStarSuccess(response.data.call)); - } else { - dispatch(addStarError()); - let registerMessage = response.data.message; - return registerMessage; - } - }) - .catch(response => { - if (response instanceof Error) { - // Something happened in setting up the request that triggered an Error - console.log("Error", response.message); - } - }); - }; -}; - - - -export function fetchCallInfo( callId) { - return (dispatch, getState) => { - const state = getState(); - dispatch(beginFetchCallInfo()); - - const url = process.env.REACT_APP_BACKEND_SERVER + "/" + state.call.shortName.toLowerCase() + "/call/" + callId - return axios - .get(url) - .then(response => { - if (response.data.success) { - dispatch(fetchCallInfoSuccess(response.data.call)); - } else { - dispatch(fetchCallInfoError()); - let registerMessage = response.data.message; - return registerMessage; - } - }) - .catch(response => { - if (response instanceof Error) { - // Something happened in setting up the request that triggered an Error - console.log("Error", response.message); - } - }); - }; -}; - -export function fetchCalls() { - return (dispatch, getState) => { - const state = getState(); - if (shouldFetchCalls(state)) { - dispatch(beginFetchCall()); - const url=buildCallUrl(state); - return axios - .get(url) - .then(response => { - if (response.data) { - // check to make sure you actually got some calls back. - if (response.data.calls.length > 0) { - var data = {shortName: state.call.shortName, calls: response.data.calls} - dispatch(fetchCallSuccess(data)); - } else { - dispatch(fetchCallError()); - } - } else { - dispatch(fetchCallError()); - let registerMessage = response.data.message; - return registerMessage; - } - }) - .catch(response => { - if (response instanceof Error) { - // Something happened in setting up the request that triggered an Error - console.log("Error", response.message); - } - }); - }; -}; -} - -export function addCall(call) { - return (dispatch, getState) => { - dispatch({ type: types.UPSERT_CALL, data: call}); - }; -} - -export function setStarred(starred) { - return (dispatch, getState) => { - dispatch({ type: types.SET_STARRED_FILTER, data: starred}); - }; -} - -export function setLive(live) { - return (dispatch, getState) => { - dispatch({ type: types.SET_LIVE, data: live}); - }; -} - -export function setCurrentCallId(callId) { - return (dispatch, getState) => { - dispatch({ type: types.SET_CURRENT_CALL_ID, data: callId}); - }; -} - -// should be as a unix timestamp -export function setDateFilter(date) { - return (dispatch, getState) => { - dispatch({ type: types.SET_DATE_FILTER, date: date}); - }; -} - -export function setAllFilter() { - return (dispatch, getState) => { - dispatch({ type: types.SET_ALL_FILTER}); - }; -} - -export function setTalkgroupFilter(tgs) { - return (dispatch, getState) => { - dispatch({ type: types.SET_TALKGROUP_FILTER, talkgroups: tgs}); - }; -} - -export function setGroupFilter(groupId) { - return (dispatch, getState) => { - dispatch({ type: types.SET_GROUP_FILTER, groupId: groupId}); - }; -} - -export function setShortName(shortName) { - return (dispatch, getState) => { - dispatch({ type: types.SET_SHORT_NAME, data: shortName}); - }; -} - -export function setFilter(filter) { - return (dispatch, getState) => { - dispatch({ type: types.SET_FILTER, data: filter}); - }; -} diff --git a/frontend/src/Call/call-constants.js b/frontend/src/Call/call-constants.js deleted file mode 100644 index d6ac331..0000000 --- a/frontend/src/Call/call-constants.js +++ /dev/null @@ -1,23 +0,0 @@ -export const PREPEND_CALL = "PREPEND_CALL" -export const ADD_STAR = "ADD_STAR" -export const ADD_STAR_SUCCESS = "ADD_STAR_SUCCESS" -export const ADD_STAR_ERROR = "ADD_STAR_ERROR" -export const UPSERT_CALL = "UPSERT_CALL" -export const FETCH_CALL = "FETCH_CALL" -export const FETCH_SUCCESS_CALL = "FETCH_SUCCESS_CALL" -export const FETCH_SUCCESS_NEWER_CALL = "FETCH_SUCCESS_NEWER_CALL" -export const FETCH_SUCCESS_OLDER_CALL = "FETCH_SUCCESS_OLDER_CALL" -export const FETCH_ERROR_CALL = "FETCH_ERROR_CALL" -export const SET_SHORT_NAME = "SET_SHORT_NAME" -export const FETCH_CALL_INFO = "FETCH_CALL_INFO" -export const FETCH_SUCCESS_CALL_INFO = "FETCH_SUCCESS_CALL_INFO" -export const FETCH_ERROR_CALL_INFO = "FETCH_ERROR_CALL_INFO" -export const SET_ALL_FILTER = "SET_ALL_FILTER" -export const SET_GROUP_FILTER = "SET_GROUP_FILTER" -export const SET_TALKGROUP_FILTER = "SET_TALKGROUP_FILTER" -export const SET_DATE_FILTER = "SET_DATE_FILTER" -export const SET_FILTER = "SET_FILTER" -export const SET_STARRED_FILTER = "SET_STARRED_FILTER" -export const SET_LIVE = "SET_LIVE" -export const SET_CALL_TIME = "SET_CALL_TIME" -export const SET_CURRENT_CALL_ID = "SET_CURRENT_CALL_ID" diff --git a/frontend/src/Call/call-reducer.js b/frontend/src/Call/call-reducer.js deleted file mode 100644 index 8fe2935..0000000 --- a/frontend/src/Call/call-reducer.js +++ /dev/null @@ -1,230 +0,0 @@ -import { - FETCH_CALL_INFO, - FETCH_SUCCESS_CALL_INFO, - FETCH_ERROR_CALL_INFO, - FETCH_CALL, - PREPEND_CALL, - UPSERT_CALL, - FETCH_SUCCESS_CALL, - FETCH_SUCCESS_OLDER_CALL, - FETCH_SUCCESS_NEWER_CALL, - FETCH_ERROR_CALL, - SET_SHORT_NAME, - SET_ALL_FILTER, - SET_GROUP_FILTER, - SET_TALKGROUP_FILTER, - SET_DATE_FILTER, - SET_STARRED_FILTER, - SET_FILTER, - SET_CURRENT_CALL_ID, - SET_LIVE, - SET_CALL_TIME, - ADD_STAR_SUCCESS -} from "./call-constants"; - -function updateObject(oldObject, newValues) { - // Encapsulate the idea of passing a new object as the first parameter - // to Object.assign to ensure we correctly copy data instead of mutating - return Object.assign({}, oldObject, newValues); -} - -function updateCallInItems(calls, action) { -return calls.map( (item) => { - if (item._id !== action.data._id) { - // This isn't the item we care about - keep it as-is - return item; - } - - // Otherwise, this is the one we want - return an updated value - return { - ...action.data - }; - }); -} -/* -function updateObjectInArray(array, action) { - return array.map((item, index) => { - if (index !== action.index) { - // This isn't the item we care about - keep it as-is - return item - } - - // Otherwise, this is the one we want - return an updated value - return { - ...item, - ...action.item - } - }) -} - -function updateObjectInArray(array, shortName, updatedItem) { - return array.map( item => { - if(item.shortName !== shortName) { - // This isn't the item we care about - keep it as-is - return item; - } - - // Otherwise, this is the one we want - return an updated value - return { - ...item, - ...updatedItem - }; - }); -} -*/ -const now = new Date(); -const call = ( - state = { - isWaiting: false, - shortName: "", - byId: {}, - allIds: [], - oldestCallTime: now, - newestCallTime: now, - filterType: 0, - filterTalkgroups: [], - filterGroupId: false, - filterDate: false, - filterStarred: false, - currentCallId: false, - live: false - }, - action -) => { - switch (action.type) { - - case SET_CURRENT_CALL_ID: - return Object.assign({}, state, {currentCallId: action.data}); - - case SET_CALL_TIME: - return Object.assign({}, state, {newestCallTime: action.data, oldestCallTime: action.data }); - case SET_FILTER: - { - var filter={}; - filter.live = !action.data.live ? state.live : action.data.live; - filter.filterStarred = !action.data.filterStarred ? false : action.data.filterStarred; - filter.filterType = !action.data.filterType ? 0 : action.data.filterType; - filter.filterTalkgroups = !action.data.filterTalkgroups ? [] : action.data.filterTalkgroups; - filter.filterGroupId = !action.data.filterGroupId ? false : action.data.filterGroupId; - filter.filterDate = !action.data.filterDate ? 0 : action.data.filterDate; - return Object.assign({}, state, { - live: action.data.live, - filterType: action.data.filterType, - filterTalkgroups: action.data.filterTalkgroups, - filterGroupId: action.data.filterGroupId, - filterDate: action.data.filterDate, - filterStarred: action.data.filterStarred - }); - } - - case SET_LIVE: - return Object.assign({}, state, {live: action.data}); - - case SET_SHORT_NAME: - return Object.assign({}, state, {shortName: action.data}); - - case SET_DATE_FILTER: - return Object.assign({}, state, {filterDate: action.date}); - - case SET_STARRED_FILTER: - return Object.assign({}, state, {filterStarred: action.data}); - - case SET_ALL_FILTER: - return Object.assign({}, state, {filterType: 0, filterTalkgroups:[], filterGroupId: false}); - - case SET_GROUP_FILTER: - return Object.assign({}, state, {filterType: 1, filterTalkgroups:[], filterGroupId: action.groupId}); - - case SET_TALKGROUP_FILTER: - return Object.assign({}, state, {filterType: 2, filterTalkgroups: action.talkgroups, filterGroupId: false}); - - case FETCH_CALL_INFO: - case FETCH_CALL: - return Object.assign({}, state, { isWaiting: true}); - - case FETCH_SUCCESS_CALL_INFO: - return Object.assign({}, state, { - byId: {...state.byId, [action.data._id]: action.data }, - isWaiting: false - - }); - - case ADD_STAR_SUCCESS: - return Object.assign({}, state,{ - byId: {...state.byId, [action.data._id]: action.data }, - isWaiting: false - - }); - // This will set the items to the rx data - case FETCH_SUCCESS_CALL: - { - const byId = action.data.calls.reduce((acc, call) => ({ ...acc, [call._id]: call }), {}); - const allIds = action.data.calls.map(call => call._id); - return Object.assign({}, state, { - isWaiting: false, - shortName: action.data.shortName, - newestCallTime: new Date(action.data.calls[0].time), - oldestCallTime: new Date(action.data.calls[action.data.calls.length-1].time), - byId: { ...byId}, - allIds: [...allIds] - }); - } - - case UPSERT_CALL: - if (typeof state.byId[action.data._id] !== "undefined") { - return Object.assign({}, state, { - byId: {...state.byId, [action.data._id]: action.data }, - }); - } else { - return Object.assign({}, state, { - newestCallTime: new Date(action.data.time), - byId: {[action.data._id]: action.data, ...state.byId}, - allIds: [action.data._id, ...state.allIds] - }); - } - - case PREPEND_CALL: - return Object.assign({}, state, { - isWaiting: false, - newestCallTime: new Date(action.data.time), - byId: {[action.data._id]: action.data, ...state.byId}, - allIds: [action.data._id, ...state.allIds] - }); - -// This will add the array of Calls in the data to the beginning of the existing array of Calls - case FETCH_SUCCESS_NEWER_CALL: - const byId = action.data.calls.reduce((acc, call) => ({ ...acc, [call._id]: call }), {}); - const allIds = action.data.calls.map(call => call._id).reverse(); - return Object.assign({}, state, { - isWaiting: false, - shortName: action.data.shortName, - newestCallTime: new Date(action.data.calls[action.data.calls.length-1].time), - byId: {...state.byId, ...byId}, - allIds: [...allIds, ...state.allIds] - }); - -// This will add the array of Calls in the data to the end of the existing array of Calls - case FETCH_SUCCESS_OLDER_CALL: - { - const byId = action.data.calls.reduce((acc, call) => ({ ...acc, [call._id]: call }), {}); - const allIds = action.data.calls.map(call => call._id); - return Object.assign({}, state, { - isWaiting: false, - shortName: action.data.shortName, - oldestCallTime: new Date(action.data.calls[action.data.calls.length-1].time), - byId: {...state.byId, ...byId}, - allIds: [ ...state.allIds, ...allIds] - }); - } - case FETCH_ERROR_CALL_INFO: - case FETCH_ERROR_CALL: - return Object.assign({}, state, { - isWaiting: false - }); - - default: - return state; - } -}; - -export default call; diff --git a/frontend/src/Group/CreateGroup.js b/frontend/src/Group/CreateGroup.js deleted file mode 100644 index 2488c9d..0000000 --- a/frontend/src/Group/CreateGroup.js +++ /dev/null @@ -1,177 +0,0 @@ -import React, { Component } from "react"; -import ReactDOM from "react-dom"; -import { - Container, - Header, - Form, - Grid, - Rail, - Segment, - List, - Input, - Button, - Message, - Icon, - Table -} from "semantic-ui-react"; - -// ---------------------------------------------------- -const requestMessageStyle = { - color: "red" -}; - -// ---------------------------------------------------- -class CreateGroup extends Component { - constructor(props) { - super(props); - this.handleSubmit = this.handleSubmit.bind(this); - - // Set initial state - this.state = { - groupName: "", - group: { - name: "", - items: [] - }, - talkgroups: (this.props.talkgroups ? this.props.talkgroups : []) - }; - } - - componentDidMount() { - //this.props.groupActions.fetchGroups(this.props.shortName); - - this.props.talkgroupActions.fetchTalkgroups(this.props.shortName); - } - - componentWillReceiveProps(nextProps) { - this.setState({ talkgroups: nextProps.talkgroups }); - } - - removeTalkgroup(event, index) { - const item = { - num: this.state.group.items[index].num, - description: this.state.group.items[index].description - }; - - const talkgroups = this.state.talkgroups.slice(0); // copy - - for (var i = 0, len = talkgroups.length; i < len; i++) { - if (item.num < talkgroups[i].num) { - talkgroups.splice(i, 0, item); - break; - } - } - this.setState({ - group: { items: this.state.group.items - .slice(0, index) - .concat(this.state.group.items.slice(index + 1))}, - talkgroups: talkgroups - }); - } - -handleInputChange = (e, { name, value }) => this.setState({ [name]: value }); - - addTalkgroup(event, index) { - const item = { - num: this.state.talkgroups[index].num, - description: this.state.talkgroups[index].description - }; - - this.setState({ - group: { items: this.state.group.items.concat(item) }, - talkgroups: this.state.talkgroups - .slice(0, index) - .concat(this.state.talkgroups.slice(index + 1)) - }); - } - handleSubmit() { - var talkgroupNums = this.state.group.items.map(a => a.num); - const data = {shortName: this.props.shortName, groupName: this.state.groupName, talkgroups: JSON.stringify(talkgroupNums) } - this.props.groupActions.createGroup(data).then(requestMessage => { - if (requestMessage) { - // report to the user is there was a problem during registration - this.setState({ - requestMessage - }); - } else { - this.props.groupActions.changeUrl("/system/" + this.props.shortName + "/2"); - } - }); - } - - render() { - const talkgroups = this.state.talkgroups; - const group = this.state.group.items; - const railStyle = { - top: "15px", - minHeight: "200px" - }; - return ( -
- {talkgroups.length ? ( - - - - ) : ( - - - - - - Number - - Description - - - - - {talkgroups.map((talkgroup, i) => ( - - {talkgroup.num} - - {talkgroup.description} - - this.addTalkgroup(e, i)} - /> - - - ))} - -
- - - - - {group.map((talkgroup, i) => ( - - this.removeTalkgroup(e, i)} - /> - - {talkgroup.description} - - - - ))} - - - - - - )} -
- ); - } -} - -export default CreateGroup; diff --git a/frontend/src/Group/CreateGroupContainer.js b/frontend/src/Group/CreateGroupContainer.js deleted file mode 100644 index 24314ff..0000000 --- a/frontend/src/Group/CreateGroupContainer.js +++ /dev/null @@ -1,25 +0,0 @@ -import { connect } from "react-redux" -import * as groupActionCreators from "./group-actions" -import * as talkgroupActionCreators from "../Talkgroups/talkgroup-actions" -import { bindActionCreators } from 'redux' -import CreateGroup from "./CreateGroup" - -//groups: state.group.items[props.match.params.shortName], -function mapStateToProps(state,props) { - return { - talkgroups: state.talkgroup.items[props.match.params.shortName], - shortName: props.match.params.shortName - } -} - -function mapDispatchToProps(dispatch) { - return { - groupActions: bindActionCreators(groupActionCreators,dispatch), - talkgroupActions: bindActionCreators(talkgroupActionCreators, dispatch) - } -} - -export default connect( - mapStateToProps, - mapDispatchToProps -)(CreateGroup) diff --git a/frontend/src/Group/ListGroups.js b/frontend/src/Group/ListGroups.js deleted file mode 100644 index b3970bc..0000000 --- a/frontend/src/Group/ListGroups.js +++ /dev/null @@ -1,77 +0,0 @@ -import React, { Component } from "react"; -import ReactDOM from "react-dom"; -import { Link } from 'react-router-dom' -import { - Container, - Header, - Form, - Grid, - Segment, - Input, - Button, - Message, - Icon, - Table -} from "semantic-ui-react"; - -// ---------------------------------------------------- - - - -// ---------------------------------------------------- -class ListGroups extends Component { - constructor(props) { - super(props); - - } - - -//https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux -//https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter - render() { - const groups = this.props.groups; - if (groups) { - return ( - - - - - Name - Talkgroup Count - - - - - {groups.map((group, i) => ( - - {group.groupName} - {group.talkgroups.length} - this.props.reorderGroup(i, i-1)} - /> this.props.reorderGroup(i, i+1)} - /> this.props.deleteGroup(group._id)} - /> - - - ))} - -
- - ); - } else { - return ( -
- ); - } -} -} - -export default ListGroups; diff --git a/frontend/src/Group/group-actions.js b/frontend/src/Group/group-actions.js deleted file mode 100644 index 7d1c2d3..0000000 --- a/frontend/src/Group/group-actions.js +++ /dev/null @@ -1,73 +0,0 @@ -import axios from "axios"; -//import { browserHistory } from "react-router" -import * as types from "./group-constants"; -import { push } from 'connected-react-router'; - -// "Log In" action creators - - -function beginFetchGroup() { - return { type: types.FETCH_GROUP }; -} - -function fetchGroupSuccess(data) { - return { - type: types.FETCH_SUCCESS_GROUP, - data - }; -} - -function fetchGroupError(data) { - return { - type: types.FETCH_ERROR_GROUP, - data - }; -} - - -export function changeUrl(url) { - return dispatch => { - dispatch(push(url)); - }; -} - -// Example of an Async Action Creator -// http://redux.js.org/docs/advanced/AsyncActions.html - - -function shouldFetchGroups(state,shortName) { - if (!state.group.items || !state.group.items[shortName]) { - return true; - } else if (state.group.isWaiting) { - return false; - } else { - return false; - } -} - - -export function fetchGroups(shortName) { - return (dispatch, getState) => { - if (shouldFetchGroups(getState(), shortName)) { - dispatch(beginFetchGroup()); - return axios - .get(process.env.REACT_APP_BACKEND_SERVER + "/" + shortName + "/groups") - .then(response => { - if (true) { //response.data.success) { - const data = { shortName: shortName, groups: response.data }; - dispatch(fetchGroupSuccess(data)); - } else { - dispatch(fetchGroupError()); - let registerMessage = response.data.message; - return registerMessage; - } - }) - .catch(response => { - if (response instanceof Error) { - // Something happened in setting up the request that triggered an Error - console.log("Error", response.message); - } - }); - } - }; -} diff --git a/frontend/src/Group/group-constants.js b/frontend/src/Group/group-constants.js deleted file mode 100644 index 914364f..0000000 --- a/frontend/src/Group/group-constants.js +++ /dev/null @@ -1,3 +0,0 @@ -export const FETCH_GROUP = "FETCH_GROUP" -export const FETCH_SUCCESS_GROUP = "FETCH_SUCCESS_GROUP" -export const FETCH_ERROR_GROUP = "FETCH_ERROR_GROUP" diff --git a/frontend/src/Group/group-reducer.js b/frontend/src/Group/group-reducer.js deleted file mode 100644 index fb4993b..0000000 --- a/frontend/src/Group/group-reducer.js +++ /dev/null @@ -1,42 +0,0 @@ -import { - FETCH_GROUP, - FETCH_SUCCESS_GROUP, - FETCH_ERROR_GROUP -} from "./group-constants"; - - -const group = ( - state = { - orderChange: false, - isWaiting: false, - items: {}}, - action -) => { - switch (action.type) { - - - case FETCH_GROUP: - return Object.assign({}, state, { isWaiting: true}); - - - case FETCH_SUCCESS_GROUP: - return Object.assign({}, state, { - isWaiting: false, - items: { - ...state.items, - [action.data.shortName]: action.data.groups - } - }); - - case FETCH_ERROR_GROUP: - return Object.assign({}, state, { - isWaiting: false - }); - - - default: - return state; - } -}; - -export default group; diff --git a/frontend/src/Main/Main.js b/frontend/src/Main/Main.js index 8545836..52801ab 100644 --- a/frontend/src/Main/Main.js +++ b/frontend/src/Main/Main.js @@ -1,5 +1,5 @@ -import React, { Component } from "react"; -import { Link } from 'react-router-dom' +import React, { useState, useEffect, useRef } from "react"; +import { Link, useNavigate } from 'react-router-dom' import SystemCard from "../System/SystemCard"; import "./Main.css"; import { createMedia } from "@artsy/fresnel"; @@ -17,6 +17,9 @@ import { } from 'semantic-ui-react' +import { useDispatch } from 'react-redux' +import { useGetSystemsQuery } from "../features/api/apiSlice"; + /* Responsive component was removed from Semantic UI. This is discussed here: https://github.com/Semantic-Org/Semantic-UI-React/pull/4008 */ const AppMedia = createMedia({ @@ -80,15 +83,12 @@ General flow: - componentDidMount(): it will call fetchSystem() this will perform an HTTP request if Systems does not exist, and then add System to Props */ -class DesktopContainer extends Component { - state = {} - - hideFixedMenu = () => this.setState({ fixed: false }) - showFixedMenu = () => this.setState({ fixed: true }) - - render() { - const { children } = this.props - const { fixed } = this.state +const DesktopContainer = (props) => { + const [fixed, setFixed] = useState(false); + const hideFixedMenu = () => setFixed(false) + const showFixedMenu = () => setFixed(true) + + const { children } = props return ( @@ -128,26 +128,24 @@ class DesktopContainer extends Component { ) } -} + /* DesktopContainer.propTypes = { children: PropTypes.node, } */ -class MobileContainer extends Component { - state = {} +const MobileContainer = (props) => { - handlePusherClick = () => { - const { sidebarOpened } = this.state + const [sidebarOpened, setSidebarOpened] = useState(false); - if (sidebarOpened) this.setState({ sidebarOpened: false }) + const handlePusherClick = () => { + setSidebarOpened(!sidebarOpened) } - handleToggle = () => this.setState({ sidebarOpened: !this.state.sidebarOpened }) + const handleToggle = () => setSidebarOpened(!sidebarOpened) - render() { - const { children } = this.props - const { sidebarOpened } = this.state + + const { children } = props return ( @@ -162,7 +160,7 @@ class MobileContainer extends Component {
@@ -181,7 +179,7 @@ class MobileContainer extends Component { - + {process.env.REACT_APP_SITE_NAME} @@ -196,7 +194,6 @@ class MobileContainer extends Component { ) } -} /* MobileContainer.propTypes = { children: PropTypes.node, @@ -210,41 +207,56 @@ const ResponsiveContainer = ({ children }) => ( ) // ---------------------------------------------------- -class Main extends Component { - constructor(props) { - super(props); - this.advanceSystem = this.advanceSystem.bind(this); - this.state = { duration: 500, visible: true, currentSystem: 0} - } +const Main = (props) => { + const [visible, setVisible] = useState(true); + const [currentSystem, setCurrentSystem] = useState(0); + const navigate = useNavigate(); + const {data:systems, isSuccess} = useGetSystemsQuery(); //= selectAllSystems(); - - handleChange = (e, { name, value }) => this.setState({ [name]: value }) - - handleVisibility = () => this.setState({ visible: !this.state.visible }) - - advanceSystem() { - var currentSystem = this.state.currentSystem + 1; - if (currentSystem > this.props.system.items.length) { - currentSystem = 0; - } - this.setState({ visible: !this.state.visible, currentSystem }); - } - - componentDidMount() { - this.props.fetchSystems(); - this.interval = setInterval(() => this.advanceSystem(), 3000); - } + function useInterval(callback, delay) { + const savedCallback = useRef(); - componentWillUnmount() { - clearInterval(this.interval); + // Remember the latest callback. + useEffect(() => { + savedCallback.current = callback; + }, [callback]); + + // Set up the interval. + useEffect(() => { + function tick() { + savedCallback.current(); + } + if (delay !== null) { + let id = setInterval(tick, delay); + return () => clearInterval(id); + } + }, [delay]); } + const advanceSystem = () => { + if (isSuccess) { + let nextSystem = currentSystem + 1; + if (nextSystem > systems.systems.length) { + nextSystem = 0; + } + setCurrentSystem(nextSystem); + setVisible(!visible); + } + //this.setState({ visible: !this.state.visible, currentSystem }); + } + + useInterval( ()=>{ advanceSystem()}, 3000) + + + //https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux //https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter -render() { - const system = this.props.system.items[this.state.currentSystem]; + let system = false; + if (isSuccess) { + system = systems.systems[currentSystem]; + } return ( <> @@ -254,15 +266,15 @@ render() { - { system && ( + { system && ( - this.props.changeUrl("/system/" + system.shortName)}/> + navigate("/system/" + system.shortName)}/> )} -