From 5f59944314469da0ad1cea7ff1b4fca940f61e79 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 14 Apr 2020 13:46:44 -0700 Subject: [PATCH 01/16] add TimelineEvent --- src/App.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.js b/src/App.js index 76d86d2..da53353 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import logo from './logo.svg'; import './App.css'; import timelineData from './data/timeline.json'; import Timeline from './components/Timeline'; +import TimelineEvent from './components/TimelineEvent'; function App() { console.log(timelineData); @@ -14,6 +15,7 @@ function App() {

Application title

+
); From 3de7f4bf9e8e37e7c5f6e2b30081e3d761cf840c Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 14 Apr 2020 13:47:27 -0700 Subject: [PATCH 02/16] return formatted data for first person --- src/components/TimelineEvent.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js index cc476c2..1217fd6 100644 --- a/src/components/TimelineEvent.js +++ b/src/components/TimelineEvent.js @@ -2,9 +2,14 @@ import React from 'react'; import './TimelineEvent.css'; import Timestamp from './Timestamp'; -const TimelineEvent = () => { - - return; +const TimelineEvent = (props) => { + return ( +
  • +

    {props.data.events[0].person}

    + +

    {props.data.events[0].status}

    +
    • + ) } export default TimelineEvent; \ No newline at end of file From 10048e5f89084e46c5192d9add9b32699137c0a9 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 14 Apr 2020 14:17:13 -0700 Subject: [PATCH 03/16] replace TimelineEvent with Timeline component --- src/App.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index da53353..09d27d1 100644 --- a/src/App.js +++ b/src/App.js @@ -3,7 +3,6 @@ import logo from './logo.svg'; import './App.css'; import timelineData from './data/timeline.json'; import Timeline from './components/Timeline'; -import TimelineEvent from './components/TimelineEvent'; function App() { console.log(timelineData); @@ -15,7 +14,7 @@ function App() {

    Application title

    - +
    ); From c6f2b67fc3a2a277270614b320509c69f66250b6 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 14 Apr 2020 14:26:20 -0700 Subject: [PATCH 04/16] update to ul & update calls to props data --- src/components/TimelineEvent.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js index 1217fd6..9e64c7b 100644 --- a/src/components/TimelineEvent.js +++ b/src/components/TimelineEvent.js @@ -4,11 +4,11 @@ import Timestamp from './Timestamp'; const TimelineEvent = (props) => { return ( -
  • -

    {props.data.events[0].person}

    - -

    {props.data.events[0].status}

    -
    • +
      +
    • {props.person}
      • +
      • +
    • {props.status}
      • +
    ) } From 67695d045382599e586214e6bf2339250384a961 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 14 Apr 2020 14:27:55 -0700 Subject: [PATCH 05/16] update Timeline to take props argument & render events --- src/components/Timeline.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/Timeline.js b/src/components/Timeline.js index 463eb3e..312eee6 100644 --- a/src/components/Timeline.js +++ b/src/components/Timeline.js @@ -2,9 +2,16 @@ import React from 'react'; import './Timeline.css'; import TimelineEvent from './TimelineEvent'; -const Timeline = () => { - - return; +const Timeline = (props) => { + const timelineComponents = props.events.map((event, i) => { + return ( +
  • + +
    • + ); + }); + + return (timelineComponents); } export default Timeline; \ No newline at end of file From 2315659639dd1b1ea71998d0b5bf67a11fefdad6 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 14 Apr 2020 14:28:18 -0700 Subject: [PATCH 06/16] move Timeline component into ul --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 09d27d1..17c87c2 100644 --- a/src/App.js +++ b/src/App.js @@ -14,7 +14,7 @@ function App() {

    Application title

    - +
    ); From 058a2d220f3d6c2a97355b675ab6abb3430ff6db Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 14 Apr 2020 14:34:52 -0700 Subject: [PATCH 07/16] update to more semantic html --- src/App.js | 2 +- src/components/Timeline.js | 4 ++-- src/components/TimelineEvent.js | 10 +++++----- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index 17c87c2..09d27d1 100644 --- a/src/App.js +++ b/src/App.js @@ -14,7 +14,7 @@ function App() {

    Application title

    -
    +
    ); diff --git a/src/components/Timeline.js b/src/components/Timeline.js index 312eee6..4d4e62c 100644 --- a/src/components/Timeline.js +++ b/src/components/Timeline.js @@ -5,9 +5,9 @@ import TimelineEvent from './TimelineEvent'; const Timeline = (props) => { const timelineComponents = props.events.map((event, i) => { return ( -
  • +
    -
    • + ); }); diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js index 9e64c7b..3e464a1 100644 --- a/src/components/TimelineEvent.js +++ b/src/components/TimelineEvent.js @@ -4,11 +4,11 @@ import Timestamp from './Timestamp'; const TimelineEvent = (props) => { return ( -
      -
    • {props.person}
      • -
      • -
    • {props.status}
      • -
    +
    +
    {props.person}
    +

    +

    {props.status}

    +
    ) } From 165696ebc7c6086bf6ac87c2d99ecd9deb79e29a Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 14 Apr 2020 14:37:47 -0700 Subject: [PATCH 08/16] make status wrap when it's too long for container --- src/components/TimelineEvent.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/TimelineEvent.css b/src/components/TimelineEvent.css index ea6407a..74abe0d 100644 --- a/src/components/TimelineEvent.css +++ b/src/components/TimelineEvent.css @@ -18,6 +18,7 @@ .event-status { grid-area: 2 / 1 / span 1 / -1; + overflow-wrap: break-word; } .event-time { From 371b401e2df74eca44a69bc416fddc302aa2c758 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 14 Apr 2020 14:37:59 -0700 Subject: [PATCH 09/16] update header --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 09d27d1..c8bf10c 100644 --- a/src/App.js +++ b/src/App.js @@ -11,7 +11,7 @@ function App() { return (
    -

    Application title

    +

    {timelineData.person}'s Social Media Timeline

    From f19565ec7d02b1253bc78785aa97324e43c05a9c Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 14 Apr 2020 15:52:02 -0700 Subject: [PATCH 10/16] add likes --- src/data/timeline.json | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/data/timeline.json b/src/data/timeline.json index 743c449..0f04bc6 100644 --- a/src/data/timeline.json +++ b/src/data/timeline.json @@ -4,32 +4,38 @@ { "person": "Adele Goldberg", "status": "In Smalltalk, everything happens somewhere else.", - "timeStamp": "2018-05-18T22:12:03Z" + "timeStamp": "2018-05-18T22:12:03Z", + "likes": 5 }, { "person": "Erica Baker", "status": "Every once in a while, life affords you the opportunity to have real, authentic, genuine happiness. It's up to you to see it. Pay attention.", - "timeStamp": "2018-05-18T22:19:40Z" + "timeStamp": "2018-05-18T22:19:40Z", + "likes": 3 }, { "person": "Aubrey Tang", "status": "The art of computer programming is a blend of mathematics and poetry.", - "timeStamp": "2018-05-18T22:41:19Z" + "timeStamp": "2018-05-18T22:41:19Z", + "likes": 3 }, { "person": "Julia Evans", "status": "no seriously what if we replaced tech books with informative concise 30 page zines though", - "timeStamp": "2018-05-18T23:02:44Z" + "timeStamp": "2018-05-18T23:02:44Z", + "likes": 2 }, { "person": "Stephanie Hurlburt", "status": "I don’t think you can do good work if you’re not at least occasionally talking to a person you’re building for.", - "timeStamp": "2018-05-18T23:09:38Z" + "timeStamp": "2018-05-18T23:09:38Z", + "likes": 1 }, { "person": "Yan Zhu", "status": "//for a good time, paste this into twitter page console: c=new AudioContext;n=setInterval(\"for(n+=7,i=k,P='▲.\\\n';i-=1/k;P+=P[i%2?(i%2*j-j+n/k^j)&1:2])j=k/i;doc.innerHTML=P;with(c.createOscillator())frequency.value=200*(j+n/k^j),connect(c.destination),start(),stop(n/k)\",k=64)", - "timeStamp": "2018-05-18T23:51:01Z" + "timeStamp": "2018-05-18T23:51:01Z", + "likes": 8 } ] } \ No newline at end of file From 00871e912086456217cc8c5d9d3909f5264397d0 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 14 Apr 2020 15:52:31 -0700 Subject: [PATCH 11/16] add likes to props --- src/components/Timeline.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Timeline.js b/src/components/Timeline.js index 4d4e62c..8fbd5ae 100644 --- a/src/components/Timeline.js +++ b/src/components/Timeline.js @@ -6,7 +6,7 @@ const Timeline = (props) => { const timelineComponents = props.events.map((event, i) => { return (
    - +
    ); }); From 1296fdfb317b70f9ee5019491904332fa2b8ec76 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 14 Apr 2020 15:54:59 -0700 Subject: [PATCH 12/16] add styling for event-likes --- src/components/TimelineEvent.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/TimelineEvent.css b/src/components/TimelineEvent.css index 74abe0d..a58a779 100644 --- a/src/components/TimelineEvent.css +++ b/src/components/TimelineEvent.css @@ -4,6 +4,7 @@ padding: 0.5rem; border-bottom: 1px solid #E6ECF0; background-color: #FFF; + border-radius: 5px; } .timeline-event:hover { @@ -26,3 +27,8 @@ margin-top: 0.5rem; text-align: right; } + +.event-likes { + grid-area: 3 / 1 / span 1 / -1; + margin: 5px 0; +} \ No newline at end of file From efede2be9209d33ae05dc9d382e417b1e42f24a1 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 14 Apr 2020 15:55:41 -0700 Subject: [PATCH 13/16] render event-likes in TimelineEvent --- src/components/TimelineEvent.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js index 3e464a1..a5598c8 100644 --- a/src/components/TimelineEvent.js +++ b/src/components/TimelineEvent.js @@ -3,11 +3,15 @@ import './TimelineEvent.css'; import Timestamp from './Timestamp'; const TimelineEvent = (props) => { + let likes = "likes"; + if (props.likes === 1) likes = "like"; + return (
    {props.person}

    {props.status}

    +

    {props.likes} {likes}

    ) } From d6bb417c427bb3ef3a4262ee274ab4da77039851 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 14 Apr 2020 15:56:35 -0700 Subject: [PATCH 14/16] change margin between events --- src/components/Timeline.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Timeline.css b/src/components/Timeline.css index e31f946..f2ef065 100644 --- a/src/components/Timeline.css +++ b/src/components/Timeline.css @@ -1,5 +1,5 @@ .timeline { width: 30%; - margin: auto; + margin: 10px auto; text-align: left; } From 4249f4ea6cf138b54f5b3bf9581a8d1d5b95f4ed Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 14 Apr 2020 18:59:57 -0700 Subject: [PATCH 15/16] update Julia's likes --- src/data/timeline.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/timeline.json b/src/data/timeline.json index 0f04bc6..cb8ad1c 100644 --- a/src/data/timeline.json +++ b/src/data/timeline.json @@ -23,7 +23,7 @@ "person": "Julia Evans", "status": "no seriously what if we replaced tech books with informative concise 30 page zines though", "timeStamp": "2018-05-18T23:02:44Z", - "likes": 2 + "likes": 125 }, { "person": "Stephanie Hurlburt", From aa193c47cbdf8e35a0d103695a93b05b8bf88976 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 14 Apr 2020 19:01:51 -0700 Subject: [PATCH 16/16] update timestamp to timeStamp to call data correctly --- src/components/Timeline.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Timeline.js b/src/components/Timeline.js index 8fbd5ae..327870a 100644 --- a/src/components/Timeline.js +++ b/src/components/Timeline.js @@ -6,7 +6,7 @@ const Timeline = (props) => { const timelineComponents = props.events.map((event, i) => { return (
    - +
    ); });