stl pagination (#281)

kscalelabs · Aug 9, 2024 · 2ff3723 · 2ff3723
1 parent 0042d01
commit 2ff3723
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 54 deletions.
diff --git 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<LoginType> = 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
@@ -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<SignupType> = 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
@@ -7,33 +7,18 @@ 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";
 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 (
-    <>
-      <mesh>
-        <primitive object={geom} attach="geometry" />
-        <meshStandardMaterial color={"orange"} />
-      </mesh>
-      <ambientLight />
-      <pointLight position={[10, 10, 10]} />
-    </>
-  );
-};
-
 interface SingleStlViewerProps {
   url: string;
 }
@@ -48,12 +33,11 @@ const SingleStlViewer = (props: SingleStlViewerProps) => {
         <Suspense fallback={<Loader />}>
           <PerspectiveCamera
             makeDefault
-            fov={10}
+            fov={50}
             aspect={window.innerWidth / window.innerHeight}
-            position={[3, 0.15, 3]}
-            near={1}
-            far={1000}
-            position-z={600}
+            position={[10, 8, 25]}
+            near={0.1}
+            far={500}
           ></PerspectiveCamera>
           <Editor setSelected={setSelected} url={url} />
           <directionalLight color={0xeb4634} position={[1, 0.75, 0.5]} />
@@ -84,6 +68,10 @@ const ListingSTLs = (props: Props) => {
   const [deletingIds, setDeletingIds] = useState<string[]>([]);
   const [collapsed, setCollapsed] = useState<boolean>(true);
 
+  const [currentIdUnchecked, setCurrentId] = useState<number>(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 ? (
     <div className="flex flex-col items-center justify-center my-4 p-4 relative">
-      {stls.length > 0 ? (
+      {stl !== null ? (
         <>
           <Button
             onClick={() => setCollapsed(!collapsed)}
@@ -120,28 +111,48 @@ const ListingSTLs = (props: Props) => {
               <FaCaretSquareDown className="ml-4 text-gray-700" />
             )}
           </Button>
-          {!collapsed && (
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mx-auto h-96">
-              {stls.map((stl) => (
-                <div
+          {!collapsed && stls.length > 1 && (
+            <div className="inline-flex rounded-md shadow-sm mb-2">
+              {stls.map((stl, idx) => (
+                <button
+                  type="button"
+                  className={cx(
+                    "py-1",
+                    idx === currentId
+                      ? "bg-gray-100 dark:bg-gray-600"
+                      : "bg-white dark:bg-gray-800",
+                    idx === 0 && "rounded-l-md border-l",
+                    idx === stls.length - 1 && "rounded-r-md border-r",
+                    "px-4 py-2 text-sm font-medium border-t border-b border-gray-200 hover:bg-gray-100",
+                  )}
                   key={stl.artifact_id}
-                  className="bg-background rounded-lg p-2 relative"
+                  onClick={() => setCurrentId(idx)}
                 >
-                  <SingleStlViewer url={stl.url} />
-                  {edit && (
-                    <Button
-                      onClick={() => onDelete(stl.artifact_id)}
-                      variant="destructive"
-                      className="absolute top-5 right-5 rounded-full"
-                      disabled={deletingIds.includes(stl.artifact_id)}
-                    >
-                      <FaTimes />
-                    </Button>
-                  )}
-                </div>
+                  {idx + 1}
+                </button>
               ))}
             </div>
           )}
+          {!collapsed && (
+            <div className="grid grid-cols-1 gap-2 mx-auto w-full aspect-square border-2 border-background rounded-lg p-2">
+              <div
+                key={stl.artifact_id}
+                className="bg-background rounded-lg p-2 relative"
+              >
+                <SingleStlViewer url={stl.url} />
+                {edit && (
+                  <Button
+                    onClick={() => onDelete(stl.artifact_id)}
+                    variant="destructive"
+                    className="absolute top-5 right-5 rounded-full"
+                    disabled={deletingIds.includes(stl.artifact_id)}
+                  >
+                    <FaTimes />
+                  </Button>
+                )}
+              </div>
+            </div>
+          )}
         </>
       ) : (
         <p>

diff --git 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 (
     <div className="relative w-full">
       {/* 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
       >
-        <FaCaretLeft className="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" />
+        <FaCaretRight className="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" />
         <span className="sr-only">Next</span>
       </button>
     </div>

diff --git 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<paths>({
     baseUrl: BACKEND_URL,
   });

diff --git 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"]
     }
   ]