fix: profile ts

redxzeta · May 21, 2022 · 21f5a87 · 21f5a87
1 parent ef021f3
commit 21f5a87
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 87 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -12,7 +12,7 @@ import About from "./components/about/About";
 import ForgotPassword from "./components/accounts/ForgotPassword";
 import Register from "./components/accounts/Register";
 import SLogin from "./components/accounts/SLogin";
-// import Profile from "./components/accounts/profile/Profile";
+import Profile from "./components/accounts/profile/Profile";
 // import ResetPassword from "./components/accounts/settings/resetPassword";
 import Donate from "./components/donate/Donate";
 import Home from "./components/home/Home";
@@ -54,7 +54,7 @@ export default function App() {
                   </PrivateRoute>
                 }
               /> */}
-              {/* <Route path="profile" element={<Profile />} /> */}
+              <Route path="profile/:name" element={<Profile />} />
               <Route path="/" element={<Home />} />
               <Route path="*" element={<NotFound />} />
             </Routes>

diff --git a/src/components/accounts/profile/Profile.tsx b/src/components/accounts/profile/Profile.tsx
@@ -1,96 +1,83 @@
-/* eslint-disable */
-// @ts-nocheck
-import { useState } from "react";
-import { Button, Col, Container, Image, Row } from "react-bootstrap";
-import { Link } from "react-router-dom";
-import { useFilter, useSelect } from "react-supabase";
-
-import { useAuth } from "../../../context/SupaContext";
-import EditProfileModal from "./EditProfileModal";
+import { PostgrestError } from "@supabase/supabase-js";
+import PetCard from "components/layout/PetCard";
+import { usePetAuth } from "context/TokenContext";
+import { useEffect, useState } from "react";
+import { Container, Image, Row } from "react-bootstrap";
+import { Navigate, useParams } from "react-router-dom";
+import { useClient } from "react-supabase";
+import { FavoritePets, IProfileUpdate } from "reducers/supaReducer";
+import { lookUpPet } from "routes/API";
+import useSWR from "swr";
+import { multipleFetcher } from "utils/petInfoFetcher";
+
+import LoadPlaceHolder from "../../shared/PlaceHolderCard";
+import CandyLandImg from "./candyland.png";
 import "./profile.css";
 
+export type ProfileType = {
+  avatar_url: string;
+  description: string;
+} & IProfileUpdate;
+
 const Profile = () => {
-  // const [userName, setUserName] = useState(sampleUsername);
+  const { name } = useParams<{ name: string }>();
+  if (!name) return <Navigate to="/" replace={true} />;
 
-  const { username } = useAuth();
-  const filter = useFilter(
-    (query) => query.eq("username", username),
-    [username]
-  );
-  const [{ data, fetching }] = useSelect("profiles", {
-    filter,
-  });
-  const [showModal, setShow] = useState(false);
-  const handleClose = () => setShow(false);
-  const handleShow = () => setShow(true);
-
-  let x = "";
-
-  if (!data || fetching) {
-    x = (
-      <div className="profile__img blank">
-        <h2>Loading</h2>
-      </div>
-    );
-  } else {
-    x = (
-      <Image
-        src={data.avatar_url}
-        className="profile__img"
-        alt="username"
-        roundedCircle
-      />
-    );
-  }
-  const initialState = data && {
-    username: data.username,
-    description: data.description,
-    avatar_url: data.avatar_url,
+  const profileSearch = name;
+  const client = useClient();
+  const [profile, setProfile] = useState<ProfileType | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [errorProfile, setErrorProfile] = useState<PostgrestError | null>();
+
+  const fetchProfile = async () => {
+    setLoading(true);
+    setErrorProfile(null);
+    try {
+      const { data, error } = await client
+        .from<ProfileType>("profiles")
+        .select("*, favoritepets(id,pet,created_at) ")
+        .eq("username", profileSearch)
+
+        .single();
+      if (error) throw error;
+      setProfile(data);
+    } catch (error) {
+      setProfile(null);
+      setErrorProfile(error as PostgrestError);
+    } finally {
+      setLoading(false);
+    }
   };
 
+  useEffect(() => {
+    fetchProfile();
+  }, []);
+
+  if (loading) return <h1>Loading</h1>;
+
+  if (errorProfile || !profile) return <h1>ERROR</h1>;
+
+  const showFeaturedFavoritedPets = profile.favoritepets.slice(0, 3);
   return (
     <Container className="pawhub">
       <main className="profile__section">
-        {/* <Image
-        src="https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500"
-        className="banner"
-        fluid
-      /> */}
-        <section className="profile--banner" />
-        {x}
-
-        <h5>{(data && data.username) || "Some Pawesome User"}</h5>
-
-        <small>
-          {(data && data.description) || "Some Pawerffic Description"}
-        </small>
-
-        <Button variant="primary" onClick={handleShow}>
-          Edit
-        </Button>
-
-        {data && (
-          <EditProfileModal
-            show={showModal}
-            handleClose={handleClose}
-            initialState={initialState}
-          />
-        )}
-        <Link to="">
-          <Button className="mt-5 px-5" variant="primary">
-            New Story
-          </Button>
-        </Link>
-
-        <Container className="story-card">
+        <Image src={CandyLandImg} alt="background" />
+        <Image
+          src={profile.avatar_url}
+          className="profile__img"
+          alt="username"
+          roundedCircle
+        />
+
+        <h5>{profile.username || "A Pawsome User"}</h5>
+
+        <small>{profile.description}</small>
+
+        <ShowFavorites favoritePets={showFeaturedFavoritedPets} />
+
+        {/* <Container className="story-card">
           <Row>
-            <Col sm={4}>
-              {/* <Image
-              src="https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500"
-              fluid
-            /> */}{" "}
-              <section className="profile--banner" />
-            </Col>
+            <Col sm={4}></Col>
             <Col sm={8}>
               <div className="card-body">
                 <h1 className="story-title">This is title of story</h1>
@@ -109,10 +96,71 @@ const Profile = () => {
               </div>
             </Col>
           </Row>
-        </Container>
+        </Container> */}
       </main>
     </Container>
   );
 };
 
 export default Profile;
+
+const ShowFavorites = ({ favoritePets }: { favoritePets: FavoritePets[] }) => {
+  const { tokenHeaders } = usePetAuth();
+  const urlPets = favoritePets.map((f) => lookUpPet + f.pet);
+
+  if (urlPets.length === 0)
+    return (
+      <Container>
+        <h4>You have not marked a pet as a favorite yet :(</h4>
+        <h5>Start selecting your favorites to find your future best friend!</h5>
+      </Container>
+    );
+
+  const { error, data: petList } = useSWR(
+    tokenHeaders ? [urlPets, tokenHeaders] : null,
+    multipleFetcher
+  );
+
+  const isLoading = !petList && !error;
+  if (isLoading)
+    return (
+      <Container className="pawhub">
+        <div className="petList__container">
+          <Row className="mb-3 w-100 petList">
+            <LoadPlaceHolder />
+            <LoadPlaceHolder />
+            <LoadPlaceHolder />
+          </Row>{" "}
+        </div>
+      </Container>
+    );
+
+  if (error || !petList)
+    return (
+      <Container>
+        <h3>There was a problem getting the pet information :(</h3>
+        <h4>Try again later!</h4>
+      </Container>
+    );
+
+  return (
+    <Container className="pawhub my-4">
+      <div className="petList__container">
+        <h1>Favorited Pets</h1>
+        <Row className="mb-3 w-100 petList fadeInUp">
+          {petList.map((pet) => (
+            <PetCard
+              key={pet.id}
+              breeds={pet.breeds}
+              id={pet.id}
+              name={pet.name}
+              photos={pet.photos}
+              type={pet.type}
+              primary_photo_cropped={pet.primary_photo_cropped}
+            />
+          ))}
+        </Row>
+      </div>
+    </Container>
+  );
+};
diff --git a/src/components/accounts/profile/candyland.png b/src/components/accounts/profile/candyland.png
diff --git a/src/components/layout/NavigationBar.tsx b/src/components/layout/NavigationBar.tsx
@@ -96,7 +96,7 @@ export default function NavigationBar() {
                   <NavDropdown.Item as={Link} to="/reset-password">
                     Reset Password
                   </NavDropdown.Item>
-                  <NavDropdown.Item as={Link} to="/profile">
+                  <NavDropdown.Item as={Link} to={`/profile/${username}`}>
                     Profile
                   </NavDropdown.Item>
                   <NavDropdown.Item