From a8754892e10e12ff84fb0f320ddd2c17c928c17c Mon Sep 17 00:00:00 2001
From: KOSASIH <kosasihg88@gmail.com>
Date: Sun, 20 Oct 2024 21:09:30 +0700
Subject: [PATCH] Create App.js

---
 frontend/App.js | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 frontend/App.js

diff --git a/frontend/App.js b/frontend/App.js
new file mode 100644
index 000000000..939b4ea3d
--- /dev/null
+++ b/frontend/App.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import Lesson from './Lesson';
+import Badge from './Badge';
+
+const App = () => {
+  const [lessons, setLessons] = useState([]);
+  const [badges, setBadges] = useState([]);
+
+  useEffect(() => {
+    // Get the lessons and badges from the contract
+    blockchainBasicsContract.methods .getLessons().call().then((lessons) => {
+      setLessons(lessons);
+    });
+    blockchainBasicsContract.methods.getBadges().call().then((badges) => {
+      setBadges(badges);
+    });
+  }, []);
+
+  return (
+    <div>
+      <h1>Blockchain Basics</h1>
+      <ul>
+        {lessons.map((lesson) => (
+          <li key={lesson.id}>
+            <Lesson lesson={lesson} />
+          </li>
+        ))}
+      </ul>
+      <h1>Badges</h1>
+      <ul>
+        {badges.map((badge) => (
+          <li key={badge.id}>
+            <Badge badge={badge} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default App;