#13 Add dropdown to profile to edit forms

SandraBergstrom · Jun 29, 2023 · e9ed945 · e9ed945
1 parent f696f7e
commit e9ed945
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 0 deletions.
diff --git a/src/App.js b/src/App.js
@@ -11,6 +11,9 @@ import PostsPage from "./pages/posts/PostsPage";
 import { useCurrentUser } from "./contexts/CurrentUserContext";
 import PostEditForm from "./pages/posts/PostEditForm";
 import TravelerPage from "./pages/travelers/TravelerPage";
+import UsernameForm from "./pages/travelers/UsernameForm";
+import UserPasswordForm from "./pages/travelers/UserPasswordForm";
+import TravelerEditForm from "./pages/travelers/TravelerEditForm";
 
 function App() {
   const currentUser = useCurrentUser();
@@ -56,6 +59,9 @@ function App() {
           <Route exact path="/posts/:id/edit" render={() => <PostEditForm />} />
           <Route exact path="/posts/:id" render={() => <PostPage />} />
           <Route exact path="/travelers/:id" render={() => <TravelerPage />} />
+          <Route exact path="/travelers/:id/edit/username" render={() => <UsernameForm />} />
+          <Route exact path="/travelers/:id/edit/password" render={() => <UserPasswordForm />} />
+          <Route exact path="/travelers/:id/edit" render={() => <TravelerEditForm />} />
           <Route render={() => <p>Page not found!</p>} />
         </Switch>
       </Container>

diff --git a/src/components/MoreDropdown.js b/src/components/MoreDropdown.js
@@ -3,6 +3,7 @@ import Dropdown from "react-bootstrap/Dropdown";
 import styles from "../styles/MoreDropdown.module.css"
 import OverlayTrigger from "react-bootstrap/OverlayTrigger";
 import Tooltip from "react-bootstrap/Tooltip";
+import { useHistory } from "react-router-dom";
 
 // The forwardRef is important!!
 // Dropdown needs access to the DOM node in order to position the Menu
@@ -17,6 +18,37 @@ const ThreeDots = React.forwardRef(({ onClick }, ref) => (
     />
   ));
 
+  export function TravelerEditDropdown({ id }) {
+    const history = useHistory();
+    return (
+      <Dropdown className={`ml-auto px-3 ${styles.Absolute}`} drop="left">
+        <Dropdown.Toggle as={ThreeDots} />
+        <Dropdown.Menu>
+          <Dropdown.Item
+            onClick={() => history.push(`/travelers/${id}/edit`)}
+            aria-label="edit-traveler"
+          >
+            <i className="fas fa-edit" /> edit traveler
+          </Dropdown.Item>
+          <Dropdown.Item
+            onClick={() => history.push(`/travelers/${id}/edit/username`)}
+            aria-label="edit-username"
+          >
+            <i className="far fa-id-card" />
+            change username
+          </Dropdown.Item>
+          <Dropdown.Item
+            onClick={() => history.push(`/travelers/${id}/edit/password`)}
+            aria-label="edit-password"
+          >
+            <i className="fas fa-key" />
+            change password
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+  }
+
   export const MoreDropdown = ({ handleEdit, handleDelete }) => {
     return (
       <Dropdown className={`ml-auto ${styles.Dots}`} drop="left">

diff --git a/src/pages/travelers/TravelerPage.js b/src/pages/travelers/TravelerPage.js
@@ -24,6 +24,7 @@ import InfiniteScroll from "react-infinite-scroll-component";
 import Post from "../posts/Post";
 import { fetchMoreData } from "../../utils/utils";
 import NoResult from "../../assets/no-results.png";
+import { ProfileEditDropdown, TravelerEditDropdown } from "../../components/MoreDropdown"
 
 function TravelerPage() {
   const [hasLoaded, setHasLoaded] = useState(false);
@@ -59,6 +60,7 @@ function TravelerPage() {
 
   const mainTraveler = (
     <>
+    {traveler?.is_owner && <TravelerEditDropdown id={traveler?.id} />}
       <Row noGutters className="px-3 text-center">
         <Col lg={3} className="text-lg-left">
           <Image