Some changes

client/src/components/Avatar/index.tsx

@@ -19,23 +19,6 @@ const Background = styled.div<{ color: string; size?: string }>`
   background-color: ${(props) => props.color};
 `;
 
-const Shape = styled.div<{
-  color: string;
-  startX: string;
-  startY: string;
-  shapeWidth: string;
-  shapeHeight: string;
-  isCircle: boolean;
-}>`
-  position: absolute;
-  top: ${(props) => props.startY};
-  left: ${(props) => props.startX};
-  height: ${(props) => props.shapeHeight};
-  width: ${(props) => props.shapeWidth};
-  background-color: ${(props) => props.color};
-  border-radius: ${(props) => (props.isCircle ? "50%" : "none")};
-`;
-
 interface Props {
   thumbnail: string;
   size?: "small" | "medium" | "large";

client/src/components/ContentContainer/index.tsx

@@ -6,6 +6,18 @@ const Container = styled.div`
   width: 800px;
 `;
 
+const Wrapper = styled.div1`
+  box-sizing: border-box;
+  color: rgb(255, 255, 255);
+  cursor: default;
+  display: block;
+  flex-shrink: 0;
+  font-family: "Inter UI", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  height: 125.047px;
+`;
+
 class ContentContainer extends Component {
   public render() {
     return <Container>{this.props.children}</Container>;

client/src/components/Header/index.tsx

@@ -56,6 +56,23 @@ const EndAligner = styled.div`
   grid-column-gap: 60px;
 `;
 
+const Shape = styled.div<{
+  color: string;
+  startX: string;
+  startY: string;
+  shapeWidth: string;
+  shapeHeight: string;
+  isCircle: boolean;
+}>`
+  position: absolute;
+  top: ${(props) => props.startY};
+  left: ${(props) => props.startX};
+  height: ${(props) => props.shapeHeight};
+  width: ${(props) => props.shapeWidth};
+  background-color: ${(props) => props.color};
+  border-radius: ${(props) => (props.isCircle ? "50%" : "none")};
+`;
+
 class Header extends Component<Props> {
   public render() {
     return (
@@ -76,7 +93,7 @@ class Header extends Component<Props> {
                         </LinkWrapper>
                       );
                     })}
-                    {this.props.user && (
+                    {this.props.user && this.props.account.type === 'free' && (
                       <LinkWrapper isSelected={false}>
                         <StyledButton onClick={signOutUser}>
                           Sign Out

client/src/context/UserContext.tsx

@@ -3,9 +3,10 @@ import { User } from "../types";
 
 export interface UserContextProps {
   user?: User;
+  account: Account;
 }
 
-const UserContext = createContext({});
+const UserContext = createContext({account: {}});
 
 /* 
     used guidance from https://stackoverflow.com/a/51717096

client/src/pages/Messages.tsx

@@ -86,6 +86,7 @@ class Messages extends Component<Props, State> {
                   onClick={this.onTabClicked}
                   shouldShowAlert={clientRoom.hasUnreadMessage}
                   isAlive={otherUserSocket ? otherUserSocket.isActive : false}
+                  isHidden={{otherUserSocket.lastMessagedAt < Date.now() - 245000}}
                 >
                   {otherRoomUser &&
                     `${otherRoomUser.name.first} ${otherRoomUser.name.last}`}

package.json

@@ -2,6 +2,7 @@
   "name": "message-app",
   "version": "1.0.0",
   "description": "",
+  "type": "module",
   "main": "index.js",
   "dependencies": {
     "concurrently": "^5.1.0",

server/src/models/Message.ts

@@ -32,6 +32,23 @@ class MessageModel extends Model {
 
     return result.insertedId;
   }
+
+  public async removeItem(
+    senderId: string,
+    roomId: string,
+    contents: string,
+    timeSent: number
+  ) {
+    const collection = await this.getCollection();
+    const result = await collection.removeOne({
+      sender: senderId,
+      timeSent,
+      contents,
+      room: new ObjectID(roomId),
+    });
+
+    return result.deletedId;
+  }
 }
 
 export default MessageModel;

server/src/schema-init.ts

@@ -50,6 +50,18 @@ const runTheDB = async () => {
       rooms: [firstRoomItem._id, secondRoomItem._id],
       unreadMessages: [],
     },
+    {
+      name: {
+        first: "Vivian",
+        last: "Hu",
+      },
+      timeZone: "(UTC-07:00) Pacific Time (US & Canada)",
+      thumbnail:
+        "bc=#CBF13C;st=sq,sbc=#D061B2,sds=56%,ssx=66%,ssy=2%,or=h;st=sq,sbc=#5135F2,sds=35%,ssx=83%,ssy=33%,or=v;st=rt,sbc=#088395,sds=31%,ssx=17%,ssy=40%,or=h",
+      workingHours: [],
+      rooms: [firstRoomItem._id, secondRoomItem._id],
+      unreadMessages: [],
+    },
     {
       name: {
         first: "Joe",

server/src/socket.ts

@@ -128,7 +128,7 @@ class Socket {
   private sendUserMessage = (id: string, isActive: boolean) => {
     this.clients.forEach((client) => {
       if (client.id === id) {
-        client.socket.send(JSON.stringify({ id: client.id, isActive }));
+        client.socket.send(JSON.stringify({ id: client.id, isActive, lastMessagedAt }));
       }
     });
   };