Something close to being close to MVP

next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+  images: {
+    domains: ["avatars.githubusercontent.com"],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -23,8 +23,11 @@
     "nostr-tools": "^1.7.4",
     "react": "18.2.0",
     "react-calendar-heatmap": "^1.9.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "18.2.0",
+    "react-qr-code": "^2.0.11",
     "react-redux": "^8.0.5",
+    "recharts": "^2.5.0",
     "redux-thunk": "^2.4.2"
   }
 }

src/components/QR/QR.js

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import QRCode from "react-qr-code";
+import styles from "./qr.module.css";
+
+const QR = ({ value }) => {
+  return (
+    // Can be anything instead of `maxWidth` that limits the width.
+    <div
+      style={{
+        height: "auto",
+        margin: "0 auto",
+        maxWidth: "90%",
+        width: "100%",
+      }}
+    >
+      <QRCode
+        size={256}
+        style={{
+          height: "auto",
+          maxWidth: "100%",
+          width: "100%",
+          border: "1px solid white",
+          borderRadius: "10px",
+        }}
+        value={value}
+        viewBox={`0 0 256 256`}
+      />
+    </div>
+  );
+};
+
+export default QR;

src/components/Recent/Recent.js

@@ -1,30 +1,51 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
+import { useSession } from "next-auth/react";
+import styles from "./recent.module.css";
 
 const Recent = () => {
-  const [data, setData] = useState(null);
-  const username = 'AustinKelsay';
-//   const access_token = 'your_access_token_here';
-  const url = `https://api.github.com/users/${username}/events`;
+  const [events, setEvents] = useState([]);
+  const { data: session, status } = useSession();
 
   useEffect(() => {
-    fetch(url
-    )
-      .then((response) => response.json())
-      .then((data) => setData(data),
-      console.log(setData))
-      .catch((error) => console.error(error));
-  }, [url]);
+    const fetchEvents = async () => {
+      try {
+        const response = await fetch(
+          "https://api.github.com/users/AustinKelsay/events",
+          {
+            headers: {
+              Authorization: `token ${session.token.accessToken}`,
+            },
+          }
+        );
+        const data = await response.json();
+        setEvents(data);
+      } catch (error) {
+        console.error("Failed to fetch events:", error);
+      }
+    };
 
-  if (!data) {
-    return <div>Loading...</div>;
-  }
+    if (status === "authenticated") {
+      fetchEvents();
+    }
+  }, [status]);
 
-  if (data.message) {
-    return <div>Error: {data.message}</div>;
-  }
-
-  // do something with the data
-  return <div>{JSON.stringify(data)}</div>;
+  return (
+    <div className={styles.container}>
+      <h2 className={styles.header}>Recent GitHub Activity</h2>
+      <div className={styles.eventListContainer}>
+        <div className={styles.eventList}>
+          {events.map((event) => (
+            <div className={styles.event} key={event.id}>
+              <div className={styles.eventType}>{event.type}</div>
+              <div className={styles.eventPayload}>
+                {JSON.stringify(event.payload)}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default Recent;

src/components/Recent/recent.module.css

@@ -0,0 +1,44 @@
+.container {
+  max-width: 800px;
+  max-height: 100vh;
+  margin: 0 auto;
+  color: #fff;
+  background-color: #111;
+  padding: 50px;
+  border-radius: 10px;
+}
+
+.header {
+  margin-bottom: 20px;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.eventList {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.eventListContainer {
+  max-height: 100vh;
+}
+
+.event {
+  background-color: #222;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
+}
+
+.eventType {
+  font-weight: bold;
+  margin-bottom: 10px;
+  color: #8affd4;
+}
+
+.eventPayload {
+  font-family: monospace;
+  white-space: pre-wrap;
+  color: #ccc;
+}

src/components/activeRepos/ActiveRepos.js

@@ -0,0 +1,87 @@
+import { useState, useEffect } from "react";
+import { Button } from "@chakra-ui/react";
+import { createRepoEvent } from "@/utils/createRepoEvent";
+import styles from "./repos.module.css";
+
+const ActiveRepos = () => {
+  const [repos, setRepos] = useState([]);
+
+  useEffect(() => {
+    const fetchRepos = async () => {
+      const response = await fetch(
+        "https://api.github.com/users/austinkelsay/repos?sort=pushed&per_page=6"
+      );
+      const data = await response.json();
+      console.log(data);
+      setRepos(data);
+    };
+    fetchRepos();
+  }, []);
+
+  const handleBroadcast = async ({ repository }) => {
+    console.log("repository in handleBroadcast", repository);
+    const owner = repository.owner.login;
+    const repoName = repository.name;
+    const url = repository.html_url;
+
+    const repo = {
+      owner,
+      name: repoName,
+      url,
+    };
+
+    const pubkey = await window.nostr.getPublicKey();
+
+    if (!pubkey) {
+      return;
+    }
+
+    const event = createRepoEvent({ pubkey, repo });
+
+    console.log("event in handleBroadcast", event);
+  };
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.header}>Recent Repositories</h1>
+      <div className={styles.eventListContainer}>
+        <div className={styles.eventList}>
+          {repos.length &&
+            repos.map((repo) => (
+              <a
+                key={repo.id}
+                href={repo.html_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles.event}
+              >
+                <div className={styles.eventType}>{repo.name}</div>
+                <div className={styles.eventPayload}>{repo.description}</div>
+                <div className={styles.details}>
+                  <span className={styles.language}>{repo.language}</span>
+                  <span className={styles.stars}>
+                    {repo.stargazers_count} stars
+                  </span>
+                  <span className={styles.updated}>
+                    Updated on {new Date(repo.pushed_at).toLocaleDateString()}
+                  </span>
+                </div>
+                <div className={styles.buttonContainer}>
+                  <Button
+                    onClick={() => {
+                      if (repo) handleBroadcast({ repository: repo });
+                    }}
+                    bg={"purple.600"}
+                  >
+                    broadcast
+                  </Button>
+                </div>
+              </a>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ActiveRepos;

src/components/activeRepos/repos.module.css

@@ -0,0 +1,83 @@
+.container {
+  max-width: 800px;
+  max-height: 100vh;
+  margin: 0 auto;
+  color: #fff;
+  background-color: #111;
+  padding: 50px;
+  border-radius: 10px;
+}
+
+.header {
+  margin-bottom: 20px;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.eventList {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.eventListContainer {
+  max-height: 100vh;
+}
+
+.event {
+  background-color: #222;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
+  transition: all 0.3s ease-in-out;
+}
+
+.event:hover {
+  transform: translateY(-5px);
+  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.5);
+}
+
+.eventType {
+  font-weight: bold;
+  margin-bottom: 10px;
+  color: #8affd4;
+}
+
+.eventPayload {
+  font-family: monospace;
+  white-space: pre-wrap;
+  color: #ccc;
+  margin-bottom: 10px;
+}
+
+.details {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.8rem;
+  color: #ccc;
+}
+
+.details > * {
+  margin: 0.25rem 0;
+}
+
+.language {
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.stars {
+  cursor: pointer;
+  text-decoration: none;
+  color: #8affd4;
+}
+
+.stars:hover {
+  text-decoration: underline;
+}
+
+.buttonContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}