From 0b212dd38fb362c9d433ad91840c3cfc5a50ade8 Mon Sep 17 00:00:00 2001
From: Iván Ávalos <avalos@disroot.org>
Date: Thu, 16 Jun 2022 14:02:13 -0500
Subject: Removed TLS from proxy and added automatic playback on replay page

---
 modern/src/reactHelper.js        | 24 ++++++++++++++++++++++++
 modern/src/reports/ReplayPage.js | 29 ++++++++++++++++++++++++-----
 modern/src/setupProxy.js         |  4 ++--
 3 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/modern/src/reactHelper.js b/modern/src/reactHelper.js
index 7503360..0e80596 100644
--- a/modern/src/reactHelper.js
+++ b/modern/src/reactHelper.js
@@ -20,3 +20,27 @@ export const useEffectAsync = (effect, deps) => {
     };
   }, deps);
 };
+
+// Source: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+export const useInterval = (callback, delay) => {
+  const ref = useRef();
+  let id = null;
+
+  // Remember the latest callback.
+  useEffect(() => {
+    ref.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  useEffect(() => {
+    function tick() {
+      ref.current();
+    }
+    if (delay !== null) {
+      id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+
+  return id;
+}
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index fa94a06..b762e58 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   Accordion, AccordionDetails, AccordionSummary, Container, makeStyles, Paper, Slider, Tooltip, Typography, IconButton, Box
@@ -7,6 +7,8 @@ import {
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
+import PlayArrowIcon from '@material-ui/icons/PlayArrow';
+import PauseIcon from '@material-ui/icons/Pause';
 
 import MainToolbar from '../MainToolbar';
 import Map from '../map/Map';
@@ -16,6 +18,7 @@ import { formatPosition, formatSpeed } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import { useTranslation } from '../LocalizationProvider';
 import { useAttributePreference } from '../common/preferences';
+import { useInterval } from '../reactHelper';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -52,6 +55,7 @@ const ReplayPage = () => {
 
   const speedUnit = useAttributePreference('speedUnit');
 
+  const [playback, setPlayback] = useState(false);
   const [expanded, setExpanded] = useState(true);
   const [positions, setPositions] = useState([]);
   const [index, setIndex] = useState(0);
@@ -66,6 +70,13 @@ const ReplayPage = () => {
     }
   };
 
+  useInterval(() => {
+    if (playback && index < positions.length - 1) {
+      console.log(`Index: ${index}`);
+      setIndex(index + 1);
+    }
+  }, 1000);
+
   return (
     <div className={classes.root}>
       <MainToolbar />
@@ -80,8 +91,8 @@ const ReplayPage = () => {
             <Paper className={classes.controlContent}>
                 <Box maxWidth="sm" display="flex">
                     {/* Previous position button */}
-                    <IconButton color="primary" disabled={index === 0} onClick={() => setIndex(index - 1)}>
-                        <SkipPreviousIcon />
+                    <IconButton color="primary" onClick={() => setPlayback(!playback)}>
+                        { playback ? <PauseIcon /> : <PlayArrowIcon /> }
                     </IconButton>
                     
                     <Box flexGrow={1} textAlign="center">
@@ -90,10 +101,18 @@ const ReplayPage = () => {
                         {/* Speed */}
                         {positions[index].speed != undefined &&
                          <>
-                             <br/><Typography variant="secondary">{formatSpeed(positions[index].speed, speedUnit, t)}</Typography>
+                             <br/>
+                             <Typography variant="secondary">
+                                 {formatSpeed(positions[index].speed, speedUnit, t)}
+                             </Typography>
                          </>}
                     </Box>
-                    {/* Speed */}
+
+                    {/* Previous position button */}
+                    <IconButton color="primary" disabled={index === 0} onClick={() => setIndex(index - 1)}>
+                        <SkipPreviousIcon />
+                    </IconButton>
+                    
                     {/* Next position button*/}
                     <IconButton color="primary" disabled={index === positions.length - 1} onClick={() => setIndex(index + 1)}>
                         <SkipNextIcon />
diff --git a/modern/src/setupProxy.js b/modern/src/setupProxy.js
index 96ffb95..d6b4158 100644
--- a/modern/src/setupProxy.js
+++ b/modern/src/setupProxy.js
@@ -4,9 +4,9 @@ const { createProxyMiddleware } = require('http-proxy-middleware');
 
 
 module.exports = (app) => {
-  const proxy = createProxyMiddleware('/api/socket', { target: `wss://${process.env.REACT_APP_URL_NAME}`, changeOrigin: true, logLevel: 'debug' });
+  const proxy = createProxyMiddleware('/api/socket', { target: `ws://${process.env.REACT_APP_URL_NAME}`, changeOrigin: true, logLevel: 'debug' });
   const server = app.listen(3000);
   server.on('upgrade', proxy.upgrade);
   
-  app.use('/api', createProxyMiddleware(`https://${process.env.REACT_APP_URL_NAME}/api`, { changeOrigin: true, headers: { "Connection": "keep-alive" }, logLevel: 'debug' }));
+  app.use('/api', createProxyMiddleware(`http://${process.env.REACT_APP_URL_NAME}/api`, { changeOrigin: true, headers: { "Connection": "keep-alive" }, logLevel: 'debug' }));
 };
-- 
cgit v1.2.3