From 8c99c89415fb4e28b46c2b4bb4693165ed82bfca Mon Sep 17 00:00:00 2001 From: RebeccaRoach Date: Mon, 13 Apr 2020 17:46:17 -0700 Subject: [PATCH 1/6] Hard-coded Timeline Events implemented in App. --- src/App.js | 10 ++++++++-- src/components/Timeline.js | 7 ++++++- src/components/TimelineEvent.js | 14 ++++++++++++-- 3 files changed, 26 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index 76d86d2..3111414 100644 --- a/src/App.js +++ b/src/App.js @@ -3,17 +3,23 @@ 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); - // Customize the code below + + return (
-

Application title

+

Tina's Social Media Feed

+ + + {/* */} +
); diff --git a/src/components/Timeline.js b/src/components/Timeline.js index 463eb3e..d093102 100644 --- a/src/components/Timeline.js +++ b/src/components/Timeline.js @@ -4,7 +4,12 @@ import TimelineEvent from './TimelineEvent'; const Timeline = () => { - return; + // build map here + //const timelineevent => returns event components + + return ( +
+ ) } export default Timeline; \ No newline at end of file diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js index cc476c2..1c6ffd8 100644 --- a/src/components/TimelineEvent.js +++ b/src/components/TimelineEvent.js @@ -2,9 +2,19 @@ import React from 'react'; import './TimelineEvent.css'; import Timestamp from './Timestamp'; -const TimelineEvent = () => { +const TimelineEvent = (props) => { - return; + const postTimestamp = () => { + return + } + + return ( +
+

{props.person}

+

{postTimestamp(props.time)}

+

{props.status}

+
+ ) } export default TimelineEvent; \ No newline at end of file From 03618e74e910f1b84094f551a9455f88a8b6202b Mon Sep 17 00:00:00 2001 From: RebeccaRoach Date: Mon, 13 Apr 2020 21:00:44 -0700 Subject: [PATCH 2/6] Timeline Component renders with hard-coded timelineEventList variable in Timeline.js. --- src/App.js | 10 +++--- src/components/Timeline.js | 56 ++++++++++++++++++++++++++++++--- src/components/TimelineEvent.js | 4 +-- 3 files changed, 57 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index 3111414..f8a61b6 100644 --- a/src/App.js +++ b/src/App.js @@ -7,19 +7,17 @@ import TimelineEvent from './components/TimelineEvent'; function App() { console.log(timelineData); - + console.log("hello!"); + console.log(timelineData.events); return (
-

Tina's Social Media Feed

+

{timelineData.person}'s Social Media Feed

- - - {/* */} - +
); diff --git a/src/components/Timeline.js b/src/components/Timeline.js index d093102..724c68c 100644 --- a/src/components/Timeline.js +++ b/src/components/Timeline.js @@ -2,13 +2,59 @@ import React from 'react'; import './Timeline.css'; import TimelineEvent from './TimelineEvent'; -const Timeline = () => { - - // build map here - //const timelineevent => returns event components +// to test out that we can read from a list within this file: +const timelineEventList = [ + { + "person": "Adele Goldberg", + "status": "In Smalltalk, everything happens somewhere else.", + "timeStamp": "2018-05-18T22:12:03Z" + }, + { + "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" + }, + { + "person": "Aubrey Tang", + "status": "The art of computer programming is a blend of mathematics and poetry.", + "timeStamp": "2018-05-18T22:41:19Z" + }, + { + "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" + }, + { + "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" + }, + { + "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" + } +] + +const Timeline = (props) => { + + // use map here to return event components for each element in event list + const timelineEventComponents = timelineEventList.map((event) => { + return ( + + ); + }); + return ( -
+
    + {timelineEventComponents} +
) } diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js index 1c6ffd8..ea8de76 100644 --- a/src/components/TimelineEvent.js +++ b/src/components/TimelineEvent.js @@ -5,13 +5,13 @@ import Timestamp from './Timestamp'; const TimelineEvent = (props) => { const postTimestamp = () => { - return + return } return (

{props.person}

-

{postTimestamp(props.time)}

+ {postTimestamp(props.timeStamp)}

{props.status}

) From 0dfcf451e9e5173b100a1b42a79c9700bee169b9 Mon Sep 17 00:00:00 2001 From: RebeccaRoach Date: Mon, 13 Apr 2020 21:10:43 -0700 Subject: [PATCH 3/6] App reads in and renders timelineEventList hard-coded variable from App file instead of Timeline. --- src/App.js | 43 +++++++++++++++++++++++++++++++++++++- src/components/Timeline.js | 36 +------------------------------ 2 files changed, 43 insertions(+), 36 deletions(-) diff --git a/src/App.js b/src/App.js index f8a61b6..52f32f5 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,46 @@ import timelineData from './data/timeline.json'; import Timeline from './components/Timeline'; import TimelineEvent from './components/TimelineEvent'; + +// to test out that we can read from a list within this file: +const timelineEventList = [ + { + "person": "Adele Goldberg", + "status": "In Smalltalk, everything happens somewhere else.", + "timeStamp": "2018-05-18T22:12:03Z" + }, + { + "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" + }, + { + "person": "Aubrey Tang", + "status": "The art of computer programming is a blend of mathematics and poetry.", + "timeStamp": "2018-05-18T22:41:19Z" + }, + { + "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" + }, + { + "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" + }, + { + "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" + }, + { + "person": "Becca Roach", + "status": "//for a GREAT 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" + }, +]; + function App() { console.log(timelineData); console.log("hello!"); @@ -17,7 +57,8 @@ function App() {

{timelineData.person}'s Social Media Feed

- + {/* */} +
); diff --git a/src/components/Timeline.js b/src/components/Timeline.js index 724c68c..39432ed 100644 --- a/src/components/Timeline.js +++ b/src/components/Timeline.js @@ -2,45 +2,11 @@ import React from 'react'; import './Timeline.css'; import TimelineEvent from './TimelineEvent'; -// to test out that we can read from a list within this file: -const timelineEventList = [ - { - "person": "Adele Goldberg", - "status": "In Smalltalk, everything happens somewhere else.", - "timeStamp": "2018-05-18T22:12:03Z" - }, - { - "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" - }, - { - "person": "Aubrey Tang", - "status": "The art of computer programming is a blend of mathematics and poetry.", - "timeStamp": "2018-05-18T22:41:19Z" - }, - { - "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" - }, - { - "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" - }, - { - "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" - } -] - const Timeline = (props) => { // use map here to return event components for each element in event list - const timelineEventComponents = timelineEventList.map((event) => { + const timelineEventComponents = props.events.map((event) => { return ( Date: Mon, 13 Apr 2020 21:26:34 -0700 Subject: [PATCH 4/6] App renders timelineData json instead of hard-coded variable. Added comments for current questions. --- src/App.js | 50 ++------------------------------- src/components/TimelineEvent.js | 4 ++- 2 files changed, 5 insertions(+), 49 deletions(-) diff --git a/src/App.js b/src/App.js index 52f32f5..35bd932 100644 --- a/src/App.js +++ b/src/App.js @@ -3,53 +3,8 @@ import logo from './logo.svg'; import './App.css'; import timelineData from './data/timeline.json'; import Timeline from './components/Timeline'; -import TimelineEvent from './components/TimelineEvent'; - - -// to test out that we can read from a list within this file: -const timelineEventList = [ - { - "person": "Adele Goldberg", - "status": "In Smalltalk, everything happens somewhere else.", - "timeStamp": "2018-05-18T22:12:03Z" - }, - { - "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" - }, - { - "person": "Aubrey Tang", - "status": "The art of computer programming is a blend of mathematics and poetry.", - "timeStamp": "2018-05-18T22:41:19Z" - }, - { - "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" - }, - { - "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" - }, - { - "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" - }, - { - "person": "Becca Roach", - "status": "//for a GREAT 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" - }, -]; function App() { - console.log(timelineData); - console.log("hello!"); - console.log(timelineData.events); - return (
@@ -57,11 +12,10 @@ function App() {

{timelineData.person}'s Social Media Feed

- {/* */} - +
); } -export default App; +export default App; \ No newline at end of file diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js index ea8de76..04dd448 100644 --- a/src/components/TimelineEvent.js +++ b/src/components/TimelineEvent.js @@ -5,12 +5,14 @@ import Timestamp from './Timestamp'; const TimelineEvent = (props) => { const postTimestamp = () => { - return + //why does changing timeStamp= to time= below make 21 hours show, vs. a few seconds ago? + return } return (

{props.person}

+ {/* why does changing props.time to props.timeStamp to just props below not seem to matter? */} {postTimestamp(props.timeStamp)}

{props.status}

From 15dab67ab351d849c14f9eea0dd2bd11199b40c4 Mon Sep 17 00:00:00 2001 From: RebeccaRoach Date: Tue, 14 Apr 2020 18:59:15 -0700 Subject: [PATCH 5/6] Modified TimelineEvent.js to return timestamp inside returned div; modified CSS styles. --- src/App.css | 8 ++++++++ src/App.js | 5 +++-- src/components/Timeline.css | 4 ++-- src/components/Timeline.js | 4 ++-- src/components/TimelineEvent.css | 3 ++- src/components/TimelineEvent.js | 15 +++++---------- 6 files changed, 22 insertions(+), 17 deletions(-) diff --git a/src/App.css b/src/App.css index e20270c..5004919 100644 --- a/src/App.css +++ b/src/App.css @@ -4,6 +4,9 @@ color: white; position: fixed; width: 100%; + display: flex; + justify-content: center; + align-items: center; } .App-title { @@ -15,3 +18,8 @@ padding-top: 7rem; background-color: #E6ECF0; } + +.logo { + max-width: 60px; + padding-right: 20px; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 35bd932..4afcb9b 100644 --- a/src/App.js +++ b/src/App.js @@ -9,10 +9,11 @@ function App() { return (
-

{timelineData.person}'s Social Media Feed

+ React logo decoration +

{timelineData.person}'s Social Media Feed

- +
); diff --git a/src/components/Timeline.css b/src/components/Timeline.css index e31f946..daccff5 100644 --- a/src/components/Timeline.css +++ b/src/components/Timeline.css @@ -1,5 +1,5 @@ .timeline { - width: 30%; + width: 45%; margin: auto; text-align: left; -} +} \ No newline at end of file diff --git a/src/components/Timeline.js b/src/components/Timeline.js index 39432ed..6cfeaa0 100644 --- a/src/components/Timeline.js +++ b/src/components/Timeline.js @@ -5,7 +5,7 @@ import TimelineEvent from './TimelineEvent'; const Timeline = (props) => { - // use map here to return event components for each element in event list + // map over event props to return event components for each element const timelineEventComponents = props.events.map((event) => { return ( { }); return ( -
    +
      {timelineEventComponents}
    ) diff --git a/src/components/TimelineEvent.css b/src/components/TimelineEvent.css index ea6407a..6f76327 100644 --- a/src/components/TimelineEvent.css +++ b/src/components/TimelineEvent.css @@ -18,10 +18,11 @@ .event-status { grid-area: 2 / 1 / span 1 / -1; + word-wrap: break-word; } .event-time { grid-area: 1 / 2 / span 1 / span 1; margin-top: 0.5rem; text-align: right; -} +} \ No newline at end of file diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js index 04dd448..84411ae 100644 --- a/src/components/TimelineEvent.js +++ b/src/components/TimelineEvent.js @@ -3,18 +3,13 @@ import './TimelineEvent.css'; import Timestamp from './Timestamp'; const TimelineEvent = (props) => { - - const postTimestamp = () => { - //why does changing timeStamp= to time= below make 21 hours show, vs. a few seconds ago? - return - } return ( -
    -

    {props.person}

    - {/* why does changing props.time to props.timeStamp to just props below not seem to matter? */} - {postTimestamp(props.timeStamp)} -

    {props.status}

    +
    +

    {props.person}

    + {/* why does changing props.time(few seconds) to props.timeStamp (2years) to just props(19hours) change what we see? */} +

    +

    {props.status}

    ) } From f511068b1f7f8d7b76c6761704f5f8e7f5481daf Mon Sep 17 00:00:00 2001 From: RebeccaRoach Date: Tue, 14 Apr 2020 21:47:32 -0700 Subject: [PATCH 6/6] Cleaned comments. --- src/components/Timeline.js | 2 +- src/components/TimelineEvent.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Timeline.js b/src/components/Timeline.js index 6cfeaa0..231ab8b 100644 --- a/src/components/Timeline.js +++ b/src/components/Timeline.js @@ -5,7 +5,7 @@ import TimelineEvent from './TimelineEvent'; const Timeline = (props) => { - // map over event props to return event components for each element + // map over event props to return TimelineEvent components for each element const timelineEventComponents = props.events.map((event) => { return ( { return (

    {props.person}

    - {/* why does changing props.time(few seconds) to props.timeStamp (2years) to just props(19hours) change what we see? */}

    {props.status}