From 0b73b317337ee2f6f7967b3ff9c801c490ccc209 Mon Sep 17 00:00:00 2001 From: Stephanie Date: Tue, 14 Apr 2020 18:31:38 -0700 Subject: [PATCH 1/4] centered --- src/App.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.css b/src/App.css index e20270c..683fba9 100644 --- a/src/App.css +++ b/src/App.css @@ -14,4 +14,5 @@ .App-main { padding-top: 7rem; background-color: #E6ECF0; + text-align: center; } From e58eb4f0c45c4d8c52f851436344675bad795bb3 Mon Sep 17 00:00:00 2001 From: Stephanie Date: Tue, 14 Apr 2020 18:32:22 -0700 Subject: [PATCH 2/4] Wave 1 TimelineEvent, 1 post hardcoded. --- src/components/TimelineEvent.js | 40 ++++++++++++++++++++++++++++++--- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js index cc476c2..c6a16c9 100644 --- a/src/components/TimelineEvent.js +++ b/src/components/TimelineEvent.js @@ -1,10 +1,44 @@ import React from 'react'; import './TimelineEvent.css'; import Timestamp from './Timestamp'; +import { render } from '@testing-library/react'; + +// //This is a Funtional Component +// // - simple function +// // - recieving props and returning a declaration +// // - always use Functional Components whenever possible +// // - absence of "This" keyword +// // -- forced to think of solution without having to use State +// // - mainly responsible for UI + +const TimelineEvent = (props) => { + // console.log(props) + // return

Hello {props.name}

; + return( +
+

{props.person}

+

+

{props.status}

+
+ ); + -const TimelineEvent = () => { - return; } -export default TimelineEvent; \ No newline at end of file +// // This is a Class Component +// // - more feature rich +// // - can maintain their own private data - "State" +// // - can contain complex UI logic +// // - provide lifecycle hooks + + +// Class TimelineEventClass extends Component { +// render(){ +// return

Class Component Texts

+// } +// } + +export default TimelineEvent; +// export default TimelineEventClass; +// // would also nn to import on APP.js \ No newline at end of file From 3bf832ef058dcd5c91664fb24a7e7b13b64ab9e9 Mon Sep 17 00:00:00 2001 From: Stephanie Date: Tue, 14 Apr 2020 18:32:53 -0700 Subject: [PATCH 3/4] Wave 1 App.js 1 post hardcoded. --- src/App.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 76d86d2..1047e9b 100644 --- a/src/App.js +++ b/src/App.js @@ -3,17 +3,26 @@ import logo from './logo.svg'; import './App.css'; import timelineData from './data/timeline.json'; import Timeline from './components/Timeline'; +import TimelineEvent from './components/TimelineEvent'; +import Timestamp from './components/Timestamp'; function App() { console.log(timelineData); // Customize the code below + // Then read in the /src/data/timeline.json file + // into an array of objects in /src/App.js. In the + // render function of the App component, render a TimeLine component + // using the array of objects as the events prop. return (
-

Application title

+

Ada's Feed

+
); From e9496feba5dadc81ee121bae26b41ebbbf18a826 Mon Sep 17 00:00:00 2001 From: Stephanie Date: Wed, 15 Apr 2020 08:58:25 -0700 Subject: [PATCH 4/4] cleaned up --- src/App.css | 2 ++ src/App.js | 9 +-------- src/components/Timeline.js | 20 +++++++++++++++++--- src/components/TimelineEvent.js | 33 +++------------------------------ 4 files changed, 23 insertions(+), 41 deletions(-) diff --git a/src/App.css b/src/App.css index 683fba9..fc94467 100644 --- a/src/App.css +++ b/src/App.css @@ -15,4 +15,6 @@ padding-top: 7rem; background-color: #E6ECF0; text-align: center; + border: black; + /* margin: 30px; */ } diff --git a/src/App.js b/src/App.js index 1047e9b..19aeb0a 100644 --- a/src/App.js +++ b/src/App.js @@ -9,20 +9,13 @@ import Timestamp from './components/Timestamp'; function App() { console.log(timelineData); - // Customize the code below - // Then read in the /src/data/timeline.json file - // into an array of objects in /src/App.js. In the - // render function of the App component, render a TimeLine component - // using the array of objects as the events prop. return (

Ada's Feed

- +
); diff --git a/src/components/Timeline.js b/src/components/Timeline.js index 463eb3e..bc067ee 100644 --- a/src/components/Timeline.js +++ b/src/components/Timeline.js @@ -1,10 +1,24 @@ import React from 'react'; import './Timeline.css'; import TimelineEvent from './TimelineEvent'; +import { render } from '@testing-library/react'; +import '../data/timeline.json'; -const Timeline = () => { - - return; +const Timeline = (props) => { + const posts = props.events.map ((event) => { + return ( + + ); + }); + return ( +
    + {posts} +
+ ); } export default Timeline; \ No newline at end of file diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js index c6a16c9..64bc6dc 100644 --- a/src/components/TimelineEvent.js +++ b/src/components/TimelineEvent.js @@ -3,42 +3,15 @@ import './TimelineEvent.css'; import Timestamp from './Timestamp'; import { render } from '@testing-library/react'; -// //This is a Funtional Component -// // - simple function -// // - recieving props and returning a declaration -// // - always use Functional Components whenever possible -// // - absence of "This" keyword -// // -- forced to think of solution without having to use State -// // - mainly responsible for UI const TimelineEvent = (props) => { - // console.log(props) - // return

Hello {props.name}

; return(
-

{props.person}

+

{props.person}

-

{props.status}

+

{props.status}

- ); - - - + ); } -// // This is a Class Component -// // - more feature rich -// // - can maintain their own private data - "State" -// // - can contain complex UI logic -// // - provide lifecycle hooks - - -// Class TimelineEventClass extends Component { -// render(){ -// return

Class Component Texts

-// } -// } - export default TimelineEvent; -// export default TimelineEventClass; -// // would also nn to import on APP.js \ No newline at end of file