Merge pull request #1034 from entur/react_migration

react_migration

package.json

@@ -26,6 +26,7 @@
     "@mui/icons-material": "5.16.7",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",
+    "@mui/x-date-pickers": "7.20.0",
     "@reduxjs/toolkit": "2.2.8",
     "@sentry/react": "7.119.2",
     "@sentry/tracing": "7.114.0",
@@ -40,7 +41,6 @@
     "leaflet": "1.9.4",
     "lint-staged": "15.2.10",
     "lodash.debounce": "4.0.8",
-    "material-ui": "0.20.2",
     "moment": "2.30.1",
     "oidc-client-ts": "3.1.0",
     "prop-types": "15.8.1",

src/actions/TiamatActions.js

@@ -82,8 +82,8 @@ export const getContext = async (auth) => {
   return context;
 };
 
-const handleQuery = (client, payload) => (dispatch) =>
-  client.query(payload).then((result) => {
+const handleQuery = (client, payload) => (dispatch) => {
+  return client.query(payload).then((result) => {
     dispatch(
       createApolloThunk(
         types.APOLLO_QUERY_RESULT,
@@ -94,6 +94,7 @@ const handleQuery = (client, payload) => (dispatch) =>
     );
     return result;
   });
+};
 
 const handleMutation = (client, payload) => (dispatch) =>
   client

src/components/Dialogs/AddStopPlaceSuggestionListItem.js

@@ -14,10 +14,11 @@ limitations under the Licence. */
 
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import Checkbox from "material-ui/Checkbox";
+import Checkbox from "@mui/material/Checkbox";
 import ModalityIconImg from "../MainPage/ModalityIconImg";
 import { injectIntl } from "react-intl";
 import HasExpiredInfo from "../MainPage/HasExpiredInfo";
+import { FormControlLabel } from "@mui/material";
 
 class AddStopPlaceSuggestionListItem extends Component {
   render() {
@@ -26,10 +27,14 @@ class AddStopPlaceSuggestionListItem extends Component {
 
     return (
       <div style={{ display: "flex", alignItems: "center", padding: 4 }}>
-        <Checkbox
-          disabled={suggestion && (suggestion.hasExpired || disabled)}
-          checked={checked}
-          onCheck={(e, v) => onCheck(suggestion.id, v)}
+        <FormControlLabel
+          control={
+            <Checkbox
+              disabled={suggestion && (suggestion.hasExpired || disabled)}
+              checked={checked}
+              onChange={(e, v) => onCheck(suggestion.id, v)}
+            />
+          }
           label={
             <div style={{ display: "flex", alignItems: "center" }}>
               {suggestion.isParent ? (
@@ -39,10 +44,16 @@ class AddStopPlaceSuggestionListItem extends Component {
                   type={suggestion.stopPlaceType}
                   submode={suggestion.submode}
                   style={{ marginRight: 5 }}
-                  iconStyle={{ marginTop: -1 }}
                 />
               )}
-              <div style={{ fontSize: "0.9em", flex: 0.8 }}>
+              <div
+                style={{
+                  fontSize: "0.9em",
+                  flex: 0.8,
+                  whiteSpace: "nowrap",
+                  paddingRight: 10,
+                }}
+              >
                 {suggestion.name ? (
                   <span>{suggestion.name}</span>
                 ) : (
@@ -53,8 +64,7 @@ class AddStopPlaceSuggestionListItem extends Component {
               </div>
               <div
                 style={{
-                  fontSize: "0.8em",
-                  lineHeight: "1.2em",
+                  fontSize: "0.9em",
                   flex: 1.5,
                   display: "flex",
                 }}

src/components/Dialogs/AltNamesDialog.js

@@ -14,10 +14,10 @@ limitations under the Licence. */
 
 import React from "react";
 import { connect } from "react-redux";
-import MdDelete from "material-ui/svg-icons/action/delete";
+import MdDelete from "@mui/icons-material/Delete";
 import * as altNameConfig from "../../config/altNamesConfig";
-import MdEdit from "material-ui/svg-icons/editor/mode-edit";
-import IconButton from "material-ui/IconButton";
+import MdEdit from "@mui/icons-material/ModeEdit";
+import IconButton from "@mui/material/IconButton";
 import { StopPlaceActions } from "../../actions/";
 import ConfirmDialog from "./ConfirmDialog";
 import { getPrimaryColor } from "../../config/themeConfig";
@@ -256,14 +256,14 @@ class AltNamesDialog extends React.Component {
                         this.handleEdit(i);
                       }}
                     >
-                      <MdEdit color={getPrimaryColor()} />
+                      <MdEdit color={"primary"} />
                     </IconButton>
                     <IconButton
                       onClick={() => {
                         this.handleRemoveName(i);
                       }}
                     >
-                      <MdDelete color="rgb(223, 84, 74)" />
+                      <MdDelete sx="color: rgb(223, 84, 74)" />
                     </IconButton>
                   </div>
                 ) : null}
@@ -298,13 +298,15 @@ class AltNamesDialog extends React.Component {
             translations={translations}
             handleAddAltName={this.handleAddAltName.bind(this)}
             handleTypeChange={(event, key, type) => {
-              this.setState({ type });
+              this.setState({ type: event.target.value });
             }}
             onLanguageChange={(event, key, lang) => {
-              this.setState({ lang });
+              this.setState({ lang: event.target.value });
+              debugger;
             }}
-            onValueChange={(event, value) => {
-              this.setState({ value });
+            onValueChange={(event) => {
+              this.setState({ value: event.target.value });
+              debugger;
             }}
             lang={lang}
             type={type}

src/components/Dialogs/CompassBearingDialog.js

@@ -21,7 +21,7 @@ import {
   DialogContent,
   DialogTitle,
 } from "@mui/material";
-import { TextField } from "material-ui";
+import { TextField } from "@mui/material";
 
 class CompassBearingDialog extends React.Component {
   constructor(props) {

src/components/Dialogs/CoordinatesDialog.js

@@ -21,14 +21,15 @@ import {
   DialogContent,
   DialogTitle,
 } from "@mui/material";
-import { TextField } from "material-ui";
+import { TextField } from "@mui/material";
 import { extractCoordinates } from "../../utils/";
 
 class CoordinatesDialog extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       errorText: "",
+      coordinates: null,
     };
   }
 
@@ -40,9 +41,9 @@ class CoordinatesDialog extends React.Component {
     handleClose: PropTypes.func.isRequired,
   };
 
-  handleInputChange(event, newValue) {
+  handleInputChange(event) {
     this.setState({
-      coordinates: newValue,
+      coordinates: event.target.value,
     });
   }
 
@@ -58,7 +59,6 @@ class CoordinatesDialog extends React.Component {
     const coordinatesString = this.state
       ? this.state.coordinates
       : this.props.coordinates;
-
     if (typeof coordinatesString === "undefined") return;
 
     const position = extractCoordinates(coordinatesString);
@@ -97,21 +97,22 @@ class CoordinatesDialog extends React.Component {
           <DialogTitle>{confirmDialogTranslation.title}</DialogTitle>
           <DialogContent>
             {confirmDialogTranslation.body}
-
             <TextField
-              hintText="lat,lng"
-              floatingLabelText={formatMessage({ id: "coordinates" })}
-              style={{ display: "block", margin: "auto", width: "90%" }}
+              fullWidth
+              error={!!this.state.errorText}
+              variant="standard"
+              placeholder="lat,lng"
+              label={formatMessage({ id: "coordinates" })}
               value={coordinates}
               onChange={this.handleInputChange.bind(this)}
-              errorText={this.state.errorText}
+              helperText={this.state.errorText}
             />
           </DialogContent>
           <DialogActions>
             <Button
               variant="text"
               onClick={() => this.handleClose()}
-              style={{ marginRight: 5 }}
+              sx={{ marginRight: 5 }}
               color="secondary"
             >
               {confirmDialogTranslation.cancel}

src/components/Dialogs/DialogHeader.js

@@ -14,8 +14,8 @@ limitations under the Licence. */
 
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import MdClose from "material-ui/svg-icons/navigation/close";
-import IconButton from "material-ui/IconButton";
+import MdClose from "@mui/icons-material/Close";
+import IconButton from "@mui/material/IconButton";
 
 class DialogHeader extends Component {
   render() {

src/components/Dialogs/EditAltName.js

@@ -13,14 +13,14 @@
  limitations under the Licence. */
 
 import React, { Component } from "react";
-import FlatButton from "material-ui/FlatButton";
-import SelectField from "material-ui/SelectField";
-import MenuItem from "material-ui/MenuItem";
-import TextField from "material-ui/TextField";
+import FlatButton from "@mui/material/Button";
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import TextField from "@mui/material/TextField";
 import * as altNameConfig from "../../config/altNamesConfig";
 import { getIn } from "../../utils/";
-import MdClose from "material-ui/svg-icons/navigation/close";
-import IconButton from "material-ui/IconButton";
+import MdClose from "@mui/icons-material/Close";
+import IconButton from "@mui/material/IconButton";
 
 class EditAltName extends Component {
   constructor(props) {
@@ -89,55 +89,56 @@ class EditAltName extends Component {
             </IconButton>
           </div>
         </div>
-        <SelectField
-          style={{ marginTop: -10 }}
+        <Select
+          style={{ marginTop: 10 }}
+          variant="standard"
           fullWidth={true}
-          floatingLabelText={translations.nameType}
+          label={translations.nameType}
           value={type}
-          onChange={(event, key, type) => {
+          onChange={(event) => {
             this.setState({
-              type,
+              type: event.target.value,
             });
           }}
         >
           {altNameConfig.supportedNameTypes.map((type) => (
-            <MenuItem
-              key={"type-" + type}
-              value={type}
-              primaryText={formatMessage({
+            <MenuItem key={"type-" + type} value={type}>
+              {formatMessage({
                 id: `altNamesDialog.nameTypes.${type}`,
               })}
-            />
+            </MenuItem>
           ))}
-        </SelectField>
-        <SelectField
-          style={{ marginTop: -10 }}
+        </Select>
+
+        <Select
+          style={{ marginTop: 10 }}
+          variant="standard"
           fullWidth={true}
-          floatingLabelText={translations.language}
+          label={translations.language}
           value={lang}
-          onChange={(event, key, lang) => {
+          onChange={(event) => {
             this.setState({
-              lang,
+              lang: event.target.value,
             });
           }}
         >
           {altNameConfig.languages.map((key) => (
-            <MenuItem
-              key={"lang-" + key}
-              value={key}
-              primaryText={formatMessage({
+            <MenuItem key={"lang-" + key} value={key}>
+              {formatMessage({
                 id: `altNamesDialog.languages.${key}`,
               })}
-            />
+            </MenuItem>
           ))}
-        </SelectField>
+        </Select>
         <TextField
+          style={{ marginTop: 10 }}
+          variant={"standard"}
           fullWidth={true}
           hintText={translations.value}
           value={value}
-          onChange={(e, value) => {
+          onChange={(event) => {
             this.setState({
-              value,
+              value: event.target.value,
             });
           }}
         />

src/components/Dialogs/KeyValuesDialog.js

@@ -14,16 +14,16 @@ limitations under the Licence. */
 
 import React from "react";
 import { connect } from "react-redux";
-import MdEdit from "material-ui/svg-icons/editor/mode-edit";
-import MdRemove from "material-ui/svg-icons/action/delete";
+import MdEdit from "@mui/icons-material/ModeEdit";
+import MdRemove from "@mui/icons-material/Delete";
 import { getPrimaryColor } from "../../config/themeConfig";
 import EditKeyValuePair from "../EditStopPage/EditKeyValuePair";
 import CreateKeyValuePair from "../EditStopPage/CreateKeyValuePair";
 import { StopPlaceActions, UserActions } from "../../actions/";
-import FloatingActionButton from "material-ui/FloatingActionButton";
-import ContentAdd from "material-ui/svg-icons/content/add";
+import Fab from "@mui/material/Fab";
 import { selectKeyValuesDataSource } from "../../reducers/selectors";
 import DialogHeader from "./DialogHeader";
+import Add from "@mui/icons-material/Add";
 
 class KeyValuesDialog extends React.Component {
   constructor(props) {
@@ -197,13 +197,13 @@ class KeyValuesDialog extends React.Component {
           )}
         </div>
         {!disabled && (
-          <FloatingActionButton
+          <Fab
             onClick={this.handleOpenCreateValues.bind(this)}
             mini={true}
             style={{ marginLeft: 20, marginBottom: 10 }}
           >
-            <ContentAdd />
-          </FloatingActionButton>
+            <Add />
+          </Fab>
         )}
         <EditKeyValuePair
           isOpen={this.state.isEditingOpen}

src/components/Dialogs/Loader.js

@@ -13,7 +13,7 @@ See the Licence for the specific language governing permissions and
 limitations under the Licence. */
 
 import React from "react";
-import RefreshIndicator from "material-ui/RefreshIndicator";
+import CircularProgress from "@mui/material/CircularProgress";
 
 const Loader = () => {
   const loadingStyle = {
@@ -25,7 +25,7 @@ const Loader = () => {
 
   return (
     <div style={loadingStyle}>
-      <RefreshIndicator size={70} left={0} top={0} status="loading" />
+      <CircularProgress size={70} left={0} top={0} status="loading" />
     </div>
   );
 };