cleaned up some errors

This commit is contained in:
Luke Berndt
2023-01-17 20:50:47 -05:00
parent 0a5e88c652
commit 1d55a63f7f
8 changed files with 37 additions and 66 deletions

View File

@@ -1,4 +1,4 @@
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";

View File

@@ -1,4 +1,4 @@
import React, { Component, useState } from "react";
import React, { useState } from "react";
import {
Modal,
Button,
@@ -8,12 +8,10 @@ import "./CalendarModal.css";
import { setDateFilter } from "../features/callPlayer/callPlayerSlice";
import DatePicker from 'react-datepicker';
import { useDispatch } from 'react-redux'
import { setDate, subDays } from 'date-fns'
import { subDays } from 'date-fns'
import 'react-datepicker/dist/react-datepicker.css';
function CalendarModal(props) {
const [open, setOpen] = useState(false);
const [startDate, setStartDate] = useState(new Date());
const dispatch = useDispatch()
const onClose = props.onClose;

View File

@@ -1,7 +1,6 @@
import React from "react";
import {
Header,
Button,
Divider,
List,
Segment,

View File

@@ -1,13 +1,12 @@
import React, { useState } from "react";
import {
Table,
Icon,
Label
} from "semantic-ui-react";
import { connect } from "react-redux"
import { addStar, removeStar} from "../features/calls/callsSlice";
import { addStar, removeStar } from "../features/calls/callsSlice";
import { useDispatch } from 'react-redux'
const CallItem = (props) => {
@@ -22,7 +21,7 @@ const CallItem = (props) => {
const handleStarClicked = (e) => {
e.preventDefault();
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
e.nativeEvent.stopImmediatePropagation();
if (!starClicked) {
setStarClicked(true);
dispatch(addStar(props.call._id));
@@ -32,11 +31,11 @@ const CallItem = (props) => {
}
}
var rowSelected={};
var rowSelected = {};
let starButton;
var starClickable = {};
if (!starClicked) {
starClickable = {link: true };
starClickable = { link: true };
}
if (!call.star && starVisible) {
starButton = <Icon name='star outline' />
@@ -47,32 +46,33 @@ const CallItem = (props) => {
}
if (call.star && call.star > 1) {
starButton = (<Icon.Group >
<Icon {...starClickable} name='star' />
<Label circular color='red' size='mini' floating>
{call.star}
</Label>
</Icon.Group>)
<Icon {...starClickable} name='star' />
<Label circular color='red' size='mini' floating>
{call.star}
</Label>
</Icon.Group>)
}
if (activeCall) {
rowSelected={positive: true,
rowSelected = {
positive: true,
color: "blue",
key: "blue",
inverted: "true"
}
key: "blue",
inverted: "true"
}
}
var talkgroup;
if ((typeof props.talkgroups == 'undefined') || (typeof props.talkgroups[call.talkgroupNum] == 'undefined')) {
talkgroup = call.talkgroupNum;
if ((typeof props.talkgroups == 'undefined') || (typeof props.talkgroups[call.talkgroupNum] == 'undefined')) {
talkgroup = call.talkgroupNum;
} else {
talkgroup = props.talkgroups[call.talkgroupNum].description;
talkgroup = props.talkgroups[call.talkgroupNum].description;
}
return (
<Table.Row onClick={(e) => props.onClick({call: call}, e)} {...rowSelected}>
<Table.Cell> {call.len} </Table.Cell>
<Table.Cell> {talkgroup} </Table.Cell>
<Table.Cell> {time.toLocaleTimeString()} </Table.Cell>
<Table.Cell onMouseEnter={()=> setStarVisible(true)} onMouseLeave={() => setStarVisible(false)} onClick={handleStarClicked}>{starButton}</Table.Cell>
<Table.Row onClick={(e) => props.onClick({ call: call }, e)} {...rowSelected}>
<Table.Cell> {call.len} </Table.Cell>
<Table.Cell> {talkgroup} </Table.Cell>
<Table.Cell> {time.toLocaleTimeString()} </Table.Cell>
<Table.Cell onMouseEnter={() => setStarVisible(true)} onMouseLeave={() => setStarVisible(false)} onClick={handleStarClicked}>{starButton}</Table.Cell>
</Table.Row>

View File

@@ -9,7 +9,7 @@ import CalendarModal from "./CalendarModal";
import CallInfo from "./CallInfo";
import ListCalls from "./ListCalls";
import { useSelector, useDispatch } from 'react-redux'
import { setLive, setShortName, setFilter,setDateFilter } from "../features/callPlayer/callPlayerSlice";
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';
@@ -20,8 +20,7 @@ import {
Sticky,
Menu,
Icon,
Sidebar,
Button
Sidebar
} from "semantic-ui-react";
import "./CallPlayer.css";
import queryString from '../query-string';
@@ -36,11 +35,11 @@ const socket = io(process.env.REACT_APP_BACKEND_SERVER);
function CallPlayer(props) {
const { shortName } = useParams();
const { ref: loadOlderRef, inView: loadOlderInView, entry: loadOlderEntry } = useInView({
const { ref: loadOlderRef, inView: loadOlderInView } = useInView({
/* Optional options */
threshold: 0.5
});
const { ref: loadNewerRef, inView: loadNewerInView, entry: loadNewerEntry } = useInView({
const { ref: loadNewerRef, inView: loadNewerInView } = useInView({
/* Optional options */
threshold: 0.5
});
@@ -83,9 +82,6 @@ function CallPlayer(props) {
currentCallId = currentCall._id;
}
const handlePlayPause = (playing) => {
setIsPlaying(playing);
}
@@ -151,7 +147,7 @@ function CallPlayer(props) {
const message = JSON.parse(data)
switch (message.type) {
case 'calls':
const ref = positionRef.current;
pageYOffset.current = positionRef.current.clientHeight;
if (shouldPlayAddCallRef.current) {
@@ -282,18 +278,11 @@ function CallPlayer(props) {
// is this just for one call?
if (uri.hasOwnProperty('call-id')) {
const _id = uri['call-id'];
const date = new Date(parseInt(uri['time']));
setLoadCallId(_id);
setAutoPlay(false);
if (!urlOptions) setUrlOptions(true);
//callActions.fetchCallInfo(_id);
//callActions.setCallTime(date);
}
var filterType = "all";
var filterCode = "";
// is there a Filter set?
if ((uri.hasOwnProperty('filter-code')) && (uri.hasOwnProperty('filter-type'))) {
if (!urlOptions) setUrlOptions(true);
@@ -302,8 +291,6 @@ function CallPlayer(props) {
if (uri['filter-type'] === "group") {
filter.filterType = 1;
filter.filterGroupId = uri["filter-code"];
filterType = "group";
filterCode = uri["filter-code"];
}
// The Filter is talkgroups
@@ -311,8 +298,6 @@ function CallPlayer(props) {
const tg = uri["filter-code"].split(',').map(Number);
filter.filterType = 2;
filter.filterTalkgroups = tg;
filterType = "talkgroup";
filterCode = tg;
}
}

View File

@@ -1,4 +1,4 @@
import React, { Component, useState } 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'
@@ -16,11 +16,9 @@ import "./FilterModal.css";
function FilterModal(props) {
const shortName = useSelector((state) => state.callPlayer.shortName);
const globalFilterStarred = useSelector((state) => state.callPlayer.filterStarred);
const { data:groupsData, isSuccess:isGroupsSuccess } = useGetGroupsQuery(props.shortName);
const { data:talkgroupsData, isSuccess:isTalkgroupsSuccess } = useGetTalkgroupsQuery(props.shortName);
const [open, setOpen] = useState(false);
const [selectedTalkgroup, setSelectedTalkgroup] = useState([]);
const [selectedGroup, setSelectedGroup] = useState(false);
const [filterStarred, setFilterStarred] = useState(false);

View File

@@ -1,4 +1,4 @@
import React, { useEffect, useLayoutEffect, useRef } from "react";
import React, { useEffect, useRef } from "react";
import CallItem from "./CallItem";
import {
Icon,

View File

@@ -1,4 +1,4 @@
import React, { Component, useState, useEffect, useRef } from "react";
import React, { useState, useEffect, useRef } from "react";
import { Link, useNavigate } from 'react-router-dom'
import SystemCard from "../System/SystemCard";
import "./Main.css";
@@ -17,8 +17,8 @@ import {
} from 'semantic-ui-react'
import { useSelector, useDispatch } from 'react-redux'
import { selectAllSystems, selectActiveSystems, useGetSystemsQuery } from "../features/api/apiSlice";
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 */
@@ -83,15 +83,13 @@ General flow:
- componentDidMount(): it will call fetchSystem() this will perform an HTTP request if Systems does not exist, and then add System to Props
*/
const DesktopContainer = (props) => {
const DesktopContainer = (props) => {
const [fixed, setFixed] = useState(false);
const hideFixedMenu = () => setFixed(false)
const showFixedMenu = () => setFixed(true)
const { children } = props
return (
<Media greaterThanOrEqual="tablet">
<div className="relative">
@@ -212,14 +210,9 @@ const ResponsiveContainer = ({ children }) => (
const Main = (props) => {
const [visible, setVisible] = useState(true);
const [duration, setDuration] = useState(500);
const [currentSystem, setCurrentSystem] = useState(0);
const navigate = useNavigate();
const dispatch = useDispatch();
const {data:systems, isSuccess} = useGetSystemsQuery(); //= selectAllSystems();
function useInterval(callback, delay) {
const savedCallback = useRef();
@@ -241,8 +234,6 @@ const Main = (props) => {
}, [delay]);
}
const handleVisibility = () => setVisible(!visible);
const advanceSystem = () => {
if (isSuccess) {
let nextSystem = currentSystem + 1;