feat: 🚧community and event registration connection

packages/hardhat/contracts/YourContract.sol

@@ -417,4 +417,80 @@ function formatDate(uint256 timestamp) internal pure returns (string memory) {
         return string(buffer);
     }
 
+    function getAllCommunities() public view returns (
+        uint256[] memory,
+        string[] memory,
+        string[] memory,
+        string[] memory,
+        string[] memory,
+        string[] memory,
+        address[] memory,
+        uint256[] memory
+    ) {
+        uint256[] memory ids = new uint256[](communityCounter);
+        string[] memory names = new string[](communityCounter);
+        string[] memory descriptions = new string[](communityCounter);
+        string[] memory instagramHandles = new string[](communityCounter);
+        string[] memory linkedinHandles = new string[](communityCounter);
+        string[] memory twitterHandles = new string[](communityCounter);
+        address[] memory creatorAddresses = new address[](communityCounter);
+        uint256[] memory followerCounts = new uint256[](communityCounter);
+
+        for (uint256 i = 1; i <= communityCounter; i++) {
+            Community storage community = communities[i];
+            ids[i-1] = community.id;
+            names[i-1] = community.name;
+            descriptions[i-1] = community.description;
+            instagramHandles[i-1] = community.instagramHandle;
+            linkedinHandles[i-1] = community.linkedinHandle;
+            twitterHandles[i-1] = community.twitterHandle;
+            creatorAddresses[i-1] = community.creatorAddress;
+            followerCounts[i-1] = community.followerCount;
+        }
+
+        return (ids, names, descriptions, instagramHandles, linkedinHandles, twitterHandles, creatorAddresses, followerCounts);
+    }
+
+    function getAllEvents() public view returns (
+        uint256[] memory,
+        string[] memory,
+        string[] memory,
+        uint256[] memory,
+        uint256[] memory,
+        string[] memory,
+        uint256[] memory,
+        uint256[] memory,
+        uint256[] memory,
+        address[] memory,
+        uint256[] memory
+    ) {
+        uint256[] memory ids = new uint256[](eventCounter);
+        string[] memory names = new string[](eventCounter);
+        string[] memory descriptions = new string[](eventCounter);
+        uint256[] memory startTimes = new uint256[](eventCounter);
+        uint256[] memory endTimes = new uint256[](eventCounter);
+        string[] memory locations = new string[](eventCounter);
+        uint256[] memory capacities = new uint256[](eventCounter);
+        uint256[] memory availableSeats = new uint256[](eventCounter);
+        uint256[] memory ticketPrices = new uint256[](eventCounter);
+        address[] memory creatorAddresses = new address[](eventCounter);
+        uint256[] memory creatorCommunityIds = new uint256[](eventCounter);
+
+        for (uint256 i = 1; i <= eventCounter; i++) {
+            Event storage evt = events[i];
+            ids[i-1] = evt.id;
+            names[i-1] = evt.name;
+            descriptions[i-1] = evt.description;
+            startTimes[i-1] = evt.startTime;
+            endTimes[i-1] = evt.endTime;
+            locations[i-1] = evt.location;
+            capacities[i-1] = evt.capacity;
+            availableSeats[i-1] = evt.availableSeats;
+            ticketPrices[i-1] = evt.ticketPrice;
+            creatorAddresses[i-1] = evt.creatorAddress;
+            creatorCommunityIds[i-1] = evt.creatorCommunityId;
+        }
+
+        return (ids, names, descriptions, startTimes, endTimes, locations, capacities, availableSeats, ticketPrices, creatorAddresses, creatorCommunityIds);
+    }
 }

packages/nextjs/app/communityReg/page.tsx

@@ -1,16 +1,46 @@
 "use client"
 
+import { useState } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card"
 import { Button } from "../../components/ui/button"
 import { Input } from "../../components/ui/input"
 import { Textarea } from "../../components/ui/textarea"
 import { Label } from "../../components/ui/label"
+import { useScaffoldWriteContract } from "~~/hooks/scaffold-eth"
 
 export default function CreateCommunityForm() {
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    instaHandle: "",
+    linkedinHandle: "",
+    twitterHandle: ""
+  })
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  const { writeContractAsync: writeYourContractAsync } = useScaffoldWriteContract("YourContract")
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { id, value } = event.target
+    setFormData(prevData => ({ ...prevData, [id]: value }))
+  }
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
-    // Handle form submission logic here
+    try {
+      await writeYourContractAsync({
+        functionName: "registerCommunity",
+        args: [
+          formData.name,
+          formData.description,
+          formData.instaHandle,
+          formData.linkedinHandle,
+          formData.twitterHandle
+        ],
+      })
+      console.log("Community registered successfully!")
+    } catch (e) {
+      console.error("Error registering community:", e)
+    }
   }
 
   return (
@@ -22,27 +52,27 @@ export default function CreateCommunityForm() {
         <form onSubmit={handleSubmit} className="space-y-6">
           <div className="space-y-2">
             <Label htmlFor="name">Community Name</Label>
-            <Input id="name" placeholder="Enter community name" required />
+            <Input id="name" placeholder="Enter community name" required value={formData.name} onChange={handleInputChange} />
           </div>
 
           <div className="space-y-2">
             <Label htmlFor="description">Description</Label>
-            <Textarea id="description" placeholder="Enter community description" required />
+            <Textarea id="description" placeholder="Enter community description" required value={formData.description} onChange={handleInputChange} />
           </div>
 
           <div className="space-y-2">
             <Label htmlFor="instaHandle">Instagram Handle</Label>
-            <Input id="instaHandle" placeholder="Enter Instagram handle" required />
+            <Input id="instaHandle" placeholder="Enter Instagram handle" required value={formData.instaHandle} onChange={handleInputChange} />
           </div>
 
           <div className="space-y-2">
             <Label htmlFor="linkedinHandle">LinkedIn Handle</Label>
-            <Input id="linkedinHandle" placeholder="Enter LinkedIn handle" required />
+            <Input id="linkedinHandle" placeholder="Enter LinkedIn handle" required value={formData.linkedinHandle} onChange={handleInputChange} />
           </div>
 
           <div className="space-y-2">
             <Label htmlFor="twitterHandle">Twitter Handle</Label>
-            <Input id="twitterHandle" placeholder="Enter Twitter handle" required />
+            <Input id="twitterHandle" placeholder="Enter Twitter handle" required value={formData.twitterHandle} onChange={handleInputChange} />
           </div>
 
           <Button type="submit" className="w-full">Create Community</Button>
@@ -51,4 +81,3 @@ export default function CreateCommunityForm() {
     </Card>
   )
 }
-

packages/nextjs/app/eventReg/page.tsx

@@ -1,18 +1,88 @@
 "use client"
 
+import { useState, useEffect } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card"
 import { Button } from "../../components/ui/button"
 import { Input } from "../../components/ui/input"
 import { Textarea } from "../../components/ui/textarea"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select"
-import { DateTimePickerComponent } from "../../components/ui/date-time-picker"
 import { Label } from "../../components/ui/label"
+import { useScaffoldWriteContract, useScaffoldReadContract } from "~~/hooks/scaffold-eth"
+import { format } from "date-fns"
+import { CalendarIcon } from "@radix-ui/react-icons"
+import { Calendar } from "../../components/ui/calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover"
+import { cn } from "../../lib/utils"
 
 export default function CreateEventForm() {
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    startDate: undefined as Date | undefined,
+    endDate: undefined as Date | undefined,
+    location: "",
+    capacity: "",
+    ticketPrice: "",
+    creatorCommunityName: ""
+  })
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  const { writeContractAsync: writeYourContractAsync } = useScaffoldWriteContract("YourContract")
+
+  const { data: communitiesData } = useScaffoldReadContract({
+    contractName: "YourContract",
+    functionName: "getAllCommunities",
+  })
+
+  const [communities, setCommunities] = useState<{ id: string; name: string }[]>([])
+
+  useEffect(() => {
+    if (communitiesData) {
+      const [ids, names] = communitiesData
+      const formattedCommunities = ids.map((id, index) => ({
+        id: id.toString(),
+        name: names[index]
+      }))
+      setCommunities(formattedCommunities)
+    }
+  }, [communitiesData])
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { id, value } = event.target
+    setFormData(prevData => ({ ...prevData, [id]: value }))
+  }
+
+  const handleSelectChange = (value: string) => {
+    setFormData(prevData => ({ ...prevData, creatorCommunityName: value }))
+  }
+
+  const handleDateChange = (id: "startDate" | "endDate") => (date: Date | undefined) => {
+    setFormData(prevData => ({ ...prevData, [id]: date }))
+  }
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
-    // Handle form submission logic here
+    if (!formData.startDate || !formData.endDate) {
+      console.error("Start date or end date is not set")
+      return
+    }
+    try {
+      await writeYourContractAsync({
+        functionName: "registerEvent",
+        args: [
+          formData.name,
+          formData.description,
+          format(formData.startDate, 'dd-MM-yyyy'),
+          format(formData.endDate, 'dd-MM-yyyy'),
+          formData.location,
+          BigInt(formData.capacity),
+          BigInt(formData.ticketPrice),
+          formData.creatorCommunityName
+        ],
+      })
+      console.log("Event registered successfully!")
+    } catch (e) {
+      console.error("Error registering event:", e)
+    }
   }
 
   return (
@@ -24,52 +94,96 @@ export default function CreateEventForm() {
         <form onSubmit={handleSubmit} className="space-y-6">
           <div className="space-y-2">
             <Label htmlFor="name">Event Name</Label>
-            <Input id="name" placeholder="Enter event name" required />
+            <Input id="name" placeholder="Enter event name" required value={formData.name} onChange={handleInputChange} />
           </div>
 
           <div className="space-y-2">
             <Label htmlFor="description">Description</Label>
-            <Textarea id="description" placeholder="Enter event description" required />
+            <Textarea id="description" placeholder="Enter event description" required value={formData.description} onChange={handleInputChange} />
           </div>
 
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
-              <Label>Start Date & Time</Label>
-              <DateTimePickerComponent />
+              <Label>Start Date</Label>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant={"outline"}
+                    className={cn(
+                      "w-full justify-start text-left font-normal",
+                      !formData.startDate && "text-muted-foreground"
+                    )}
+                  >
+                    <CalendarIcon className="mr-2 h-4 w-4" />
+                    {formData.startDate ? format(formData.startDate, "PPP") : <span>Pick a date</span>}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={formData.startDate}
+                    onSelect={handleDateChange("startDate")}
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
             </div>
             <div className="space-y-2">
-              <Label>End Date & Time</Label>
-              <DateTimePickerComponent />
+              <Label>End Date</Label>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant={"outline"}
+                    className={cn(
+                      "w-full justify-start text-left font-normal",
+                      !formData.endDate && "text-muted-foreground"
+                    )}
+                  >
+                    <CalendarIcon className="mr-2 h-4 w-4" />
+                    {formData.endDate ? format(formData.endDate, "PPP") : <span>Pick a date</span>}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={formData.endDate}
+                    onSelect={handleDateChange("endDate")}
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
             </div>
           </div>
 
           <div className="space-y-2">
             <Label htmlFor="location">Location</Label>
-            <Input id="location" placeholder="Enter event location" required />
+            <Input id="location" placeholder="Enter event location" required value={formData.location} onChange={handleInputChange} />
           </div>
 
           <div className="space-y-2">
             <Label htmlFor="community">Community</Label>
-            <Select>
+            <Select onValueChange={handleSelectChange}>
               <SelectTrigger>
                 <SelectValue placeholder="Select a community" />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="community1">Community 1</SelectItem>
-                <SelectItem value="community2">Community 2</SelectItem>
-                <SelectItem value="community3">Community 3</SelectItem>
+                {communities.map((community) => (
+                  <SelectItem key={community.id} value={community.name}>
+                    {community.name}
+                  </SelectItem>
+                ))}
               </SelectContent>
             </Select>
           </div>
 
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
               <Label htmlFor="ticketPrice">Ticket Price</Label>
-              <Input id="ticketPrice" type="number" placeholder="Enter ticket price" required />
+              <Input id="ticketPrice" type="number" placeholder="Enter ticket price" required value={formData.ticketPrice} onChange={handleInputChange} />
             </div>
             <div className="space-y-2">
               <Label htmlFor="capacity">Accommodation Capacity</Label>
-              <Input id="capacity" type="number" placeholder="Enter capacity" required />
+              <Input id="capacity" type="number" placeholder="Enter capacity" required value={formData.capacity} onChange={handleInputChange} />
             </div>
           </div>