diff --git a/README.md b/README.md
index 3806423..94c5f58 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,2 @@
# P2P Poll App
+Remove-Item -Recurse -Force node_modules, .next
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 976eb90..23f55f9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,20 +1,12 @@
import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+
import "./globals.css";
-const geistSans = Geist({
- variable: "--font-geist-sans",
- subsets: ["latin"],
-});
-const geistMono = Geist_Mono({
- variable: "--font-geist-mono",
- subsets: ["latin"],
-});
export const metadata: Metadata = {
- title: "Create Next App",
- description: "Generated by create next app",
+ title: "p2p polling",
+ description: "creating a p2p-polling app",
};
export default function RootLayout({
@@ -25,7 +17,7 @@ export default function RootLayout({
return (
{children}
diff --git a/app/page.tsx b/app/page.tsx
index 3f36f7c..2b22945 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,65 +1,47 @@
-import Image from "next/image";
+"use client";
+
+import { useState } from "react";
+import usePeerManager from "../hooks/usePeerManager";
+import usePollManager from "../hooks/usePollManager";
+import PollCreation from "../components/PollCreation";
+import PollActive from "../components/PollActive";
+import PeersList from "../components/PeersList";
+
+export default function Page() {
+ const peerManager = usePeerManager();
+ const pollManager = usePollManager(peerManager);
+
+ const [connectId, setConnectId] = useState("");
-export default function Home() {
return (
-
-
-
+ P2P Poll App
+
+ {/* Connect */}
+
+
setConnectId(e.target.value)}
/>
-
-
- To get started, edit the page.tsx file.
-
-
- Looking for a starting point or more instructions? Head over to{" "}
-
- Templates
- {" "}
- or the{" "}
-
- Learning
- {" "}
- center.
-
-
-
-
+
+
+
+ Your ID: {peerManager.peerId}
+
+ {pollManager.poll ? (
+
+ ) : (
+
+ )}
+
+
);
-}
+}
\ No newline at end of file
diff --git a/components/Modal.tsx b/components/Modal.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/Notification.tsx b/components/Notification.tsx
new file mode 100644
index 0000000..53cfbbd
--- /dev/null
+++ b/components/Notification.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+type NotificationType = "info" | "success" | "error";
+
+interface NotificationProps {
+ message: string;
+ type?: NotificationType;
+}
+
+export default function Notification({ message, type = "info" }: NotificationProps) {
+ const colors: Record = {
+ info: "bg-blue-100 text-blue-700",
+ success: "bg-green-100 text-green-700",
+ error: "bg-red-100 text-red-700",
+ };
+
+ return (
+
+ {message}
+
+ );
+}
\ No newline at end of file
diff --git a/components/PeersList.tsx b/components/PeersList.tsx
new file mode 100644
index 0000000..37e6d1e
--- /dev/null
+++ b/components/PeersList.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+export default function PeersList({ peers }: { peers: string[] }) {
+ return (
+
+
Peers
+ {peers.length === 0 ? (
+
No peers
+ ) : (
+ peers.map((p) =>
{p}
)
+ )}
+
+ );
+}
\ No newline at end of file
diff --git a/components/PollActive.tsx b/components/PollActive.tsx
new file mode 100644
index 0000000..e3d0607
--- /dev/null
+++ b/components/PollActive.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import PollOption from "./PollOption";
+
+export default function PollActive({ pollManager, peerId }: any) {
+ const poll = pollManager.poll;
+
+ return (
+
+
{poll.question}
+
+ {poll.options.map((opt: any) => (
+
+ ))}
+
+ );
+}
\ No newline at end of file
diff --git a/components/PollCreation.tsx b/components/PollCreation.tsx
new file mode 100644
index 0000000..9ee8c01
--- /dev/null
+++ b/components/PollCreation.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { useState } from "react";
+
+export default function PollCreation({ pollManager }: any) {
+ const [question, setQuestion] = useState("");
+ const [options, setOptions] = useState(["", ""]);
+
+ return (
+
+ setQuestion(e.target.value)}
+ />
+
+ {options.map((opt, i) => (
+ {
+ const newOpts = [...options];
+ newOpts[i] = e.target.value;
+ setOptions(newOpts);
+ }}
+ />
+ ))}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/components/PollOption.tsx b/components/PollOption.tsx
new file mode 100644
index 0000000..659a76c
--- /dev/null
+++ b/components/PollOption.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+export default function PollOption({ option, pollManager, peerId }: any) {
+ return (
+ pollManager.vote(option.id, peerId)}
+ >
+ {option.text} - {option.votes} votes
+
+ );
+}
\ No newline at end of file
diff --git a/hooks/usePeerManager.ts b/hooks/usePeerManager.ts
new file mode 100644
index 0000000..f3b0a42
--- /dev/null
+++ b/hooks/usePeerManager.ts
@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import Peer from "peerjs";
+
+export default function usePeerManager() {
+ const [peerId, setPeerId] = useState(null);
+ const [peers, setPeers] = useState([]);
+ const peerRef = useRef(null);
+ const connectionsRef = useRef