real-time sync updated & alert added (#47)

* Real time sync added to user model

* account: message alert added

src/components/account/IsEducatorSwitch.js

@@ -4,24 +4,35 @@ import { UserContext } from "../../context/UserContext";
 import { DataStore } from "@aws-amplify/datastore";
 import { User } from "../../models";
 import Label from "./Label";
+import MessageAlert from "./MessageAlert";
 
 function IsEducatorSwitch() {
   const user = useContext(UserContext);
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setOpen(false);
+  };
+
   const [state, setState] = React.useState({
     checkedA: user.isEducator,
   });
   const handleChange = (event) => {
     setState({ ...state, [event.target.name]: event.target.checked });
   };
+
   async function handleSubmit(e) {
     e.preventDefault();
     const original = await DataStore.query(User, user.id);
-    await DataStore.save(
+    const data = await DataStore.save(
       User.copyOf(original, (updated) => {
         updated.isEducator = state.checkedA;
       })
     );
-    window.location.reload();
+    if (data) setOpen(true);
   }
   return (
     <React.Fragment>
@@ -53,6 +64,7 @@ function IsEducatorSwitch() {
           Save
         </Button>
       )}
+      <MessageAlert handleClose={handleClose} open={open} />
     </React.Fragment>
   );
 }

src/components/account/MessageAlert.js

@@ -0,0 +1,25 @@
+import { Snackbar } from "@material-ui/core";
+import { Alert } from "@material-ui/lab";
+import React from "react";
+
+function MessageAlert({ open, handleClose }) {
+  return (
+    <div>
+      <div>
+        <Snackbar
+          open={open}
+          autoHideDuration={2000}
+          onClose={handleClose}
+          anchorOrigin={{ vertical: "top", horizontal: "right" }}
+        >
+          <Alert onClose={handleClose} severity="success">
+            Successfully updated
+          </Alert>
+        </Snackbar>
+      </div>
+      ;
+    </div>
+  );
+}
+
+export default MessageAlert;

src/routes/Routes.js

@@ -30,6 +30,10 @@ export default function Routes() {
   const [currentUser, setCurrentUser] = useState([]);
   useEffect(() => {
     getUser();
+    const subscription = DataStore.observe(User).subscribe((msg) => {
+      getUser();
+    });
+    return () => subscription.unsubscribe();
   }, []);
   async function getUser() {
     const user = await Auth.currentAuthenticatedUser();