split layout components to their own part, makes sample more readable

99designs · Oct 12, 2020 · c6a93aa · c6a93aa
1 parent 7904ef6
commit c6a93aa
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 85 deletions.
diff --git a/example/chat/src/Room.js b/example/chat/src/Room.js
@@ -1,89 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
-import styled from 'styled-components';
 import gql from 'graphql-tag';
 import { useQuery, useMutation } from '@apollo/react-hooks';
-
-export const Chat = styled.div`
-    padding: 4px;
-    margin: 0 0 12px;
-    max-width: 400px;
-    max-height: 400px;
-    border: 1px solid #ccc;
-    background-color: #babdc6;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    position: relative;
-    font: 14px verdana;
-`;
-
-export const ChatContainer = styled.div`
-    &:after {
-        content: "";
-        display: table;
-        clear: both;
-    }
-`;
-
-export const Message = styled.div`
-    color: #000;
-    clear: both;
-    line-height: 120%;
-    padding: 8px;
-    position: relative;
-    margin: 8px 0;
-    max-width: 85%;
-    word-wrap: break-word;
-    z-index: 1;
-
-  &:after {
-    position: absolute;
-    content: "";
-    width: 0;
-    height: 0;
-    border-style: solid;
-  }
-
-  span {
-    display: inline-block;
-    float: right;
-    padding: 0 0 0 7px;
-    position: relative;
-    bottom: -4px;
-  }
-
-}`;
-
-const MessageReceived = styled(Message)`
-    background: #fff;
-    border-radius: 0px 5px 5px 5px;
-    float: left;
-
-    &:after {
-        border-width: 0px 10px 10px 0;
-        border-color: transparent #fff transparent transparent;
-        top: 0;
-        left: -4px;
-    }
-
-    span {
-        display: block;
-        color: #bbb;
-        font-size: 10px;
-    }
-`;
-
-const MessageMine = styled(Message)`
-    background: #e1ffc7;
-    border-radius: 5px 0px 5px 5px;
-    float: right;
-
-    &:after {
-        border-width: 0px 0 10px 10px;
-        border-color: transparent transparent transparent #e1ffc7;
-        top: 0;
-        right: -4px;
-    }
-`;
+import { Chat, ChatContainer, Message, MessageReceived } from './components/room';
 
 export const Room = ({ channel, name }) => {
     const messagesEndRef = useRef(null)
@@ -149,9 +67,9 @@ export const Room = ({ channel, name }) => {
         <Chat>
             <ChatContainer>
                 {data.room.messages.map((msg) =>
-                    msg.createdBy === name ? <MessageMine key={msg.id}>
+                    msg.createdBy === name ? <Message key={msg.id}>
                         {msg.text}
-                    </MessageMine> : <MessageReceived key={msg.id}>
+                    </Message> : <MessageReceived key={msg.id}>
                         <span>{msg.createdBy}</span>
                         {msg.text}
                     </MessageReceived>

diff --git a/example/chat/src/components/room.js b/example/chat/src/components/room.js
@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+
+export const Chat = styled.div`
+    padding: 4px;
+    margin: 0 0 12px;
+    max-width: 400px;
+    max-height: 400px;
+    border: 1px solid #ccc;
+    background-color: #babdc6;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    position: relative;
+    font: 14px verdana;
+`;
+
+export const ChatContainer = styled.div`
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+`;
+
+const ChatLine = styled.div`
+    color: #000;
+    clear: both;
+    line-height: 120%;
+    padding: 8px;
+    position: relative;
+    margin: 8px 0;
+    max-width: 85%;
+    word-wrap: break-word;
+    z-index: 1;
+
+  &:after {
+    position: absolute;
+    content: "";
+    width: 0;
+    height: 0;
+    border-style: solid;
+  }
+
+  span {
+    display: inline-block;
+    float: right;
+    padding: 0 0 0 7px;
+    position: relative;
+    bottom: -4px;
+  }
+
+}`;
+
+export const MessageReceived = styled(ChatLine)`
+    background: #fff;
+    border-radius: 0px 5px 5px 5px;
+    float: left;
+
+    &:after {
+        border-width: 0px 10px 10px 0;
+        border-color: transparent #fff transparent transparent;
+        top: 0;
+        left: -4px;
+    }
+
+    span {
+        display: block;
+        color: #bbb;
+        font-size: 10px;
+    }
+`;
+
+export const Message = styled(ChatLine)`
+    background: #e1ffc7;
+    border-radius: 5px 0px 5px 5px;
+    float: right;
+
+    &:after {
+        border-width: 0px 0 10px 10px;
+        border-color: transparent transparent transparent #e1ffc7;
+        top: 0;
+        right: -4px;
+    }
+`;