update packages and material ui

package.json

@@ -4,12 +4,11 @@
   "private": true,
   "homepage": "http://localhost:8080",
   "dependencies": {
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/lab": "^4.0.0-alpha.61",
-    "@mui/icons-material": "^5.10.6",
-    "@mui/material": "^5.10.6",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.9",
+    "@mui/material": "^5.14.10",
+    "@mui/styles": "^5.14.10",
     "axios": "^0.18.0",
     "base64url": "^3.0.0",
     "classnames": "^2.2.6",
@@ -20,18 +19,12 @@
     "jsrsasign": "^10.2.0",
     "keypair": "^1.0.1",
     "lodash": "^4.17.15",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-loader-spinner": "^2.1.0",
-    "react-markdown": "^4.3.1",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-markdown": "^8.0.7",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "^3.4.1",
-    "sass": "^1.32.8",
-    "semantic-ui-react": "^0.82.3",
-    "terra-base": "^3.19.0",
-    "terra-button": "^2.19.0",
-    "terra-card": "^2.18.0",
-    "terra-text": "^2.18.0"
+    "react-scripts": "^4.0.0",
+    "sass": "^1.32.8"
   },
   "scripts": {
     "start": "concurrently --kill-others \"json-server --watch src/db.json -p 3001 --host 0.0.0.0\" \"react-scripts start\"",

public/index.html

@@ -13,7 +13,6 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
 
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.

src/components/App.js

@@ -4,7 +4,7 @@ import { BrowserRouter as Router, Routes, Route}
 import RequestBuilder from '../containers/RequestBuilder';
 import PatientPortal from '../containers/PatientPortal';
 import theme from '../containers/styles/theme';
-import { ThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider } from '@mui/styles';
 
 export default class App extends Component {
     render() {

src/components/Auth/Alert.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Snackbar } from '@material-ui/core';
-import { Alert as MuiAlert } from '@material-ui/lab';
+import { Snackbar } from '@mui/material';
+import {Alert as MuiAlert} from '@mui/material'
 import PropTypes from 'prop-types';
 
 function Alert(props) {

src/components/Auth/Login.jsx

@@ -1,5 +1,5 @@
 import React, { memo, useCallback, useState, useEffect } from 'react';
-import { TextField, Button } from '@material-ui/core';
+import { TextField, Button } from '@mui/material';
 import Alert from './Alert';
 import axios from 'axios';
 import useStyles from './styles';

src/components/Auth/styles.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export default makeStyles(
   theme => ({
     background: {

src/components/Dashboard/Dashboard.jsx

@@ -21,7 +21,7 @@ import NotificationsIcon from '@mui/icons-material/Notifications';
 import AlarmIcon from '@mui/icons-material/Alarm';
 import SettingsIcon from '@mui/icons-material/Settings';
 import MedicalInformationIcon from '@mui/icons-material/MedicalInformation';
-import { Paper } from '@material-ui/core';
+import { Paper } from '@mui/material';
 
 const Dashboard = (props) => {
   const classes = useStyles();

src/components/Dashboard/DashboardElement.jsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { retrieveLaunchContext } from '../../util/util';
 import { headers } from '../../util/data.js';
-import { Paper } from '@material-ui/core';
+import { Paper } from '@mui/material';
 import useStyles from './styles';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import AssignmentIcon from '@mui/icons-material/Assignment';

src/components/Dashboard/styles.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export default makeStyles(
   theme => ({
     adminBar: {

src/components/DisplayBox/DisplayBox.js

@@ -244,7 +244,7 @@ export default class DisplayBox extends Component{
         return (
           <div className='card-source'>
             Source:
-            <a // eslint-disable-line jsx-a11y/anchor-is-valid
+            <a
               className='source-link'
               href="#"
               onClick={e => this.launchSource(e, source)}

src/components/SMARTBox/PatientBox.js

@@ -1,21 +1,25 @@
 import React, { Component } from "react";
-import { Dropdown, Header } from 'semantic-ui-react'
 import { getAge } from "../../util/fhir";
 import FHIR from "fhirclient";
 import "./smart.css";
 import { Button, IconButton } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
+import Box from '@mui/material/Box';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
 
 export default class SMARTBox extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      request: "none",
+      request: "",
       deviceRequests: {},
       medicationRequests: {},
       serviceRequests: {},
       medicationDispenses: {},
-      response: "none",
+      response: "",
       questionnaireResponses: {},
     };
 
@@ -30,6 +34,7 @@ export default class SMARTBox extends Component {
     this.getResponses = this.getResponses.bind(this);
     this.makeQROption = this.makeQROption.bind(this);
     this.handleResponseChange = this.handleResponseChange.bind(this);
+    this.makeDropdown = this.makeDropdown.bind(this);
   }
 
   componentDidMount() {
@@ -66,16 +71,33 @@ export default class SMARTBox extends Component {
     return code;
   }
 
+  makeDropdown(options, label, stateVar, stateChange) {
+    console.log(options);
+    return (
+      <Box sx={{ minWidth: 120 }}>
+      <FormControl fullWidth>
+        <InputLabel>{label}</InputLabel>
+        <Select
+          labelId = {`${label}-label`}
+          value= {stateVar}
+          label={label}
+          onChange={stateChange}
+        >
+          {options.map((op) => {
+            return <MenuItem key = {op.key} value = {op.value}>{op.text}</MenuItem>
+          })}
+        </Select>
+      </FormControl>
+    </Box>
+    )
+  }
   makeOption(request, options) {
     let code = this.getCoding(request);
 
     let option = {
       key: request.id,
       text: code.display + " (Medication request: " + code.code + ")",
-      value: JSON.stringify(request),
-      content: (
-        <Header content={code.code + " (" + request.resourceType + ")"} subheader={code.display} />
-      )
+      value: JSON.stringify(request)
     }
     options.push(option);
   }
@@ -84,7 +106,7 @@ export default class SMARTBox extends Component {
     this.props.callback("patient", patient);
     this.props.callback("openPatient", false);
     this.props.clearCallback();
-    if (this.state.request !== "none") {
+    if (this.state.request) {
       const request = JSON.parse(this.state.request);
       if (request.resourceType === "DeviceRequest" || request.resourceType === "ServiceRequest" || request.resourceType === "MedicationRequest" || request.resourceType === "MedicationDispense") {
         this.updatePrefetchRequest(request, patient, this.props.defaultUser);
@@ -96,7 +118,7 @@ export default class SMARTBox extends Component {
       this.updatePrefetchRequest(null, patient, this.props.defaultUser);
     }
 
-    if (this.state.response !== "none") {
+    if (this.state.response) {
       const response = JSON.parse(this.state.response);
       this.updateQRResponse(patient, response);
     }
@@ -199,32 +221,33 @@ export default class SMARTBox extends Component {
       });
   }
 
-  handleRequestChange(e, data) {
-    if (data.value === "none") {
+  handleRequestChange(e) {
+    const data = e.target.value;
+    if (data) {
+      let coding = this.getCoding(JSON.parse(data));
       this.setState({
-        request: "none"
-      });
-    } else {
-      let request = JSON.parse(data.value);
-      let coding = this.getCoding(request);
-      this.setState({
-        request: data.value,
+        request: data,
         code: coding.code,
         system: coding.system,
         display: coding.display,
-        response: "none"
+        response: ""
+      });
+    } else {
+      this.setState({
+        request: ""
       });
     }
   }
 
-  handleResponseChange(e, data) {
-    if (data.value === "none") {
+  handleResponseChange(e) {
+    const data = e.target.value;
+    if (data) {
       this.setState({
-        response: "none"
+        response: data
       });
     } else {
       this.setState({
-        response: data.value
+        response: ""
       });
     }
   }
@@ -267,10 +290,7 @@ export default class SMARTBox extends Component {
     let option = {
       key: qr.id,
       text: display,
-      value: JSON.stringify(qr),
-      content: (
-        <Header content={"QuestionnaireResponse"} subheader={display} />
-      )
+      value: JSON.stringify(qr)
     }
     options.push(option);
   }
@@ -352,13 +372,7 @@ export default class SMARTBox extends Component {
             { !options.length && returned ?
               <span className="emptyForm">No reqeusts</span>
             : 
-              <Dropdown
-                search searchInput={{ type: 'text' }}
-                selection fluid options={options}
-                placeholder='Choose an option'
-                noResultsMessage={noResults}
-                onChange={this.handleRequestChange}
-              />
+              this.makeDropdown(options, "Choose a patient", this.state.request, this.handleRequestChange)
             }
           </div>
           <div className="request-info">
@@ -370,13 +384,7 @@ export default class SMARTBox extends Component {
             </span>
             { !responseOptions.length && returned ?
               <span className="emptyForm">No in progress forms</span> :
-              <Dropdown
-                search searchInput={{ type: 'text' }}
-                selection fluid options={responseOptions}
-                placeholder='Choose an option'
-                noResultsMessage={noResults}
-                onChange={this.handleResponseChange}
-              />
+              this.makeDropdown(responseOptions, "Choose an in-progress form", this.state.response, this.handleResponseChange)
             }
           </div>
           <Button variant="outlined" size="small" className="select-btn" onClick={() => this.updateValues(patient)}>Select</Button>

src/containers/styles/styles.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export default makeStyles(
   theme => ({
     background: {