From 310841ce240e9afe80c2134b202644bc5494045a Mon Sep 17 00:00:00 2001 From: Whitney Date: Tue, 20 Jun 2023 15:24:42 -0700 Subject: [PATCH 1/6] Stuck on wave 3, commit current status before continuing --- src/App.js | 33 ++++++++++++++++++++++++--- src/components/ChatEntry.css | 2 +- src/components/ChatEntry.js | 42 ++++++++++++++++++++++++++++++----- src/components/ChatLog.js | 43 ++++++++++++++++++++++++++++++++++++ 4 files changed, 111 insertions(+), 9 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index c10859093..22adce49c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,43 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +// import ChatEntry from './components/ChatEntry'; +import ChatLog from './components/ChatLog'; +import { useState } from 'react'; + const App = () => { + + const entryData = chatMessages; + + const [chatData, setChatData] = useState(entryData); + + const updateEntryData = updatedEntry => { + const entries = chatData.map(entry => { + if (entry.id === updatedEntry.id) { + return updatedEntry; + } else { + return entry; + } + }); + setChatData(entries) + }; + return (
-

Application title

+

Chat between Vladimir and Estragon

+
+

❤️s

+
- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} + + {/* */} +
); diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css index 05c3baa44..c0246c216 100644 --- a/src/components/ChatEntry.css +++ b/src/components/ChatEntry.css @@ -1,4 +1,4 @@ -button { + button { background: none; color: inherit; border: none; diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b92f0b7b2..b2d9310d7 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -2,21 +2,53 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +// const getTimeAgo = (timeStamp) => { +// const currentYear = new Date().getFullYear(); +// const textYear = new Date(timeStamp).getFullYear(); +// const difference = currentYear - textYear; +// return `${difference} years ago`; + const ChatEntry = (props) => { + + const onHeartClick = () => { + const updatedEntry = { + id: props.id, + sender: props.sender, + body: props.body, + timeStamp: props.timeStamp, + liked: !props.liked, + }; + props.onUpdate(updatedEntry); + }; + + const heartColor = props.liked ? '🤍' : '❤️'; + + const getTimeAgo = (timeStamp) => { + const currentYear = new Date().getFullYear(); + const textYear = new Date(timeStamp).getFullYear(); + const difference = currentYear - textYear; + return `${difference} years ago`; + }; return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +

{props.body}

+

{getTimeAgo(props.timeStamp)}

+ + {/* {likeColor} */}
); }; ChatEntry.propTypes = { - //Fill with correct proptypes + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + onUpdate: PropTypes.func.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..a7ce7e75b --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,43 @@ +import React from 'react' +import './ChatLog.css'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; + +const ChatLog = ({entries}) => { + + const chatComponents = entries.map((entry) => { + + return ( +
  • + + onUpdate={entries.onUpdateChatEntry} + +
    • + ); + + }); + + return ( +
    + {chatComponents} +
    + ) + +}; + +ChatLog.propTypes = { + entries: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + })), + onUpdateEntry: PropTypes.func.isRequired +}; +export default ChatLog; \ No newline at end of file From 0aa478055c3a9ba4fed2342e44efe1fe161e84eb Mon Sep 17 00:00:00 2001 From: Whitney Date: Wed, 21 Jun 2023 21:33:51 -0700 Subject: [PATCH 2/6] All required functionality working but failing wave 3 tests --- src/App.js | 21 +++++++++++++++------ src/App.test.js | 1 + src/components/ChatEntry.css | 1 + src/components/ChatEntry.js | 28 +++++++++++++++++++--------- src/components/ChatLog.js | 13 ++++++++----- 5 files changed, 44 insertions(+), 20 deletions(-) diff --git a/src/App.js b/src/App.js index 22adce49c..053e1e8c7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,20 +1,28 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; -// import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; import { useState } from 'react'; const App = () => { - const entryData = chatMessages; - - const [chatData, setChatData] = useState(entryData); + const [chatData, setChatData] = useState(chatMessages); + const [likeCount, setLikeCount] = useState(0); const updateEntryData = updatedEntry => { const entries = chatData.map(entry => { if (entry.id === updatedEntry.id) { + if (entry.liked !== updatedEntry.liked) { + // If the liked state has changed + if (updatedEntry.liked) { + // If the entry is liked + setLikeCount(likeCount + 1); // Increment like count + } else { + // If the entry is unliked + setLikeCount(likeCount - 1); // Decrement like count + } + } return updatedEntry; } else { return entry; @@ -28,15 +36,16 @@ const App = () => {

    Chat between Vladimir and Estragon

    -

    ❤️s

    +

    {likeCount}❤️s

    {/* */}
    diff --git a/src/App.test.js b/src/App.test.js index 878148902..a619498d6 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -7,6 +7,7 @@ describe('Wave 03: clicking like button and rendering App', () => { // Arrange const { container } = render(); let buttons = container.querySelectorAll('button.like'); + console.log(buttons); // Act fireEvent.click(buttons[0]); diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css index c0246c216..e894bad62 100644 --- a/src/components/ChatEntry.css +++ b/src/components/ChatEntry.css @@ -8,6 +8,7 @@ outline: inherit; } + .chat-entry { margin: 1rem; } diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b2d9310d7..6ef5ce292 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -2,14 +2,17 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; -// const getTimeAgo = (timeStamp) => { -// const currentYear = new Date().getFullYear(); -// const textYear = new Date(timeStamp).getFullYear(); -// const difference = currentYear - textYear; -// return `${difference} years ago`; const ChatEntry = (props) => { + // const determineClassName = () => { + // if (props.sender === props.entrie[0].sender) { + // const localMessages = true; + // return localMessages ? 'chat-entry local' : 'chat-entry remote'; + // } + // } + + const onHeartClick = () => { const updatedEntry = { id: props.id, @@ -21,7 +24,8 @@ const ChatEntry = (props) => { props.onUpdate(updatedEntry); }; - const heartColor = props.liked ? '🤍' : '❤️'; + const heartColor = props.liked ? '❤️' : '🤍'; + const getTimeAgo = (timeStamp) => { const currentYear = new Date().getFullYear(); @@ -31,11 +35,12 @@ const ChatEntry = (props) => { }; return (
    -

    {props.sender}

    + {/*
    */} + {/*

    {props.sender}

    */}

    {props.body}

    {getTimeAgo(props.timeStamp)}

    - + {/* {likeColor} */}
    @@ -48,7 +53,12 @@ ChatEntry.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired, - onUpdate: PropTypes.func.isRequired, + onUpdate: PropTypes.func, + // isRequired }; +// ChatEntry.defaultProps = { +// onUpdate: () => {} // Provide a default empty function as the value +// }; + export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index a7ce7e75b..20df5d8bd 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -3,19 +3,22 @@ import './ChatLog.css'; import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; -const ChatLog = ({entries}) => { +// const ChatLog = ({entries, onUpdateEntry}) => { + const ChatLog = (props) => { + // console.log({onUpdateEntry}); - const chatComponents = entries.map((entry) => { + // const chatComponents = entries.map((entry) => { + const chatComponents = props.entries.map((entry, i) => { return ( -
  • +
  • - onUpdate={entries.onUpdateChatEntry} + liked={entry.liked} + onUpdate={props.onUpdateEntry}>
    • ); From 200ecaae44e0f95aca28aa72c531197363c4b93a Mon Sep 17 00:00:00 2001 From: Whitney Date: Thu, 22 Jun 2023 12:53:50 -0700 Subject: [PATCH 3/6] All waves passing, next step: cleanup --- src/App.js | 4 +++- src/components/ChatEntry.js | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 053e1e8c7..a4c80b2d3 100644 --- a/src/App.js +++ b/src/App.js @@ -10,7 +10,9 @@ const App = () => { const [chatData, setChatData] = useState(chatMessages); const [likeCount, setLikeCount] = useState(0); + const updateEntryData = updatedEntry => { + // const entry = chatData.find((e) => e.id === updatedEntry.id) const entries = chatData.map(entry => { if (entry.id === updatedEntry.id) { if (entry.liked !== updatedEntry.liked) { @@ -36,7 +38,7 @@ const App = () => {

    Chat between Vladimir and Estragon

    -

    {likeCount}❤️s

    +

    {likeCount} ❤️s

    diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 6ef5ce292..13e2f552c 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -36,11 +36,11 @@ const ChatEntry = (props) => { return (
    {/*
    */} - {/*

    {props.sender}

    */} +

    {props.sender}

    {props.body}

    {getTimeAgo(props.timeStamp)}

    - + {/* {likeColor} */}
    From ac487973f8592632745b1a5707492e9a3c403187 Mon Sep 17 00:00:00 2001 From: Whitney Date: Fri, 30 Jun 2023 00:14:42 -0700 Subject: [PATCH 4/6] Finished, might add color selector at later date --- src/App.js | 36 +++++++++--------------- src/components/ChatEntry.js | 55 +++++++++++++------------------------ src/components/ChatLog.js | 40 ++++++++++++--------------- 3 files changed, 49 insertions(+), 82 deletions(-) diff --git a/src/App.js b/src/App.js index a4c80b2d3..26a1b857a 100644 --- a/src/App.js +++ b/src/App.js @@ -4,33 +4,25 @@ import chatMessages from './data/messages.json'; import ChatLog from './components/ChatLog'; import { useState } from 'react'; - const App = () => { const [chatData, setChatData] = useState(chatMessages); const [likeCount, setLikeCount] = useState(0); - const updateEntryData = updatedEntry => { - // const entry = chatData.find((e) => e.id === updatedEntry.id) - const entries = chatData.map(entry => { - if (entry.id === updatedEntry.id) { - if (entry.liked !== updatedEntry.liked) { - // If the liked state has changed - if (updatedEntry.liked) { - // If the entry is liked - setLikeCount(likeCount + 1); // Increment like count - } else { - // If the entry is unliked - setLikeCount(likeCount - 1); // Decrement like count - } + const updateChatData = (updatedChat) => { + const entries = chatData.map((entry) => { + if (entry.id === updatedChat.id) { + if (entry.liked !== updatedChat.liked) { + const likeCountChange = updatedChat.liked ? 1 : -1; + setLikeCount((prevCount) => prevCount + likeCountChange); } - return updatedEntry; + return updatedChat; } else { return entry; } }); - setChatData(entries) + setChatData(entries); }; return ( @@ -42,13 +34,11 @@ const App = () => {
    - - {/* */} - +
    ); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 13e2f552c..dcde3c618 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,47 +1,34 @@ import React from 'react'; import './ChatEntry.css'; +import TimeStamp from './TimeStamp'; import PropTypes from 'prop-types'; -const ChatEntry = (props) => { - - // const determineClassName = () => { - // if (props.sender === props.entrie[0].sender) { - // const localMessages = true; - // return localMessages ? 'chat-entry local' : 'chat-entry remote'; - // } - // } +const ChatEntry = ({sender, body, timeStamp, liked, id, updateChatData}) => { + const location = sender === 'Vladimir' ? 'local' : 'remote'; + const heartColor = liked ? '❤️' : '🤍'; const onHeartClick = () => { const updatedEntry = { - id: props.id, - sender: props.sender, - body: props.body, - timeStamp: props.timeStamp, - liked: !props.liked, + id: id, + sender: sender, + body: body, + timeStamp: timeStamp, + liked: !liked, }; - props.onUpdate(updatedEntry); - }; - - const heartColor = props.liked ? '❤️' : '🤍'; - - - const getTimeAgo = (timeStamp) => { - const currentYear = new Date().getFullYear(); - const textYear = new Date(timeStamp).getFullYear(); - const difference = currentYear - textYear; - return `${difference} years ago`; + updateChatData(updatedEntry); }; + return ( -
    - {/*
    */} -

    {props.sender}

    +
    +

    {sender}

    -

    {props.body}

    -

    {getTimeAgo(props.timeStamp)}

    +

    {body}

    +

    + +

    - {/* {likeColor} */}
    ); @@ -53,12 +40,8 @@ ChatEntry.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired, - onUpdate: PropTypes.func, - // isRequired + updateChatData: PropTypes.func.isRequired, }; -// ChatEntry.defaultProps = { -// onUpdate: () => {} // Provide a default empty function as the value -// }; - export default ChatEntry; + diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 20df5d8bd..d5fb92aa0 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,36 +1,28 @@ -import React from 'react' +import React from 'react'; import './ChatLog.css'; import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; -// const ChatLog = ({entries, onUpdateEntry}) => { - const ChatLog = (props) => { - // console.log({onUpdateEntry}); - - // const chatComponents = entries.map((entry) => { - const chatComponents = props.entries.map((entry, i) => { - +const ChatLog = (props) => { + const chatComponents = props.entries.map((entry) => { return ( -
  • - - -
    • + ); - }); return (
    - {chatComponents} + {chatComponents}
    ) - }; ChatLog.propTypes = { @@ -41,6 +33,8 @@ ChatLog.propTypes = { timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired, })), - onUpdateEntry: PropTypes.func.isRequired + updateChatData: PropTypes.func.isRequired }; -export default ChatLog; \ No newline at end of file + +export default ChatLog; + From 5c50e9054d44f2c29140b31da1d854eb0938c1bf Mon Sep 17 00:00:00 2001 From: Whitney Date: Fri, 30 Jun 2023 00:38:57 -0700 Subject: [PATCH 5/6] Why is branching? Complete --- src/components/ChatEntry.js | 2 +- src/components/ChatLog.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index dcde3c618..397749679 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -44,4 +44,4 @@ ChatEntry.propTypes = { }; export default ChatEntry; - + \ No newline at end of file diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index d5fb92aa0..a94284917 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -37,4 +37,3 @@ ChatLog.propTypes = { }; export default ChatLog; - From e13da8a80eb4666de064ad8b9b993b2794f6bd16 Mon Sep 17 00:00:00 2001 From: Whitney Date: Fri, 30 Jun 2023 00:49:18 -0700 Subject: [PATCH 6/6] Test to fix warning --- src/components/ChatEntry.js | 2 +- src/components/ChatLog.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 397749679..8946c9030 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -40,7 +40,7 @@ ChatEntry.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired, - updateChatData: PropTypes.func.isRequired, + updateChatData: PropTypes.func, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index a94284917..30fd945ac 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -33,7 +33,7 @@ ChatLog.propTypes = { timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired, })), - updateChatData: PropTypes.func.isRequired + updateChatData: PropTypes.func }; export default ChatLog;