added remove and add user stories, guest access, css changes

H3ir · Sep 13, 2022 · d232e0f · d232e0f
1 parent 35bf4d0
commit d232e0f
Show file tree

Hide file tree

Showing 13 changed files with 208 additions and 64 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,6 +15,8 @@
 # production
 /build
 
+/guestAccount
+
 # misc
 .DS_Store
 *.pem

diff --git a/components/InboxPage/CreateChatRoom.tsx b/components/InboxPage/CreateChatRoom.tsx
@@ -21,20 +21,13 @@ function CreateChatRoom({ setCreateChatRoom }: Props) {
   const [error, setError] = React.useState('');
   const [searchedUser, setSearchedUser] = React.useState(false);
   const [ticked, setTicked] = React.useState(false);
-  const [loading, setLoading] = React.useState(false);
   const [searchedUserData, setSearchedUserData] =
     React.useState<notificationTypes>({});
 
   return (
     <div className="fixed top-0 left-0 z-50 flex h-[100vh] w-full items-center justify-center bg-[#0000008f] dark:bg-[#000000d7]">
       <div className="w-[400px] rounded-xl bg-white dark:border dark:border-stone-300 dark:bg-[#000000]">
-        <div
-          className={
-            loading
-              ? 'hidden'
-              : 'flex items-center justify-between border-b border-stone-300 p-3 dark:border-stone-700'
-          }
-        >
+        <div className="flex items-center justify-between border-b border-stone-300 p-3 dark:border-stone-700">
           <button onClick={() => setCreateChatRoom(false)} type="button">
             <CloseBtnSVG
               lightColor="#262626"
@@ -46,16 +39,15 @@ function CreateChatRoom({ setCreateChatRoom }: Props) {
           <button
             className={`${ticked ? 'text-[#0095f6]' : 'pointer-events-none'}`}
             type="button"
-            onClick={() =>
+            onClick={() => {
               handleCreateChatRoom({
                 userNotifications,
                 searchedUserData,
+                setCreateChatRoom,
                 setError,
-                setLoading,
                 setSearchedUser,
-                setCreateChatRoom,
-              })
-            }
+              });
+            }}
           >
             Create
           </button>
@@ -86,9 +78,22 @@ function CreateChatRoom({ setCreateChatRoom }: Props) {
               />
             </label>
           </form>
-          <div className="mr-5">
+          <button
+            className="mr-5"
+            type="button"
+            onClick={(e) =>
+              handleCheckChatRoomExists({
+                e,
+                search,
+                setError,
+                setSearchedUser,
+                setSearchedUserData,
+                userNotifications,
+              })
+            }
+          >
             <SearchBtnSVG heightWidth="20" />
-          </div>
+          </button>
         </div>
         <div>
           {searchedUser ? (

diff --git a/components/header/HeartNotificationsWindow.tsx b/components/header/HeartNotificationsWindow.tsx
@@ -9,6 +9,7 @@ import LoadingHeartPosts from '../loadingComps/LoadingHeartPosts';
 
 export default function HeartNotificationsWindow() {
   const [userNotifications] = useAtom(atoms.userNotifications);
+  const [darkMode] = useAtom(atoms.darkMode);
 
   const [postPopUp, setPostPopUp] = React.useState(false);
   const [heartDetail, setHeartDetail] = React.useState<heartDetails>();
@@ -45,7 +46,12 @@ export default function HeartNotificationsWindow() {
         >
           <div className={loading ? 'opacity-0' : ''}>
             <p className="pl-6 text-sm font-semibold">New notifications</p>
-            <div onLoad={() => setLoading(false)}>
+            <div
+              className={`${
+                darkMode ? 'scrollbarDark' : 'scrollbarLight'
+              }  scrollbar max-h-[300px] overflow-y-auto`}
+              onLoad={() => setLoading(false)}
+            >
               {userNotifications.heartNotifications!.map((details, index) => (
                 <div
                   className="flex items-center gap-2 py-4 px-2 text-sm sm:px-6"

diff --git a/components/homePage/AddStory.tsx b/components/homePage/AddStory.tsx
@@ -7,42 +7,28 @@ import handleUploadImage from '../../util/handleUploadImage';
 import useCheckNameLength from '../../hooks/useCheckNameLength';
 import atoms from '../../util/atoms';
 import ProfilePicSVG from '../svgComps/ProfilePicSVG';
+import handleRemoveStory from '../../util/handleRemoveStory';
 
 function AddStory() {
   const [userDetails] = useAtom(atoms.userDetails);
+  const [userNotifications] = useAtom(atoms.userNotifications);
 
-  // you need to make a loading state
   const [loading, setLoading] = React.useState(false);
   const [addPhoto, setAddPhoto] = React.useState(false);
 
-  console.log({ loading, addPhoto });
-
   const widthRef = React.useRef<HTMLDivElement>(null);
+
   const checkLength = useCheckNameLength({ widthRef });
 
   return (
-    <label htmlFor="photoFile">
-      <input
-        type="file"
-        id="photoFile"
-        accept=".png, .jpg, .jpeg"
-        hidden
-        onChange={(e) =>
-          handleUploadImage({
-            e,
-            location: 'stories',
-            username: userDetails.displayName!,
-            maxWidthOrHeight: 800,
-            chatRoomIDs: null,
-            setLoading,
-            setAddPhoto,
-            handleImgURLFunction: handleUpdateUserStory,
-          })
-        }
-      />
+    <>
       <div className="flex cursor-pointer flex-col items-start">
         <div className="relative">
-          <div className="w-[74px]">
+          <button
+            className="w-[74px]"
+            type="button"
+            onClick={() => setAddPhoto(true)}
+          >
             {userDetails.photoURL ? (
               <Image
                 className="relative z-10 h-14 w-14 select-none rounded-full bg-[#ebebeb] object-cover p-[2px] dark:bg-[#1c1c1c]"
@@ -56,13 +42,13 @@ function AddStory() {
                 <ProfilePicSVG strokeWidth="1" />
               </div>
             )}
-          </div>
+          </button>
           <div
             className={`${
-              userDetails.photoURL
-                ? 'top-[-2px] left-[-2px]'
-                : 'top-[-2px] left-[-2px]'
-            } absolute  z-0 h-[60px] w-[60px] rounded-full bg-gradient-to-tr from-[#ffee00] to-[#d300c8]`}
+              userNotifications.story?.length === 0
+                ? 'bg-[#e4e4e4] dark:bg-[#4d4d4d]'
+                : 'bg-gradient-to-tr from-[#ffee00] to-[#d300c8]'
+            } absolute top-[-2px] left-[-2px]  z-0 h-[60px] w-[60px] rounded-full `}
           />
           <div className="absolute bottom-0 right-[15px] z-10">
             <AddStorySVG />
@@ -79,7 +65,83 @@ function AddStory() {
           )}
         </div>
       </div>
-    </label>
+      {addPhoto ? (
+        <div className="fixed top-0 left-0 z-50 flex h-full w-full  items-center justify-center bg-[#0000008f] dark:bg-[#000000d7]">
+          <div
+            className={
+              loading
+                ? 'animate-spin rounded-full bg-[#000000de] p-2 '
+                : 'hidden'
+            }
+          >
+            <picture>
+              <img
+                className="h-10 w-10"
+                src="/instagramLoading.png"
+                alt="instagram loading"
+              />
+            </picture>
+          </div>
+          <div
+            className={`${
+              loading ? 'hidden' : ''
+            } w-[400px] flex-col rounded-xl bg-white dark:border dark:border-stone-300 dark:bg-[#000000]`}
+          >
+            <h1 className="py-7 text-center text-lg font-semibold">
+              Change story photo
+            </h1>
+            <div className="flex justify-center border-y border-stone-300  text-sm font-semibold text-[#0095f6] dark:border-stone-700">
+              <label
+                className="flex-grow cursor-pointer py-3 text-center"
+                htmlFor="photoFile"
+              >
+                Upload Photo
+                <input
+                  type="file"
+                  id="photoFile"
+                  accept=".png, .jpg, .jpeg"
+                  hidden
+                  onChange={(e) =>
+                    handleUploadImage({
+                      e,
+                      location: 'stories',
+                      username: userDetails.displayName!,
+                      maxWidthOrHeight: 1000,
+                      chatRoomIDs: null,
+                      setLoading,
+                      setAddPhoto,
+                      handleImgURLFunction: handleUpdateUserStory,
+                    })
+                  }
+                />
+              </label>
+            </div>
+            <button
+              className="w-full border-b border-stone-300 py-3 text-sm font-semibold text-[#ED4956] dark:border-stone-700"
+              type="button"
+              onClick={() =>
+                handleRemoveStory({
+                  username: userDetails.displayName!,
+                  setLoading,
+                  setAddPhoto,
+                })
+              }
+            >
+              Remove current story
+            </button>
+            <button
+              className="w-full py-3 text-sm"
+              onClick={() => setAddPhoto(false)}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      ) : (
+        ''
+      )}
+    </>
   );
 }
 

diff --git a/components/profilePages/AddProfilePhoto.tsx b/components/profilePages/AddProfilePhoto.tsx
@@ -15,7 +15,7 @@ function AddProfilePhoto({
   const [userNotifications] = useAtom(atoms.userNotifications);
 
   return (
-    <div className="fixed top-0 z-10 flex h-full w-full  items-center justify-center bg-[#0000008f] dark:bg-[#000000d7]">
+    <div className="fixed top-0 z-50 flex h-full w-full  items-center justify-center bg-[#0000008f] dark:bg-[#000000d7]">
       <div
         className={
           loading ? 'animate-spin rounded-full bg-[#000000de] p-2 ' : 'hidden'

diff --git a/components/profilePages/UserPost.tsx b/components/profilePages/UserPost.tsx
@@ -19,12 +19,12 @@ function UserPost({
   return (
     <div className="relative overflow-hidden">
       <Image
-        className="h-[175px] w-[300px] select-none object-cover sm:h-[300px]"
+        className="h-[175px] w-[300px] select-none bg-[#ebebeb] object-cover dark:bg-[#313131] sm:h-[300px]"
         src={postInformation.imgURL}
         alt="user post"
         width="0"
         height="0"
-        sizes="33vw"
+        sizes="100vw"
         priority
       />
       <div

diff --git a/pages/Login.tsx b/pages/Login.tsx
@@ -106,6 +106,7 @@ const Login: NextPage = () => {
                     emailFormErrors,
                     email,
                     password,
+                    guest: false,
                     setIsSubmit,
                     setPasswordFormErrors,
                   })
@@ -122,7 +123,7 @@ const Login: NextPage = () => {
                     placeholder="Email address"
                   />
                 </label>
-                <p className="h-[20px] pb-2 text-[10px] text-red-600">
+                <p className="h-[20px] max-w-[220px] pb-2 text-[10px] text-red-600">
                   {emailFormErrors}
                 </p>
                 <label htmlFor="signInPagePassword">
@@ -136,7 +137,7 @@ const Login: NextPage = () => {
                     placeholder="Password"
                   />
                 </label>
-                <p className="h-[20px] text-[10px] text-red-600">
+                <p className="h-[20px] max-w-[220px] text-[10px] text-red-600">
                   {passwordFormErrors}
                 </p>
                 <button
@@ -158,9 +159,22 @@ const Login: NextPage = () => {
                 </div>
                 <button
                   className="mb-10 w-full rounded-[4px] bg-[#0095f6] px-2 py-1 text-sm font-semibold text-white"
-                  type="submit"
+                  type="button"
+                  onClick={(e: any) =>
+                    handleSignIn({
+                      e,
+                      listeners,
+                      passwordFormErrors,
+                      emailFormErrors,
+                      email,
+                      password,
+                      guest: true,
+                      setIsSubmit,
+                      setPasswordFormErrors,
+                    })
+                  }
                 >
-                  Guest Access
+                  Guest Account
                 </button>
               </form>
             </div>

diff --git a/styles/globals.css b/styles/globals.css
@@ -21,7 +21,7 @@ body {
 
 /* For Chrome, EDGE, Opera, Others */
 .scrollbar::-webkit-scrollbar {
-  width: 20px;
+  width: 7px;
   height: 7px;
 }
 

diff --git a/util/handleAddNewPost.ts b/util/handleAddNewPost.ts
@@ -58,8 +58,6 @@ async function handleSubmitToDB({
   userNotifications,
   userDetails,
   caption,
-  setLoading,
-  setAddPost,
 }: handleSubmitProps) {
   const db = getFirestore(app);
   const userRef = doc(db, 'users', userNotifications.username!);
@@ -92,9 +90,6 @@ async function handleSubmitToDB({
     likes: [],
   });
 
-  setLoading(false);
-  setAddPost(false);
-
   // get latest added doc ID
   const q = query(
     collection(db, `${userNotifications.username}Posts`),
@@ -164,6 +159,8 @@ export async function handleSubmit({
     )
   )
     .then((url) => {
+      setLoading(false);
+      setAddPost(false);
       handleSubmitToDB({
         url,
         userNotifications,
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,8 @@ @@
     # production
     /build
+    /guestAccount
     # misc
     .DS_Store
     *.pem
@@ Expand Down @@