Better component separation

client/src/components/Messages/Conversation/elements/Discussion.js

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import { formatTime } from '../../../../utils/timestamp';
-import { formatMultiLineText } from '../../../../utils/style-utils';
+import Message from './Message';
 
 const Discussion = (props) => {
   const { selectedConversation, loggedInUser, fields } = props;
@@ -16,30 +15,17 @@ const Discussion = (props) => {
     p => p._id !== loggedInUser._id
   );
 
-  const renderMessage = (m) => {
-    let sender;
-    if (m.sender === partner._id) {
-      sender = `${partner.firstname} ${partner.lastname}`;
-    } else {
-      sender = 'Me';
-    }
-
-    return (
-      <MessageWrapper key={m._id + m.timestamp} self={sender === 'Me'}>
-        <Info>
-          <Partner self={sender === 'Me'}>{sender}</Partner>
-          <Timestamp>{formatTime(m.timestamp, true)}</Timestamp>
-        </Info>
-        <Message self={sender === 'Me'}>{formatMultiLineText(m.text)}</Message>
-      </MessageWrapper>
-    );
-  };
-
   if (!selectedConversation) return null;
 
   return (
     <Wrapper newMessageActive={newMessageActive}>
-      {selectedConversation.messages.map(renderMessage)}
+      {selectedConversation.messages.map(message => (
+        <Message
+          key={message._id + message.timestamp}
+          {...message}
+          partner={partner}
+        />
+      ))}
     </Wrapper>
   );
 };
@@ -66,45 +52,4 @@ const Wrapper = styled.div`
 	width: 100%;
 `;
 
-const Info = styled.div`
-	display: flex;
-	margin-bottom: 3px;
-`;
-
-const MessageWrapper = styled.div`
-	display: flex;
-	flex: none;
-	flex-direction: column;
-	justify-content: center;
-	background-color: e2edff;
-	align-self: ${props => props.self === true ? 'flex-end' : 'flex-start'}
-	margin: 10px 20px;
-	max-width: 80%;
-`;
-
-const Partner = styled.div`
-	margin-left: 5px;
-	margin-right: 15px;
-	font-size: 13px;
-	color: rgba(0, 0, 0, 0.7);
-`;
-
-const Timestamp = styled.div`
-	color: rgba(0, 0, 0, .40)
-	font-size: 11px;
-	margin-right: 5px;
-	margin-left: auto;
-`;
-
-const Message = styled.div`
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	padding: 5px 10px;
-	border-radius: 7px;
-	background-color: ${props => props.self === true ? '#f1f0f0' : props.theme.primary};
-	color: ${props => props.self === true ? props.theme.black : props.theme.white};
-	justify-content: center;
-`;
-
 export default Discussion;

client/src/components/Messages/Conversation/elements/Message.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import { formatTime } from '../../../../utils/timestamp';
+import { formatMultiLineText } from '../../../../utils/style-utils';
+
+const Message = (props) => {
+  const { partner } = props;
+
+  const sender = props.sender === partner._id
+    ? `${partner.firstname} ${partner.lastname}`
+    : 'Me';
+
+  const selfMessage = sender === 'Me';
+
+  return (
+    <Wrapper self={selfMessage}>
+      <Info>
+        <Partner self={selfMessage}>{sender}</Partner>
+        <Timestamp>{formatTime(props.timestamp, true)}</Timestamp>
+      </Info>
+      <Text self={selfMessage}>{formatMultiLineText(props.text)}</Text>
+    </Wrapper>
+  );
+};
+
+const { string, shape } = PropTypes;
+Message.propTypes = {
+  timestamp: string.isRequired,
+  partner: shape({
+    _id: string.isRequired,
+    firstname: string.isRequired,
+    lastname: string.isRequired
+  }).isRequired,
+  sender: string.isRequired,
+  text: string.isRequired
+};
+
+const Info = styled.div`
+	display: flex;
+	margin-bottom: 3px;
+`;
+
+const Wrapper = styled.div`
+	display: flex;
+	flex: none;
+	flex-direction: column;
+	justify-content: center;
+	background-color: e2edff;
+	align-self: ${props => props.self === true ? 'flex-end' : 'flex-start'}
+	margin: 10px 20px;
+	max-width: 80%;
+`;
+
+const Partner = styled.div`
+	margin-left: 5px;
+	margin-right: 15px;
+	font-size: 13px;
+	color: rgba(0, 0, 0, 0.7);
+`;
+
+const Timestamp = styled.div`
+	color: rgba(0, 0, 0, .40)
+	font-size: 11px;
+	margin-right: 5px;
+	margin-left: auto;
+`;
+
+const Text = styled.div`
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 5px 10px;
+	border-radius: 7px;
+	background-color: ${props => props.self === true ? '#f1f0f0' : props.theme.primary};
+	color: ${props => props.self === true ? props.theme.black : props.theme.white};
+	justify-content: center;
+`;
+
+export default Message;

client/src/components/Messages/index.js

@@ -37,6 +37,7 @@ const MessageaContainer = () => (
 const Wrapper = styled.div`
 	display: flex;
 	height: calc(100vh - 120px);
+	max-height: 600px;
 	max-width: 100%;
 	overflow: auto;
 	border: 1px solid rgba(0, 0, 0, .10);

client/src/components/Schedule/Table/Table.js

@@ -2,22 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
+import InfoColumn from './elements/InfoColumn';
 import Column from './elements/Column';
-import { DAYS, HOURS } from '../../../utils/constants';
-import { media } from '../../../utils/style-utils';
+import { DAYS } from '../../../utils/constants';
 
 const Table = (props) => {
   const { schedule, handleCellClick } = props;
   const { semigroup, week, scheduleList } = schedule;
 
   return (
     <Wrapper>
-      <InfoColumn>
-        <Info annotation>Day</Info>
-        <Info annotation>Semigroup</Info>
-        <Info annotation>Week</Info>
-        {HOURS.map(h => <Info key={h.key}>{h.text}</Info>)}
-      </InfoColumn>
+      <InfoColumn />
       {DAYS.map(d => (
         <Column
           key={`${d.key + week + semigroup}`}
@@ -57,24 +52,4 @@ const Wrapper = styled.div`
 	}
 `;
 
-const InfoColumn = styled.div`
-	display: flex;
-	flex-direction: column;
-	min-width: 8vw;
-
-	${media.tablet`
-		display: none
-	`}
-`;
-
-const Info = styled.div`
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	text-align: center;
-	border-bottom: ${props => props.theme.separator};
-	height: 40px;
-	font-weight: ${props => props.annotation && 'bolder'};
-`;
-
 export default Table;

client/src/components/Schedule/Table/elements/Column.js

@@ -3,19 +3,9 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import moment from 'moment';
 
-import { HOURS } from '../../../../utils/constants';
-import ScheduleItem from './ScheduleItem';
+import Week from './Week';
 import { media } from '../../../../utils/style-utils';
 
-const findSchedule = ({ scheduleList, hour, week, semigroup }) =>
-  scheduleList.find(
-    scheduleItem =>
-      hour.key >= scheduleItem.when.from &&
-      hour.key < scheduleItem.when.from + scheduleItem.when.duration &&
-      [0, parseInt(week, 10)].includes(scheduleItem.when.frequency) &&
-      ['0', semigroup].includes(scheduleItem.whom.semigroup)
-  );
-
 const Column = (props) => {
   const { day, week, semigroup, handleCellClick, scheduleList } = props;
 
@@ -36,29 +26,14 @@ const Column = (props) => {
           <SemigroupColumn key={semigroup}>
             <ColumnWrapper>
               {weeks.map(week => (
-                <Week key={week}>
-                  <WeekNumber>{`W${week}`}</WeekNumber>
-                  {HOURS.map((hour, index) => {
-                    const schedule = findSchedule({
-                      scheduleList,
-                      hour,
-                      week,
-                      semigroup
-                    });
-                    const key = `${day.text + week + semigroup + hour + index}`;
-
-                    return (
-                      <ScheduleItem
-                        onClick={handleCellClick}
-                        key={key}
-                        week={week}
-                        hour={hour}
-                        semigroup={semigroup}
-                        schedule={schedule}
-                      />
-                    );
-                  })}
-                </Week>
+                <Week
+                  key={week}
+                  week={week}
+                  handleCellClick={handleCellClick}
+                  scheduleList={scheduleList}
+                  semigroup={semigroup}
+                  day={day}
+                />
               ))}
             </ColumnWrapper>
           </SemigroupColumn>
@@ -164,30 +139,4 @@ const GroupNumber = styled.div`
 	border-left: ${props => props.theme.separator};
 `;
 
-const Week = styled.div`
-	display: flex;
-	flex-direction: column;
-	justify-content: space-around;
-	width: 100%;
-	text-align: center;
-
-	&:first-child {
-		border-right: ${props => props.theme.separator};
-	}
-
-	&:last-child {
-		border-right: 0px;
-	}
-`;
-
-const WeekNumber = styled.div`
-	border-bottom: ${props => props.theme.separator};
-	height: 40px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 12px;
-	font-weight: bold;
-`;
-
 export default Column;

client/src/components/Schedule/Table/elements/InfoColumn.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { HOURS } from '../../../../utils/constants';
+import { media } from '../../../../utils/style-utils';
+
+const InfoColumn = () => (
+  <Wrapper>
+    <Info annotation>Day</Info>
+    <Info annotation>Semigroup</Info>
+    <Info annotation>Week</Info>
+    {HOURS.map(h => <Info key={h.key}>{h.text}</Info>)}
+  </Wrapper>
+);
+
+const Wrapper = styled.div`
+	display: flex;
+	flex-direction: column;
+	min-width: 8vw;
+
+	${media.tablet`
+		display: none
+	`}
+`;
+
+const Info = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	border-bottom: ${props => props.theme.separator};
+	height: 40px;
+	font-weight: ${props => props.annotation && 'bolder'};
+`;
+
+export default InfoColumn;