adding edit/delete parts buttons

kscalelabs · Jun 12, 2024 · 7300cc8 · 7300cc8
1 parent ec3865e
commit 7300cc8
Showing 1 changed file with 81 additions and 0 deletions.
diff --git a/frontend/src/pages/PartDetails.tsx b/frontend/src/pages/PartDetails.tsx
@@ -27,16 +27,21 @@ const PartDetails = () => {
   const { addAlert } = useAlertQueue();
   const auth = useAuthentication();
   const auth_api = new api(auth.api);
+  const [userId, setUserId] = useState<string | null>(null);
   const { id } = useParams();
   const [show, setShow] = useState(false);
   const [ownerEmail, setOwnerEmail] = useState<string | null>(null);
   const [part, setPart] = useState<PartDetailsResponse | null>(null);
   const [imageIndex, setImageIndex] = useState(0);
   const [error, setError] = useState<string | null>(null);
+  const [showDelete, setShowDelete] = useState(false);
 
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
 
+  const handleShowDelete = () => setShowDelete(true);
+  const handleCloseDelete = () => setShowDelete(false);
+
   useEffect(() => {
     const fetchPart = async () => {
       try {
@@ -219,6 +224,82 @@ const PartDetails = () => {
           </ButtonGroup>
         </Modal.Footer>
       </Modal>
+      <>
+        {/* {part.owner === userId && ( */}
+        {part.owner === part.owner && (
+          <>
+            <Row className="justify-content-end mt-2">
+              <Col md={3} sm={12}>
+                <Button
+                  variant="primary"
+                  size="lg"
+                  style={{
+                    backgroundColor: "light-green",
+                    borderColor: "",
+                    padding: "10px",
+                    width: "100%",
+                  }}
+                  onClick={() => {
+                    navigate(`/edit-part/${id}/`);
+                  }}
+                >
+                  Edit Robot
+                </Button>
+              </Col>
+              <Col md={3} sm={12}>
+                <Button
+                  variant="danger"
+                  size="lg"
+                  style={{
+                    backgroundColor: "light-green",
+                    borderColor: "",
+                    padding: "10px",
+                    width: "100%",
+                  }}
+                  onClick={() => {
+                    handleShowDelete();
+                  }}
+                >
+                  Delete Part
+                </Button>
+              </Col>
+            </Row>
+            <Modal
+              show={showDelete}
+              onHide={handleCloseDelete}
+              fullscreen="md-down"
+              centered
+              size="lg"
+              scrollable
+            >
+              <Modal.Header closeButton>
+                <Modal.Title>
+                  Are you sure you want to delete this part?
+                </Modal.Title>
+              </Modal.Header>
+              <Modal.Footer className="d-flex justify-content-start">
+                <Button
+                  variant="danger"
+                  onClick={async () => {
+                    // await auth_api.deletePart(id);
+                    navigate(`/parts/`);
+                  }}
+                >
+                  Delete Part
+                </Button>
+                <Button
+                  variant="outline-secondary"
+                  onClick={() => {
+                    handleCloseDelete();
+                  }}
+                >
+                  Cancel
+                </Button>
+              </Modal.Footer>
+            </Modal>
+          </>
+        )}
+      </>
     </>
   );
 };