2406/bumping node

Dockerfiles/front

@@ -1,4 +1,4 @@
-FROM node:14.20.1 as build-deps
+FROM node:20-alpine as build-deps
 ARG PUBLIC_URL=
 ARG REACT_APP_API_URL=0.0.0.0:8000
 WORKDIR /jarr

Makefile

@@ -18,13 +18,16 @@ QU_CONTAINER_NAME = rabbitmq
 install:
 	pipenv sync --dev
 
+jslint:
+	eslint jsclient/src/
+
 pep8:
 	$(RUN) pycodestyle --ignore=E126,E127,E128,W503 jarr/ --exclude=jarr/migrations
 
 mypy:
 	$(RUN) mypy jarr --ignore-missing-imports --exclude=jarr/crawler/lib/__init__.py
 
-lint: pep8 mypy
+lint: jslint pep8 mypy
 
 test: export JARR_CONFIG = example_conf/jarr.test.json
 test:
@@ -74,7 +77,7 @@ db-bootstrap-tables:
 	$(COMPOSE) exec $(DB_CONTAINER_NAME) psql -h 0.0.0.0 -U postgres -c "GRANT ALL PRIVILEGES ON DATABASE $(DB_NAME) to $(DB_NAME);"
 
 db-import-dump:
-	docker cp $(DUMP) jarr_$(DB_CONTAINER_NAME)_1:/tmp/dump.pgsql
+	docker cp $(DUMP) $(shell docker ps -q -f name=$(DB_CONTAINER_NAME)):/tmp/dump.pgsql
 	$(COMPOSE) exec $(DB_CONTAINER_NAME) su postgres -c "pg_restore -d $(DB_NAME) /tmp/dump.pgsql"
 	$(COMPOSE) exec $(DB_CONTAINER_NAME) rm /tmp/dump.pgsql
 

jsclient/package.json

@@ -3,25 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "4.*",
-    "@material-ui/icons": "4.*",
-    "@material-ui/lab": "4.0.0-alpha.61",
-    "@reduxjs/toolkit": "1.*",
-    "axios": "1.*",
-    "moment": "2.*",
-    "node-notifier": "8.*",
-    "object-path": "0.11.5",
-    "react": "16.*",
-    "react-dev-utils": "11.*",
-    "react-dom": "16.*",
-    "react-redux": "7.*",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.20",
+    "@mui/material": "^5.15.20",
+    "@mui/styles": "^5.15.20",
+    "@reduxjs/toolkit": "*",
+    "axios": "*",
+    "moment": "*",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dev-utils": "*",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-redux": "*",
     "react-router-dom": "5.*",
-    "react-scripts": "3.*",
-    "react-window": "1.*",
-    "redux": "4.*",
-    "ssri": "8.*",
-    "thunk": "^0.0.1",
-    "typescript": "3.*"
+    "react-scripts": "*",
+    "react-window": "*",
+    "redux": "*",
+    "ssri": "*",
+    "thunk": "*",
+    "typescript": "*"
   },
   "scripts": {
     "start": "react-scripts start",

jsclient/src/Jarr.js

@@ -3,8 +3,8 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { BrowserRouter } from "react-router-dom";
 
-import CssBaseline from "@material-ui/core/CssBaseline";
-import { ThemeProvider } from "@material-ui/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
 
 import {jarrTheme, jarrLoginTheme} from "./Jarr.theme";
 import useStyles from "./Jarr.styles.js";

jsclient/src/Jarr.styles.js

@@ -1,4 +1,5 @@
-import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
+import { Theme } from "@mui/material/styles";
+import { makeStyles, createStyles } from "@mui/styles";
 
 export default makeStyles((theme: Theme) =>
   createStyles({

jsclient/src/Jarr.theme.js

@@ -1,4 +1,4 @@
-import { createMuiTheme } from "@material-ui/core/styles";
+import { createTheme } from "@mui/material/styles";
 
 export const jarrColors = {
   primary : {
@@ -19,15 +19,15 @@ export const jarrColors = {
   },
 }
 
-export const jarrLoginTheme = createMuiTheme({
+export const jarrLoginTheme = createTheme({
   palette: {
     primary: jarrColors.primary,
     secondary: jarrColors.secondary,
     background: jarrColors.background,
   }
 });
 
-export const jarrTheme = createMuiTheme({
+export const jarrTheme = createTheme({
   palette: {
     primary: jarrColors.primary,
     secondary: jarrColors.secondary,

jsclient/src/app/store.js

@@ -1,5 +1,5 @@
 import { configureStore, Action } from "@reduxjs/toolkit";
-import thunk, { ThunkAction }from "redux-thunk";
+import { ThunkAction } from "redux-thunk";
 import authReducer from "../authSlice";
 import noAuthReducer from "../features/noauth/noAuthSlice";
 import feedsReducer from "../features/feedlist/slice";
@@ -14,7 +14,6 @@ export default configureStore({
     clusters: clustersReducer,
     edit: editReducer,
   },
-  middleware: [thunk],
 });
 
 export type AppThunk = ThunkAction<void, RootState, unknown, Action<string>>;

jsclient/src/authSlice.js

@@ -12,9 +12,9 @@ const authSlice = createSlice({
   },
   reducers: {
     tokenAcquired: (state, action) => {
-      const accessToken = action.payload.data["access_token"];
-      const accessTokenExpiresAt = new Date(action.payload.data["access_token_expires_at"]).getTime();
-      const refreshToken = action.payload.data["refresh_token"];
+      const accessToken = action.payload["access_token"];
+      const accessTokenExpiresAt = new Date(action.payload["access_token_expires_at"]).getTime();
+      const refreshToken = action.payload["refresh_token"];
       if (refreshToken) {
         storageSet("refreshToken", refreshToken, "local");
         return { ...state, accessToken, refreshToken, accessTokenExpiresAt };
@@ -45,7 +45,7 @@ export const doRetryOnTokenExpiration = async (payload, dispatch, getState) => {
         url: `${apiUrl}/auth/refresh`,
         headers: { "Authorization": state.auth.refreshToken }
       });
-      dispatch(tokenAcquired(result));
+      dispatch(tokenAcquired(result.data));
       payload.headers = { "Authorization": result.data["access_token"] };
     } catch (err) { // failed to refresh it, logging out
       dispatch(purgeCredentials());

jsclient/src/components/ClusterIcon.js

@@ -2,8 +2,9 @@ import React from "react";
 import PropTypes from "prop-types";
 import { apiUrl } from "../const";
 import qs from "qs";
-import LinkIcon from "@material-ui/icons/Link";
-import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
+import LinkIcon from "@mui/icons-material/Link";
+import { Theme, createStyles } from "@mui/material/styles";
+import { makeStyles } from "@mui/styles";
 
 const iconStyle = makeStyles((theme: Theme) =>
   createStyles({

jsclient/src/components/FeedIcon.js

@@ -2,8 +2,9 @@ import React from "react";
 import PropTypes from "prop-types";
 import { apiUrl } from "../const";
 import qs from "qs";
-import LinkIcon from "@material-ui/icons/Link";
-import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
+import LinkIcon from "@mui/icons-material/Link";
+import { Theme, createStyles } from "@mui/material/styles";
+import { makeStyles } from "@mui/styles";
 
 const iconStyle = makeStyles((theme: Theme) =>
   createStyles({

jsclient/src/features/clusterlist/ClusterList.js

@@ -3,13 +3,13 @@ import clsx from "clsx";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 // material ui components
-import { useTheme } from "@material-ui/core/styles";
-import Fab from "@material-ui/core/Fab";
-import useMediaQuery from "@material-ui/core/useMediaQuery";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import Paper from "@material-ui/core/Paper";
-import AddIcon from "@material-ui/icons/Add";
-import Alert from "@material-ui/lab/Alert";
+import { useTheme } from "@mui/material/styles";
+import Fab from "@mui/material/Fab";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import CircularProgress from "@mui/material/CircularProgress";
+import Paper from "@mui/material/Paper";
+import Alert from "@mui/material/Alert";
+import AddIcon from "@mui/icons-material/Add";
 // jarr
 import Cluster from "./components/Cluster";
 import SelectedObjCard from "./components/SelectedObjCard";

jsclient/src/features/clusterlist/components/Article.js

@@ -1,10 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
-import useMediaQuery from "@material-ui/core/useMediaQuery";
-import { useTheme } from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
-import Link from "@material-ui/core/Link";
-import Divider from "@material-ui/core/Divider";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTheme } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import Link from "@mui/material/Link";
+import Divider from "@mui/material/Divider";
 
 import makeStyles from "./style";
 

jsclient/src/features/clusterlist/components/Articles.js

@@ -2,12 +2,12 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 
-import Tab from "@material-ui/core/Tab";
-import Tabs from "@material-ui/core/Tabs";
-import ImageIcon from "@material-ui/icons/Image";
-import AudioIcon from "@material-ui/icons/MusicNote";
-import VideoIcon from "@material-ui/icons/Movie";
-import YoutubeIcon from "@material-ui/icons/YouTube";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
+import ImageIcon from "@mui/icons-material/Image";
+import AudioIcon from "@mui/icons-material/MusicNote";
+import VideoIcon from "@mui/icons-material/Movie";
+import YoutubeIcon from "@mui/icons-material/YouTube";
 
 import Article from "./Article";
 import {articleTypes, TypedContents} from "./TypedContents";

jsclient/src/features/clusterlist/components/Cluster.js

@@ -5,17 +5,17 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { createSelector } from "reselect";
 // material ui components
-import Link from "@material-ui/core/Link";
-import Checkbox from "@material-ui/core/Checkbox";
-import Typography from "@material-ui/core/Typography";
-import ExpansionPanel from "@material-ui/core/ExpansionPanel";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
-import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import Link from "@mui/material/Link";
+import Checkbox from "@mui/material/Checkbox";
+import Typography from "@mui/material/Typography";
+import Accordion from "@mui/material/Accordion";
+import CircularProgress from "@mui/material/CircularProgress";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
 // material ui icons
-import LikedIcon from "@material-ui/icons/Star";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-import LikedIconBorder from "@material-ui/icons/StarBorder";
+import LikedIcon from "@mui/icons-material/Star";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import LikedIconBorder from "@mui/icons-material/StarBorder";
 // jarr
 import { removeClusterSelection, showCluster } from "../slice";
 import doEditCluster from "../../../hooks/doEditCluster";
@@ -118,15 +118,15 @@ const Cluster = ({ index, cluster, loadedCluster,
       content = <div className={classes.loadingWrap}><CircularProgress /></div>;
     }
     content = (
-      <ExpansionPanelDetails className={classes.content}
+      <AccordionDetails className={classes.content}
                              key={`cl-${cluster.id}`}>
         {content}
-      </ExpansionPanelDetails>
+      </AccordionDetails>
     );
   }
 
   return (
-      <ExpansionPanel
+      <Accordion
         expanded={expanded}
         elevation={expanded ? 10: 2}
         TransitionProps={{ unmountOnExit: true }}
@@ -138,7 +138,7 @@ const Cluster = ({ index, cluster, loadedCluster,
         onChange={(e) => handleClickOnPanel(e, cluster,
                                             unreadOnClose, expanded)}
       >
-        <ExpansionPanelSummary
+        <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
           aria-controls="panel1a-content"
           id="panel1a-header"
@@ -183,9 +183,9 @@ const Cluster = ({ index, cluster, loadedCluster,
              {cluster["main_title"]}
             </Typography>
           </div>
-        </ExpansionPanelSummary>
+        </AccordionSummary>
         {content}
-      </ExpansionPanel>
+      </Accordion>
     );
 };
 

jsclient/src/features/clusterlist/components/ProcessedContent.js

@@ -1,8 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Typography from "@material-ui/core/Typography";
-import Link from "@material-ui/core/Link";
-import Divider from "@material-ui/core/Divider";
+import Typography from "@mui/material/Typography";
+import Link from "@mui/material/Link";
+import Divider from "@mui/material/Divider";
 
 import makeStyles from "./style";
 

jsclient/src/features/clusterlist/components/SelectedObjCard.js

@@ -2,13 +2,13 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 // material ui  components
-import IconButton from "@material-ui/core/IconButton";
-import Card from "@material-ui/core/Card";
-import CardActions from "@material-ui/core/CardActions";
-import CardContent from "@material-ui/core/CardContent";
-import SettingsIcon from "@material-ui/icons/Build";
-import Typography from "@material-ui/core/Typography";
-import DeleteIcon from "@material-ui/icons/Delete";
+import IconButton from "@mui/material/IconButton";
+import Card from "@mui/material/Card";
+import CardActions from "@mui/material/CardActions";
+import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
+import SettingsIcon from "@mui/icons-material/Build";
+import DeleteIcon from "@mui/icons-material/Delete";
 // jarr
 import doFetchObjForEdit from "../../../hooks/doFetchObjForEdit";
 import doDeleteObj from "../../../hooks/doDeleteObj";

jsclient/src/features/clusterlist/components/TypedContents.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
 
 import makeStyles from "./style";
 

jsclient/src/features/clusterlist/components/style.js

@@ -1,4 +1,5 @@
-import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
+import { Theme, createStyles } from "@mui/material/styles";
+import { makeStyles } from "@mui/styles";
 import { feedListWidth, editPanelWidth } from "../../../const";
 
 export default makeStyles((theme: Theme) =>
@@ -37,15 +38,15 @@ export default makeStyles((theme: Theme) =>
       padding: 0,
       paddingRight: 15,
       margin: 0,
-      "& .MuiExpansionPanelSummary-content": {
+      "& .MuiAccordionSummary-content": {
         flexDirection: "column",
         padding: "6px 0 6px 10px",
         margin: 0,
         maxWidth: "100%",
         overflow: "hidden",
         whiteSpace: "nowrap",
       },
-      "& .MuiExpansionPanelSummary-expandIcon": {
+      "& .MuiAccordionSummary-expandIcon": {
         padding: 6,
       },
     },

jsclient/src/features/editpanel/Category/index.js

@@ -2,8 +2,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 // material components
-import Button from "@material-ui/core/Button";
-import FormControl from "@material-ui/core/FormControl";
+import Button from "@mui/material/Button";
+import FormControl from "@mui/material/FormControl";
 // jarr
 import ClusterSettings from "../common/ClusterSettings";
 import DeleteButton from "../common/DeleteButton";

jsclient/src/features/editpanel/EditPanel.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
-import Typography from "@material-ui/core/Typography";
-import Drawer from "@material-ui/core/Drawer";
-import Divider from "@material-ui/core/Divider";
-import IconButton from "@material-ui/core/IconButton";
-import Close from "@material-ui/icons/Close";
-import CircularProgress from "@material-ui/core/CircularProgress";
+import Typography from "@mui/material/Typography";
+import Drawer from "@mui/material/Drawer";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import CircularProgress from "@mui/material/CircularProgress";
+import Close from "@mui/icons-material/Close";
 // jarr
 import BuildFeed from "./Feed/Build";
 import AddEditFeed from "./Feed";