Add filters and sort to mvlempyr (#1310)

* Add filters and sort to mvlempyr

* Update version number

* Add filters and sort to mvlempyr

* Update version number

* Faster parsing by reducing amount of html cheerio is given

* Lint rules

* Add dropdown in UI to change fetch mode

* Requested changes

* Small fixes i noticed

* Use program files from env

* Requested changes

src/components/accordions/Headers/index.tsx

@@ -1,16 +1,25 @@
 import React, { useEffect, useState } from 'react';
 import AccordionContainer from '../components/AccordionContainer';
-import { Alert, Box, InputAdornment, TextField } from '@mui/material';
+import {
+  Alert,
+  Box,
+  InputAdornment,
+  MenuItem,
+  Select,
+  TextField,
+} from '@mui/material';
 import useDebounce from '@hooks/useDebounce';
 
 export default function HeadersSection() {
   const [loading, setLoading] = useState(false);
   const [cookies, setCookies] = useState('');
   const debounceCookies = useDebounce(cookies, 500);
-  const [alertVisible, setAlertVisble] = useState(false);
+  const [fetchMode, setFetchMode] = useState('proxy');
+  const [alertVisible, setAlertVisble] = useState('');
   useEffect(() => {
     if (alertVisible) {
-      setTimeout(() => setAlertVisble(false), 1000);
+      const id = setTimeout(() => setAlertVisble(''), 1000);
+      return () => clearTimeout(id);
     }
   }, [alertVisible]);
 
@@ -20,9 +29,20 @@ export default function HeadersSection() {
       method: 'POST',
       body: debounceCookies,
     })
-      .then(() => setAlertVisble(true))
+      .then(() => setAlertVisble('Cookies updated'))
       .finally(() => setLoading(false));
   }, [debounceCookies]);
+
+  useEffect(() => {
+    setLoading(true);
+    fetch('fetchMode', {
+      method: 'POST',
+      body: fetchMode,
+    })
+      .then(() => setAlertVisble('Fetch mode updated'))
+      .finally(() => setLoading(false));
+  }, [fetchMode]);
+
   return (
     <AccordionContainer title="Headers" loading={loading}>
       {alertVisible ? (
@@ -34,7 +54,7 @@ export default function HeadersSection() {
             right: 0,
           }}
         >
-          Cookies updated
+          {alertVisible}
         </Alert>
       ) : null}
       <TextField
@@ -62,6 +82,27 @@ export default function HeadersSection() {
         }}
         sx={{ width: '100%' }}
       />
+      <Box sx={{ height: 10 }} />
+      <div
+        style={{
+          alignContent: 'flex-start',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10,
+        }}
+      >
+        Fetch Mode:
+        <Select
+          variant="outlined"
+          label="Fetcher"
+          value={fetchMode}
+          onChange={e => setFetchMode(e.target.value)}
+        >
+          <MenuItem value="proxy">Proxy</MenuItem>
+          <MenuItem value="node-fetch">Node fetch</MenuItem>
+          <MenuItem value="curl">Curl</MenuItem>
+        </Select>
+      </div>
     </AccordionContainer>
   );
 }