credentials added

alexandyrzph · Aug 4, 2022 · 019de04 · 019de04
1 parent 7bd3226
commit 019de04
Show file tree

Hide file tree

Showing 12 changed files with 197 additions and 207 deletions.
diff --git a/pixelplace/package-lock.json b/pixelplace/package-lock.json
diff --git a/pixelplace/package.json b/pixelplace/package.json
@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "animate.css": "^4.1.1",
     "firebase": "^9.9.1",
     "formik": "^2.2.9",
     "react": "^18.2.0",

diff --git a/pixelplace/src/App.js b/pixelplace/src/App.js
@@ -16,8 +16,8 @@ import { BeatLoader } from "react-spinners";
 import "react-toastify/dist/ReactToastify.css";
 
 function App() {
-    const { isLoading } = useUserAuth();
-    console.log(isLoading);
+    const { isLoading, user } = useUserAuth();
+
     if (!isLoading) {
         return (
             <div className="App">

diff --git a/pixelplace/src/components/Forms/PostCreateForm.js b/pixelplace/src/components/Forms/PostCreateForm.js
@@ -52,7 +52,6 @@ const PostCreateForm = () => {
                     user.photoURL ??
                     "https://firebasestorage.googleapis.com/v0/b/pixelplace-b8fac.appspot.com/o/1024px-Faenza-avatar-default-symbolic.svg.png?alt=media&token=986532b2-c109-4faf-b607-30ce2a1e1ff8",
                 likes: [],
-                comments: [],
             });
             navigate("/posts");
         } catch (err) {

diff --git a/pixelplace/src/components/Home/Home.js b/pixelplace/src/components/Home/Home.js
@@ -7,7 +7,7 @@ const Home = () => {
         <div>
             <div className="flex relative z-20 justify-center 2xl:justify-between w-full max-w-xs sm:max-w-sm md:max-w-lg lg:max-w-3xl xl:max-w-3xl overflow-ellipsis 2xl:max-w-7xl mx-auto h-screen pt-[30%] md:pt-[10%]">
                 <div className="relative">
-                    <div className="text-center md:text-left mb-12">
+                    <div className="text-center md:text-left mb-12 x-trans">
                         <p className="text-5xl text-center 2xl:text-left md:text-6xl mb-6 font-neu font-light">
                             Wonder where <br /> to share
                             <span className="font-extrabold">

diff --git a/pixelplace/src/components/Navbar/Navbar.js b/pixelplace/src/components/Navbar/Navbar.js
@@ -35,7 +35,7 @@ const Navbar = () => {
 
     return (
         <div className="bg-neu-white w-full shadow-md">
-            <ul className="flex justify-between items-center max-w-md px-2 md:px-0 md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl mx-auto w-full py-2">
+            <ul className="flex justify-between items-center max-w-md px-2 md:px-0 sm:max-w-lg md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl mx-auto w-full py-2">
                 <li>
                     <Link
                         className="text-2xl font-logo tracking-wider text-[#2e2e2e] hover:text-black duration-200"

diff --git a/pixelplace/src/components/PostDetails/PostDetails.js b/pixelplace/src/components/PostDetails/PostDetails.js
diff --git a/pixelplace/src/components/PostItem/PostItem.js b/pixelplace/src/components/PostItem/PostItem.js
@@ -23,7 +23,6 @@ const PostItem = ({
 
     useEffect(() => {
         const handleOutsideClick = (event) => {
-            // debugger;
             if (dropdownShow) {
                 if (!menuRef.current.contains(event.target)) {
                     if (!dropdownShow) return;
@@ -43,12 +42,12 @@ const PostItem = ({
     };
 
     return (
-        <div className="break-inside mb-4 shadow-md rounded-lg shadow-gray-300">
-            <div className=" bg-white rounded-lg border-2 border-neu-black">
-                <div className="p-2 flex justify-between items-center">
-                    <div className="flex items-center">
+        <div className="break-inside mb-4 shadow-xl lg:hover:-translate-y-[1px] duration-300">
+            <div className="bg-white rounded-lg border-2 border-neu-black">
+                <div className="flex justify-between items-center">
+                    <div className="flex p-2 items-center">
                         <img
-                            className="w-10 h-10 object-cover object-center rounded-full mr-4"
+                            className="w-8 h-8 object-cover object-center rounded-full mr-3"
                             src={ownerAvatarURL}
                             alt=""
                         />
@@ -57,6 +56,7 @@ const PostItem = ({
                     {user && user.uid === ownerId ? (
                         <div ref={menuRef} className="relative">
                             <HiDotsHorizontal
+                                className="mr-2 hover:bg-slate-200 rounded-full text-2xl"
                                 cursor={"pointer"}
                                 onClick={() => setDropdownShow(!dropdownShow)}
                             />

diff --git a/pixelplace/src/components/Posts/Posts.js b/pixelplace/src/components/Posts/Posts.js
@@ -1,14 +1,12 @@
 import { useUserAuth } from "../../context/UserAuthContext";
 import { useEffect, useState } from "react";
 import { PostItem } from "..";
-import { BeatLoader } from "react-spinners";
 import { collection, onSnapshot, orderBy, query } from "firebase/firestore";
 import { db } from "../../firebase";
 import { Link } from "react-router-dom";
 
 const Posts = () => {
     const { user } = useUserAuth();
-    const [isLoading, setIsLoading] = useState(false);
     const [posts, setPosts] = useState([]);
     useEffect(() => {
         const q = query(collection(db, "Posts"), orderBy("timeStamp", "desc"));
@@ -18,49 +16,40 @@ const Posts = () => {
                 const posts = snapshot.docs.map((post) => ({ postId: post.id, ...post.data() }));
                 setPosts(posts);
             },
-            (err) => console.log(err),
-            () => setIsLoading(false)
+            (err) => console.log(err)
         );
     }, []);
 
-    if (!isLoading) {
-        return (
-            <div className="relative max-w-md px-1 md:px-0 sm:max-w-lg md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl mx-auto w-full h-screen py-16">
-                <div className="masonry sm:masonry-sm md:masonry-md xl:masonry-lg">
-                    {posts && posts?.length > 0 ? (
-                        posts.map((post) => <PostItem key={post.postId} {...post} user={user} />)
-                    ) : (
-                        <div>
-                            <h2 className="text-[40px] text-center font-neu absolute top-[20%] left-0 right-0">
-                                No posts found
-                            </h2>
-                            <Link to="/post-create">
-                                <button className="absolute font-mono top-[30%] left-[10%] right-[10%] sm:left-[30%] sm:right-[30%] hover:shadow-neu-shadow hover:-translate-y-1 duration-200 border-2 border-neu-black px-6 py-3 rounded-lg bg-neu-yellow font-bold">
-                                    Create Post
-                                </button>
-                            </Link>
-                        </div>
-                    )}
-                </div>
-                <img
-                    className="lg:block absolute top-5 -left-20 opacity-10 -z-10 w-[200px]"
-                    src="https://firebasestorage.googleapis.com/v0/b/pixelplace-b8fac.appspot.com/o/26432.svg?alt=media&token=17971521-81ad-4e86-bd5b-f0051d4c5a13"
-                    alt="Dots"
-                />
-                <img
-                    className="lg:block absolute top-100 -right-20 opacity-10 -z-10 w-[200px]"
-                    src="https://firebasestorage.googleapis.com/v0/b/pixelplace-b8fac.appspot.com/o/26432.svg?alt=media&token=17971521-81ad-4e86-bd5b-f0051d4c5a13"
-                    alt="Dots"
-                />
+    return (
+        <div className="relative max-w-md px-1 md:px-0 sm:max-w-lg md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl mx-auto w-full h-screen py-16">
+            <div className="masonry sm:masonry-sm md:masonry-md xl:masonry-lg">
+                {posts.length > 0 ? (
+                    posts.map((post) => <PostItem key={post.postId} {...post} user={user} />)
+                ) : (
+                    <div>
+                        <h2 className="text-[40px] text-center font-neu absolute top-[20%] left-0 right-0">
+                            No posts found
+                        </h2>
+                        <Link to="/post-create">
+                            <button className="absolute font-mono top-[30%] left-[10%] right-[10%] sm:left-[30%] sm:right-[30%] hover:shadow-neu-shadow hover:-translate-y-1 duration-200 border-2 border-neu-black px-6 py-3 rounded-lg bg-neu-yellow font-bold">
+                                Create Post
+                            </button>
+                        </Link>
+                    </div>
+                )}
             </div>
-        );
-    } else {
-        return (
-            <div className="flex justify-center items-center h-screen bg-neu-white">
-                <BeatLoader size={"5rem"} color={"#1e1e1e"} />
-            </div>
-        );
-    }
+            <img
+                className="lg:block absolute top-5 -left-20 opacity-10 -z-10 w-[200px]"
+                src="https://firebasestorage.googleapis.com/v0/b/pixelplace-b8fac.appspot.com/o/26432.svg?alt=media&token=17971521-81ad-4e86-bd5b-f0051d4c5a13"
+                alt="Dots"
+            />
+            <img
+                className="lg:block absolute top-100 -right-20 opacity-10 -z-10 w-[200px]"
+                src="https://firebasestorage.googleapis.com/v0/b/pixelplace-b8fac.appspot.com/o/26432.svg?alt=media&token=17971521-81ad-4e86-bd5b-f0051d4c5a13"
+                alt="Dots"
+            />
+        </div>
+    );
 };
 
 export default Posts;
diff --git a/pixelplace/src/firebase.js b/pixelplace/src/firebase.js
@@ -1,20 +1,23 @@
 import { initializeApp } from "firebase/app";
-import { getAuth } from "firebase/auth";
+import { browserLocalPersistence, getAuth, setPersistence } from "firebase/auth";
 import { getFirestore } from "firebase/firestore";
 import { getStorage } from "firebase/storage";
 
 const firebaseConfig = {
-    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
-    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
-    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
-    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
-    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
-    appId: process.env.REACT_APP_FIREBASE_APP_ID,
-    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
+    apiKey: "AIzaSyCW_cmKgEljXcoCdHbpMJggAhJ1O0x_dCE",
+    authDomain: "pixelplace-b8fac.firebaseapp.com",
+    projectId: "pixelplace-b8fac",
+    storageBucket: "pixelplace-b8fac.appspot.com",
+    messagingSenderId: "109515736575",
+    appId: "1:109515736575:web:2feff28d2566dfe9a5d3ca",
+    measurementId: "G-CTSSLP5979",
 };
 
 const app = initializeApp(firebaseConfig);
 export const db = getFirestore(app);
 export const auth = getAuth(app);
+setPersistence(auth, browserLocalPersistence)
+    .then()
+    .catch((err) => console.log(err));
 export const storage = getStorage(app);
 export default app;
diff --git a/pixelplace/src/index.css b/pixelplace/src/index.css
@@ -15,7 +15,7 @@
             column-gap: 2em;
             column-count: 3;
         }
-        
+
         .break-inside {
             break-inside: avoid;
         }

diff --git a/pixelplace/tailwind.config.js b/pixelplace/tailwind.config.js
@@ -3,26 +3,26 @@
 const defaultTheme = require("tailwindcss/defaultTheme");
 
 module.exports = {
-  content: ["./src/**/*.{js,jsx,ts,tsx}"],
-  theme: {
-    extend: {
-      boxShadow: {
-        "neu-shadow": "2px 2px 0px black",
-      },
-      colors: {
-        "neu-white": "rgb(255,255,244)",
-        "neu-yellow": "rgb(219,253,0)",
-        "neu-black": "rgb(39,36,30)",
-      },
-      screens: {
-        xs: "475px",
-        ...defaultTheme.screens,
-      },
-      fontFamily: {
-        neu: ['"Roboto"', '"sans-serif"'],
-        logo: ['"Righteous"', '"cursive"'],
-      },
+    content: ["./src/**/*.{js,jsx,ts,tsx}"],
+    theme: {
+        extend: {
+            boxShadow: {
+                "neu-shadow": "2px 2px 0px black",
+            },
+            colors: {
+                "neu-white": "rgb(255,255,244)",
+                "neu-yellow": "rgb(219,253,0)",
+                "neu-black": "rgb(39,36,30)",
+            },
+            screens: {
+                xs: "475px",
+                ...defaultTheme.screens,
+            },
+            fontFamily: {
+                neu: ['"Roboto"', '"sans-serif"'],
+                logo: ['"Righteous"', '"cursive"'],
+            },
+        },
     },
-  },
-  plugins: [],
+    plugins: [],
 };