Edit settings

client/src/App.tsx

@@ -10,10 +10,12 @@ import PhotosPage from './pages/PhotosPage';
 import LocationEditPage from './pages/LocationEditPage';
 import WriteReviewPage from './pages/WriteReviewPage';
 import ProfilePage from './pages/ProfilePage';
+import SettingsPage from './pages/SettingsPage';
 import AboutPage from './pages/AboutPage';
 import ModerationPage from './pages/ModerationPage';
 import Header from './components/Header';
 import Footer from './components/Footer';
+
 import './App.scss';
 
 function App() {
@@ -45,6 +47,9 @@ function App() {
           <Route exact path="/profile" component={ProfilePage}>
             {currentUser ? <ProfilePage /> : <Redirect to="/login" />}
           </Route>
+          <Route exact path="/settings" component={SettingsPage}>
+            {currentUser ? <SettingsPage /> : <Redirect to="/login" />}
+          </Route>
           <Route exact path="/about" component={AboutPage} />
           <Route exact path="/moderation" component={ModerationPage}>
             {currentUser ? <ModerationPage /> : <Redirect to="/login" />}

client/src/pages/SettingsPage/index.scss

@@ -0,0 +1,84 @@
+#profile-greeting-icon {
+  float: left;
+  width: 48px;
+  height: 48px;
+}
+
+#settings-page-container {
+  display: table;
+  margin-top: 4em;
+  margin-bottom: 10em;
+}
+
+#settings-profile-picture-container {
+  margin-bottom: 2em;
+}
+
+#settings-page-inner {
+  float: left;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 500px;
+  text-align: left;
+}
+
+%settings-textinput {
+  display: block;
+  margin: 0 0 1em;
+  padding: 0.4em 0.8em;
+  border: 1px solid #999;
+  border-radius: 0.3em;
+  width: 100%;
+  font-size: 1em;
+  box-sizing: border-box;
+}
+
+%settings-textinput:focus {
+  outline: none;
+  border-color: #2592ff;
+  box-shadow: 0 0 3px rgba(52, 160, 255, 0.5);
+}
+
+#settings-page-inner h2 {
+  margin-bottom: 0.5em;
+}
+
+#settings-page-inner input {
+  @extend %settings-textinput;
+}
+
+#settings-page-inner textarea {
+  @extend %settings-textinput;
+  resize: vertical;
+  height: 7em;
+}
+
+#settings-page-inner select {
+  @extend %settings-textinput;
+}
+
+#settings-submit-button {
+  color: #fff;
+  background-color: #1a8ceb;
+  border: 0;
+  padding: 0.4em 1.4em;
+  border-radius: 0.3em;
+  font-weight: bold;
+  font-size: 1em;
+  text-transform: none;
+}
+
+#settings-submit-button:hover {
+  background-color: #2592ff;
+}
+
+#settings-cancel-link {
+  color: #1577da;
+  text-decoration: none;
+  font-size: 1em;
+  margin-left: 1em;
+}
+
+#settings-cancel-link:hover {
+  text-decoration: underline;
+}

client/src/pages/SettingsPage/index.tsx

@@ -0,0 +1,95 @@
+/* eslint-disable eqeqeq */
+import { Avatar } from '@mui/material';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../reducers';
+import { useParams, Link } from 'react-router-dom';
+import { useEffect } from 'react';
+import { Container, Button } from '@mui/material';
+import { useForm } from 'react-hook-form';
+import axios from 'axios';
+import './index.scss';
+
+function SettingsPage() {
+  const { id } = useParams<{ id: string }>();
+  const mapInstance = useSelector((state: RootState) => state.mapInstance.map);
+  const { register, setValue, handleSubmit } = useForm<{
+    profile_picture: string;
+    name: string;
+    display_name: string;
+    college: string;
+  }>();
+
+  const currentUser = useSelector((state: RootState) => state.currentUser);
+
+  // Set point
+  useEffect(() => {
+    if (currentUser) {
+      setValue('profile_picture', currentUser.profile_picture || '');
+      setValue('name', currentUser.first_name + ' ' + currentUser.last_name);
+      setValue(
+        'display_name',
+        currentUser.first_name + ' ' + currentUser.last_name || ''
+      );
+      setValue('college', '');
+    }
+  }, [currentUser, setValue]);
+
+  return (
+    <Container maxWidth="md" id="settings-page-container">
+      <div id="settings-page-inner">
+        <h2>Update settings</h2>
+        <form>
+          <ul>
+            <div id="settings-profile-picture-container">
+              <li key="Profile_Picture">
+                <label>Profile Picture</label>
+                <br></br>
+                <Avatar
+                  id="profile-greeting-icon"
+                  src={currentUser ? currentUser.profile_picture : ''}
+                />
+              </li>
+            </div>
+            <li key="Name">
+              <br></br>
+              <label>Name</label>
+              <input disabled={true} {...register('name')} type="text" />
+            </li>
+            <li key="display_name">
+              <label>Display Name</label>
+              <input {...register('display_name')} type="text" />
+            </li>
+            <li key="College">
+              <label>College/University</label>
+              <input {...register('college')} type="text" />
+            </li>
+          </ul>
+          <div style={{ marginTop: '2em' }}>
+            <Button
+              variant="contained"
+              disableElevation
+              id="settings-submit-button"
+              onClick={handleSubmit((data) => {
+                axios
+                  .post(`/api/v1/locations/loc-edit/${id}`, data)
+                  .then((res) => {
+                    console.log(res);
+                  })
+                  .catch((err) => {
+                    console.log(err);
+                  });
+              })}
+            >
+              Submit Changes
+            </Button>
+            <Link to={`/loc/${id}`} id="settings-cancel-link">
+              Cancel
+            </Link>
+          </div>
+        </form>
+      </div>
+    </Container>
+  );
+}
+
+export default SettingsPage;