From 2ff3723a0d9464c931a8ac1055173beb4dc8c89e Mon Sep 17 00:00:00 2001 From: Ben Bolte Date: Fri, 9 Aug 2024 14:27:27 -0700 Subject: [PATCH] stl pagination (#281) --- frontend/src/components/auth/LoginForm.tsx | 5 +- frontend/src/components/auth/SignupForm.tsx | 9 +- .../src/components/listing/ListingSTLs.tsx | 91 +++++++++++-------- frontend/src/components/ui/Carousel.tsx | 6 +- frontend/src/hooks/useAuth.tsx | 2 - local-cors-config.json | 5 +- 6 files changed, 64 insertions(+), 54 deletions(-) diff --git a/frontend/src/components/auth/LoginForm.tsx b/frontend/src/components/auth/LoginForm.tsx index 01a2d275..d97c756a 100644 --- a/frontend/src/components/auth/LoginForm.tsx +++ b/frontend/src/components/auth/LoginForm.tsx @@ -1,6 +1,7 @@ import { SubmitHandler, useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; +import { useAlertQueue } from "hooks/useAlertQueue"; import { LoginSchema, LoginType } from "types"; import { Button } from "components/ui/Button/Button"; @@ -17,9 +18,11 @@ const LoginForm = () => { resolver: zodResolver(LoginSchema), }); + const { addAlert } = useAlertQueue(); + const onSubmit: SubmitHandler = async (data: LoginType) => { // TODO: Add an api endpoint to send the credentials details to backend and email verification. - console.log(data); + addAlert(`Not yet implemented: ${data.email}`, "success"); }; return ( diff --git a/frontend/src/components/auth/SignupForm.tsx b/frontend/src/components/auth/SignupForm.tsx index a1fb54c2..d301023a 100644 --- a/frontend/src/components/auth/SignupForm.tsx +++ b/frontend/src/components/auth/SignupForm.tsx @@ -2,6 +2,7 @@ import { SubmitHandler, useForm } from "react-hook-form"; import { Link } from "react-router-dom"; import { zodResolver } from "@hookform/resolvers/zod"; +import { useAlertQueue } from "hooks/useAlertQueue"; import { SignUpSchema, SignupType } from "types"; import zxcvbn from "zxcvbn"; @@ -24,18 +25,20 @@ const SignupForm = () => { const confirmPassword = watch("confirmPassword") || ""; const passwordStrength = password.length > 0 ? zxcvbn(password).score : 0; + const { addAlert, addErrorAlert } = useAlertQueue(); + const onSubmit: SubmitHandler = async (data: SignupType) => { // Exit account creation early if password too weak or not matching if (passwordStrength < 2) { - console.log("Please enter a stronger a password"); + addErrorAlert("Please enter a stronger password"); return; } else if (password !== confirmPassword) { - console.log("Passwords do not match"); + addErrorAlert("Passwords do not match"); return; } // TODO: Add an api endpoint to send the credentials details to backend and email verification. - console.log(data); + addAlert(`Not yet implemented: ${data.email}`, "success"); }; return ( diff --git a/frontend/src/components/listing/ListingSTLs.tsx b/frontend/src/components/listing/ListingSTLs.tsx index 799a801e..0c01ee83 100644 --- a/frontend/src/components/listing/ListingSTLs.tsx +++ b/frontend/src/components/listing/ListingSTLs.tsx @@ -7,12 +7,11 @@ import { FaCaretSquareDown, FaCaretSquareUp, FaTimes } from "react-icons/fa"; import { OrbitControls, PerspectiveCamera } from "@react-three/drei"; import { Canvas } from "@react-three/fiber"; -import { useLoader } from "@react-three/fiber"; +import { cx } from "class-variance-authority"; import { components } from "gen/api"; import { useAlertQueue } from "hooks/useAlertQueue"; import { useAuthentication } from "hooks/useAuth"; import { Object3D } from "three"; -import { STLLoader } from "three/examples/jsm/loaders/STLLoader"; import Editor from "components/Editor"; import Loader from "components/Loader"; @@ -20,20 +19,6 @@ import { Panel } from "components/MultiLeva"; import ListingFileUpload from "components/listing/ListingFileUpload"; import { Button } from "components/ui/Button/Button"; -export const Model = ({ url }: { url: string }) => { - const geom = useLoader(STLLoader, url); - return ( - <> - - - - - - - - ); -}; - interface SingleStlViewerProps { url: string; } @@ -48,12 +33,11 @@ const SingleStlViewer = (props: SingleStlViewerProps) => { }> @@ -84,6 +68,10 @@ const ListingSTLs = (props: Props) => { const [deletingIds, setDeletingIds] = useState([]); const [collapsed, setCollapsed] = useState(true); + const [currentIdUnchecked, setCurrentId] = useState(0); + const currentId = Math.min(Math.max(currentIdUnchecked, 0), stls.length - 1); + const stl = stls.length === 0 ? null : stls[currentId]; + const onDelete = async (stlId: string) => { setDeletingIds([...deletingIds, stlId]); @@ -99,14 +87,17 @@ const ListingSTLs = (props: Props) => { if (error) { addErrorAlert(error); } else { + if (currentId >= stls.length) { + setCurrentId(stls.length - 1); + } setStls(stls.filter((stl) => stl.artifact_id !== stlId)); setDeletingIds(deletingIds.filter((id) => id !== stlId)); } }; - return stls.length > 0 || edit ? ( + return stl !== null || edit ? (
- {stls.length > 0 ? ( + {stl !== null ? ( <> - {!collapsed && ( -
- {stls.map((stl) => ( -
1 && ( +
+ {stls.map((stl, idx) => ( + - )} -
+ {idx + 1} + ))}
)} + {!collapsed && ( +
+
+ + {edit && ( + + )} +
+
+ )} ) : (

diff --git a/frontend/src/components/ui/Carousel.tsx b/frontend/src/components/ui/Carousel.tsx index be47fea2..32c5a19f 100644 --- a/frontend/src/components/ui/Carousel.tsx +++ b/frontend/src/components/ui/Carousel.tsx @@ -1,4 +1,4 @@ -import { FaCaretLeft } from "react-icons/fa"; +import { FaCaretLeft, FaCaretRight } from "react-icons/fa"; interface Props { items: { @@ -12,8 +12,6 @@ const Carousel = ({ items }: Props) => { return <>; } - console.log("items:", items); - return (

{/* Carousel wrapper */} @@ -61,7 +59,7 @@ const Carousel = ({ items }: Props) => { className="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next > - + Next
diff --git a/frontend/src/hooks/useAuth.tsx b/frontend/src/hooks/useAuth.tsx index 424c308b..d0e3753e 100644 --- a/frontend/src/hooks/useAuth.tsx +++ b/frontend/src/hooks/useAuth.tsx @@ -50,8 +50,6 @@ export const AuthenticationProvider = (props: AuthenticationProviderProps) => { getLocalStorageAuth(), ); - console.log(BACKEND_URL); - const client = createClient({ baseUrl: BACKEND_URL, }); diff --git a/local-cors-config.json b/local-cors-config.json index 94fbc8d8..40ec9fcd 100644 --- a/local-cors-config.json +++ b/local-cors-config.json @@ -3,10 +3,7 @@ { "AllowedHeaders": ["*"], "AllowedMethods": ["GET", "POST", "PUT", "HEAD", "DELETE"], - "AllowedOrigins": [ - "http://127.0.0.1:3000", - "http://127.0.0.1:8080" - ], + "AllowedOrigins": ["*"], "ExposeHeaders": ["ETag"] } ]