Added the feature that allows users to add profile images and improve…

…d design
victor891263 · Sep 13, 2023 · 6e1432d · 6e1432d
1 parent 10596ae
commit 6e1432d
Show file tree

Hide file tree

Showing 75 changed files with 1,824 additions and 318 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -12,6 +12,7 @@
     "@types/react": "^18.0.30",
     "@types/react-dom": "^18.0.11",
     "axios": "^1.4.0",
+    "cloudinary": "^1.40.0",
     "graphql": "^16.8.0",
     "joi": "^17.9.2",
     "jsonwebtoken": "^9.0.0",
@@ -20,6 +21,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
+    "sysend": "^1.16.3",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
@@ -48,6 +50,7 @@
     ]
   },
   "devDependencies": {
+    "@types/apollo-upload-client": "^17.0.2",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.7"

diff --git a/client/public/index.html b/client/public/index.html
@@ -20,9 +20,8 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Crowdly</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://rsms.me/">
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
 </head>
 <body class="dark:bg-gray-900 dark:text-gray-300">
 <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/client/src/components/AllPosts.tsx b/client/src/components/AllPosts.tsx
@@ -7,7 +7,7 @@ import React from "react"
 import FeedPost from "./FeedPost"
 import TextBalloonIcon from "../icons/TextBalloonIcon"
 
-export default function AllPosts({ sortBy }: { sortBy: 'Date' | 'Engagement' }) {
+export default function AllPosts({ sortBy }: { sortBy: 'Date' | 'Engagement' | 'Points' }) {
     const GET_ALL_POSTS = gql`
             query GetAllPosts {
                 trending {
@@ -20,6 +20,8 @@ export default function AllPosts({ sortBy }: { sortBy: 'Date' | 'Engagement' })
                     quotedId
                     likes
                     dislikes
+                    points
+                    quotes
                     replies
                     User {
                         id
@@ -48,6 +50,13 @@ export default function AllPosts({ sortBy }: { sortBy: 'Date' | 'Engagement' })
                 return 0
             })
         }
+        if (sortBy === 'Points') {
+            sortedPosts.sort((a, b) => {
+                if (a.points < b.points) return 1
+                if (a.points > b.points) return -1
+                return 0
+            })
+        }
         return sortedPosts
     }
 

diff --git a/client/src/components/BoxFullScreen.tsx b/client/src/components/BoxFullScreen.tsx
@@ -1,11 +1,19 @@
-import React from "react"
-import CrossIcon from "../icons/CrossIcon";
+import React, {useEffect} from "react"
+import ArrowIcon from "../icons/ArrowIcon"
 
 export default function BoxFullScreen({ children, close }: { children: JSX.Element, close: () => void }) {
+    useEffect(() => {
+        document.documentElement.style.overflowY = 'hidden'
+        return () => {
+            document.documentElement.style.overflowY = 'auto'
+        }
+    }, [])
+
     return (
         <>
-            <button onClick={close} className='fixed top-6 right-6 z-30 secondary !p-1.5'><CrossIcon className={'w-4 h-4'} /></button>
-            <div className="fixed z-20 top-0 left-0 w-screen h-screen px-6 flex flex-col items-center justify-center bg-white dark:bg-gray-900">
+
+            <div className="fixed z-20 top-0 left-0 w-screen h-screen overflow-auto px-6 flex bg-white dark:bg-gray-900">
+                <button onClick={close} className='absolute top-6 left-6 z-30'><ArrowIcon className={'w-6 h-6 rotate-180'} /></button>
                 {children}
             </div>
         </>

diff --git a/client/src/components/DislikeButton.tsx b/client/src/components/DislikeButton.tsx
@@ -2,6 +2,7 @@ import DislikeIcon from "../icons/DislikeIcon"
 import {gql, useMutation} from "@apollo/client"
 import PopUp from "./PopUp"
 import ArrowIcon from "../icons/ArrowIcon";
+import ChevronIcon from "../icons/ChevronIcon";
 
 export default function DislikeButton({ postId, liked, disliked, onSuccess }: { postId: string, liked: boolean, disliked: boolean, onSuccess: (isNew: boolean, type: 'like' | 'dislike') => void }) {
     const DISLIKE_POST = gql`
@@ -24,17 +25,17 @@ export default function DislikeButton({ postId, liked, disliked, onSuccess }: {
 
     return (
         <>
-            {dislikePostOperation.error && <PopUp msg={dislikePostOperation.error.message} color={'red'} />}
-            {deleteDislikeOperation.error && <PopUp msg={deleteDislikeOperation.error.message} color={'red'} />}
+            <PopUp msg={dislikePostOperation.error ? dislikePostOperation.error.message : ''} color={'red'} />
+            <PopUp msg={deleteDislikeOperation.error ? deleteDislikeOperation.error.message : ''} color={'red'} />
             <button
                 onClick={handleDislike}
                 disabled={dislikePostOperation.loading || deleteDislikeOperation.loading || liked}
-                className='secondary flex items-center space-x-1.5 !px-2 !rounded-l-none'
+                className='secondary flex items-center space-x-1.5 !px-2 !rounded-l-none ml-px'
             >
                 {disliked ? (
-                    <ArrowIcon className='w-5 h-5 rotate-90 text-violet-600' strokeWidth={2.5} />
+                    <ChevronIcon className='w-5 h-5 text-violet-600' strokeWidth={2.5} />
                 ):(
-                    <ArrowIcon className='w-5 h-5 rotate-90' />
+                    <ChevronIcon className='w-5 h-5' />
                 )}
             </button>
         </>