Implement block users page (#279)

* Framework for block display * Added UI Implementation for BlockUser * Add comments for block user logic * Copy user.css to blockuser.css * Add additional comments * Updated Todos for BlockUser * Style block user * Style display block * Fix button * Add btn class * Removed console logs and TODO items Co-authored-by: Spriha Jha <[email protected]> Co-authored-by: Spriha Jha <[email protected]>
scarletstudio · Jul 29, 2022 · 38aa2b1 · 38aa2b1
1 parent 171031e
commit 38aa2b1
Show file tree

Hide file tree

Showing 2 changed files with 144 additions and 8 deletions.
diff --git a/frontend/src/app/chatmenu/BlockUser.css b/frontend/src/app/chatmenu/BlockUser.css
@@ -0,0 +1,79 @@
+.UserTile {
+    --image-size: 45px;
+    --margin-size: 5px;
+    font-size: 0;
+    display: block;
+    flex-direction: column;
+    justify-content: space-between;
+    align-content: center;
+}
+
+.UserRow .UserTile {
+    margin-top: var(--margin-size);
+    margin-right: var(--margin-size);
+    margin-left: 0;
+    margin-bottom: 0;
+}
+
+.UserRow .UserTile:last-child {
+    margin-right: 0;
+}
+
+.UserRowCentered .UserTile {
+    margin: var(--margin-size);
+}
+
+.UserTile .ProfileImage,
+.UserTile .DisplayName {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.UserTile .ProfileImage {
+    width: var(--image-size);
+    border-radius: 50%;
+    overflow: hidden;
+}
+
+.UserTile .ProfileImage .Image {
+    width: 100%;
+}
+
+.UserTile .DisplayName {
+    font-size: var(--text-size);
+    padding: 0.5em;
+}
+
+.UserDisc {
+    vertical-align: middle;
+    display: inline-block;
+    width: 45px;
+    border-radius: 50%;
+    overflow: hidden;
+    font-size: 0;
+    margin: 5px;
+}
+
+.UserDisc .Image {
+    width: 100%;
+}
+
+button {
+    border: none;
+    border-radius: 25px;
+    padding: 5px;
+    display: inline-flex;
+}
+
+.IconBeforeBlock {
+    color: red;
+}
+
+.IconAfterBlock {
+    color: black;
+    opacity: 50%;
+}
+
+.IconBeforeUnblock {
+    color: green;
+}
diff --git a/frontend/src/app/chatmenu/BlockUser.tsx b/frontend/src/app/chatmenu/BlockUser.tsx
@@ -1,19 +1,76 @@
 import React from 'react'
 import './BlockUser.css'
+import '../ui/User.css'
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUnlock, faUserLock } from '@fortawesome/free-solid-svg-icons'
+
 import { ChatMenuPageProps } from './ChatMenuPage'
+import { UserData } from '../types/UserData'
 
 interface BlockUserProps {
-    // TODO: Fill out the props for your component
+    participants: UserData[]
+}
+
+// create user tile to display participants
+const UserTile = ({ user }) => {
+    const { uid, displayName, photoURL } = user
+    const alt = `Profile image for ${displayName}.`
+
+    const doBlock = () => {
+        // TODO: Implement blocking the user method
+    }
+
+    const doUnblock = () => {
+        // TODO: Implement unblocking the user method
+    }
+
+    return (
+        <div className="UserTile">
+            <div className="ProfileImage">
+                <img src={photoURL} alt={alt} className="Image" />
+            </div>
+            <div className="DisplayName">
+                <span>{displayName}</span>
+            </div>
+            <div>
+                <button type="button">
+                    <FontAwesomeIcon
+                        onClick={doBlock}
+                        icon={faUserLock}
+                        className="IconBeforeBlock"
+                    />
+                    Block
+                </button>
+                <button type="button">
+                    <FontAwesomeIcon
+                        onClick={doUnblock}
+                        icon={faUnlock}
+                        className="IconBeforeUnblock"
+                    />
+                    Unblock
+                </button>
+            </div>
+        </div>
+    )
 }
 
-// TODO: Implement your component
-// eslint-disable-next-line no-empty-pattern
-const BlockUserInner = ({}: BlockUserProps) => {
-    return <p>Grace was here!</p>
+// show the users within the chat
+const BlockUserInner = ({ participants }: BlockUserProps) => {
+    return (
+        <div className="UserRow">
+            {participants.map((user) => (
+                <UserTile key={user?.uid} user={user} />
+            ))}
+        </div>
+    )
 }
 
-// TODO: Pass your component its props
-// eslint-disable-next-line no-unused-vars
-const BlockUser = ({ chat, config }: ChatMenuPageProps) => <BlockUserInner />
+// display participants to the chat menu except the logged in user
+const BlockUser = ({ chat }: ChatMenuPageProps) => (
+    <BlockUserInner
+        participants={Object.values(chat?.participants).filter((user) => user?.uid !== chat?.for)}
+    />
+)
 
 export default BlockUser