From 023f31e4e8258cc528ef1953532502a57fa4be66 Mon Sep 17 00:00:00 2001
From: Monireh Rasouli <monireh.rasouli20@gmail.com>
Date: Mon, 7 Jun 2021 14:05:40 +0100
Subject: [PATCH 1/2] Done Birthday Reminder project

---
 01-birthday-reminder/package-lock.json |  3 +++
 01-birthday-reminder/setup/src/App.js  | 18 +++++++++++++++++-
 01-birthday-reminder/setup/src/List.js | 15 +++++++++++++--
 package-lock.json                      |  3 +++
 4 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 01-birthday-reminder/package-lock.json
 create mode 100644 package-lock.json

diff --git a/01-birthday-reminder/package-lock.json b/01-birthday-reminder/package-lock.json
new file mode 100644
index 000000000..48e341a09
--- /dev/null
+++ b/01-birthday-reminder/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}
diff --git a/01-birthday-reminder/setup/src/App.js b/01-birthday-reminder/setup/src/App.js
index 9a34d99ae..b1687a0fd 100644
--- a/01-birthday-reminder/setup/src/App.js
+++ b/01-birthday-reminder/setup/src/App.js
@@ -1,8 +1,24 @@
 import React, { useState } from 'react';
 import data from './data';
 import List from './List';
+
+// {
+//   id: 1,
+//   name: 'Bertie Yates',
+//   age: 29,
+//   image:
+//     'https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-2_ipcjws.jpg',
+// },
 function App() {
-  return <h2>reminder project setup</h2>;
+  const [people, setPeople] = useState(data);
+ 
+  return <main>
+    <section className='container'>
+      <h3> {people.length} birthday today!</h3>
+      <List people={people} />
+      <button onClick={() => setPeople([])}> Clear All</button>
+    </section>
+  </main>;
 }
 
 export default App;
diff --git a/01-birthday-reminder/setup/src/List.js b/01-birthday-reminder/setup/src/List.js
index 53d6134e7..40b5e9e11 100644
--- a/01-birthday-reminder/setup/src/List.js
+++ b/01-birthday-reminder/setup/src/List.js
@@ -1,9 +1,20 @@
 import React from 'react';
 
-const List = () => {
+const List = ({ people }) => {
   return (
     <>
-      <h2>list component</h2>
+      {people.map((person) => {
+        const { id, name, age, image } = person;
+        return (
+          <article key={id} className='person'>
+            <img src={image} alt={name} />
+            <div>
+              <h4>{name}</h4>
+              <p>{age} years old</p>
+            </div>
+          </article>
+        );
+      })}
     </>
   );
 };
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..48e341a09
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}

From 72abe6cd780d5b93623c46b53d36767c389ab527 Mon Sep 17 00:00:00 2001
From: Monireh Rasouli <monireh.rasouli20@gmail.com>
Date: Mon, 7 Jun 2021 14:08:16 +0100
Subject: [PATCH 2/2] Removed unnecessary comments

---
 01-birthday-reminder/setup/src/App.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/01-birthday-reminder/setup/src/App.js b/01-birthday-reminder/setup/src/App.js
index b1687a0fd..8525d3efb 100644
--- a/01-birthday-reminder/setup/src/App.js
+++ b/01-birthday-reminder/setup/src/App.js
@@ -2,13 +2,6 @@ import React, { useState } from 'react';
 import data from './data';
 import List from './List';
 
-// {
-//   id: 1,
-//   name: 'Bertie Yates',
-//   age: 29,
-//   image:
-//     'https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-2_ipcjws.jpg',
-// },
 function App() {
   const [people, setPeople] = useState(data);