Merge pull request #8 from maxpetretta/dev

Dev
maxpetretta · Sep 20, 2022 · b64b789 · b64b789 · vercel · Sep 20, 2022
2 parents b093102 + ba40b7b
commit b64b789
Show file tree

Hide file tree

Showing 19 changed files with 163 additions and 69 deletions.
diff --git a/react/components/Address.tsx b/react/components/Address.tsx
@@ -1,10 +1,11 @@
 import Link from "next/link"
 import { useEffect, useState } from "react"
 import { useEnsName } from "wagmi"
+import { AddressProps } from "../lib/types"
 
-export default function Address(props) {
+export default function Address(props: AddressProps) {
   const match = props.address.match(/^(0x.{4}).+(.{4})$/)
-  const truncated = match[1] + "..." + match[2]
+  const truncated = match![1] + "..." + match![2]
 
   const [ens, setEns] = useState(truncated)
 

diff --git a/react/components/AppProvider.tsx b/react/components/AppProvider.tsx
@@ -1,19 +1,25 @@
 import { ethers } from "ethers"
-import { createContext, useContext, useState } from "react"
+import React, { createContext, useContext, useState } from "react"
 import Confetti from "react-confetti"
 import toast from "react-hot-toast"
 import { useAccount, useContractEvent, useContractRead } from "wagmi"
-import { contractABI, contractAddress } from "../lib/contract.js"
+import { contractABI, contractAddress } from "../lib/contract"
+import { Tweet as TweetType } from "../lib/types"
 
-const AppContext = createContext(null)
+const AppContext = createContext<{
+  tweets: Map<number, TweetType> | undefined
+  setTweets: React.Dispatch<
+    React.SetStateAction<Map<number, TweetType> | undefined>
+  >
+}>(undefined!)
 
-export const AppProvider = ({ children }) => {
+export const AppProvider = ({ children }: { children: React.ReactNode }) => {
   const [address, setAddress] = useState("")
-  const [tweets, setTweets] = useState(null)
+  const [tweets, setTweets] = useState<Map<number, TweetType> | undefined>()
   const [confetti, setConfetti] = useState(false)
   useAccount({
     onSuccess(data) {
-      if (data && !address) {
+      if (data.address && !address) {
         setAddress(data.address)
       }
     },
@@ -31,7 +37,7 @@ export const AppProvider = ({ children }) => {
     {
       onSuccess(data) {
         if (data) {
-          setTweets((prevState) => {
+          setTweets((prevState: Map<number, TweetType> | undefined) => {
             let newState = new Map(prevState)
             data.forEach((tweet, id) => {
               newState.set(id + 1, {

diff --git a/react/components/Avatar.tsx b/react/components/Avatar.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react"
 import { useEnsAvatar } from "wagmi"
+import { AvatarProps } from "../lib/types"
 
-export default function Avatar(props) {
+export default function Avatar(props: AvatarProps) {
   const [avatar, setAvatar] = useState("")
   const seedrandom = require("seedrandom")
   const colors = [
@@ -73,9 +74,9 @@ export default function Avatar(props) {
           avatar
             ? "hidden"
             : props.styles
-            ? `${props.styles} ${getColorFromAddress(props.address)}`
+            ? `${props.styles} ${getColorFromAddress(Number(props.address))}`
             : `mx-3 inline h-12 w-12 self-start rounded-full ${getColorFromAddress(
-                props.address
+                Number(props.address)
               )}`
         }
       >

diff --git a/react/components/Controls.tsx b/react/components/Controls.tsx
@@ -108,7 +108,10 @@ export default function Controls() {
         toast.success("Cleared tweets")
         console.debug("Cleared --", data.hash)
         totalTweetsRefetch().then((value) => {
-          console.debug("Retrieved total tweet count --", value.data.toNumber())
+          console.debug(
+            "Retrieved total tweet count --",
+            value.data!.toNumber()
+          )
         })
       },
       onError(error) {

diff --git a/react/components/EditModal.tsx b/react/components/EditModal.tsx
@@ -4,10 +4,11 @@ import {
   useContractWrite,
   UserRejectedRequestError,
 } from "wagmi"
-import { contractABI, contractAddress } from "../lib/contract.js"
+import { contractABI, contractAddress } from "../lib/contract"
+import { EditProps } from "../lib/types.js"
 import Avatar from "./Avatar"
 
-export default function ReplyTweet(props) {
+export default function EditTweet(props: EditProps) {
   /**
    * Contract hooks
    */
@@ -30,7 +31,10 @@ export default function ReplyTweet(props) {
         totalTweetsRefetch().then((value) => {
           toast.success("Edited tweet!")
           console.debug("Edited --", data.hash)
-          console.debug("Retrieved total tweet count --", value.data.toNumber())
+          console.debug(
+            "Retrieved total tweet count --",
+            value.data!.toNumber()
+          )
         })
       },
       onError(error) {

diff --git a/react/components/Editor.tsx b/react/components/Editor.tsx
@@ -9,7 +9,7 @@ import {
   useContractWrite,
   UserRejectedRequestError,
 } from "wagmi"
-import { contractABI, contractAddress } from "../lib/contract.js"
+import { contractABI, contractAddress } from "../lib/contract"
 import Avatar from "./Avatar"
 
 export default function Editor() {
@@ -18,7 +18,7 @@ export default function Editor() {
   const [price, setPrice] = useState("")
   useAccount({
     onSuccess(data) {
-      if (data && !address) {
+      if (data.address && !address) {
         setAddress(data.address)
       }
     },
@@ -59,7 +59,10 @@ export default function Editor() {
         totalTweetsRefetch().then((value) => {
           toast.success("Sent tweet!")
           console.debug("Tweeted --", data.hash)
-          console.debug("Retrieved total tweet count --", value.data.toNumber())
+          console.debug(
+            "Retrieved total tweet count --",
+            value.data!.toNumber()
+          )
         })
       },
       onError(error) {

diff --git a/react/components/Layout.tsx b/react/components/Layout.tsx
@@ -3,12 +3,13 @@ import { useRouter } from "next/router"
 import { useState } from "react"
 import { toast, Toaster } from "react-hot-toast"
 import { useAccount, useContractRead } from "wagmi"
-import { contractABI, contractAddress } from "../lib/contract.js"
+import { contractABI, contractAddress } from "../lib/contract"
+import { LayoutProps } from "../lib/types.js"
 import Nav from "./Nav"
 import Sidebar from "./Sidebar"
 import TweetModal from "./TweetModal"
 
-export default function Layout(props) {
+export default function Layout(props: LayoutProps) {
   const { children, ...pageMeta } = props
   const router = useRouter()
   const meta = {
@@ -25,7 +26,7 @@ export default function Layout(props) {
   const [isOwner, setIsOwner] = useState(false)
   useAccount({
     onSuccess(data) {
-      if (data && !address) {
+      if (data.address && !address) {
         setAddress(data.address)
         console.debug("Found authorized account: ", data.address)
 
@@ -48,7 +49,7 @@ export default function Layout(props) {
         // Check if this is the owner's wallet
         if (
           ownerData &&
-          ownerData.toUpperCase() === data.address.toUpperCase()
+          ownerData.toUpperCase() === data.address!.toUpperCase()
         ) {
           setIsOwner(true)
         } else {

diff --git a/react/components/Nav.tsx b/react/components/Nav.tsx
@@ -8,7 +8,7 @@ export default function Nav() {
   const [address, setAddress] = useState("")
   useAccount({
     onSuccess(data) {
-      if (data && !address) {
+      if (data.address && !address) {
         setAddress(data.address)
       }
     },

diff --git a/react/components/ReplyModal.tsx b/react/components/ReplyModal.tsx
@@ -6,7 +6,8 @@ import {
   useContractWrite,
   UserRejectedRequestError,
 } from "wagmi"
-import { contractABI, contractAddress } from "../lib/contract.js"
+import { contractABI, contractAddress } from "../lib/contract"
+import { ReplyProps } from "../lib/types.js"
 import Address from "./Address"
 import Avatar from "./Avatar"
 
@@ -15,7 +16,7 @@ import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 dayjs.extend(relativeTime)
 
-export default function ReplyTweet(props) {
+export default function ReplyTweet(props: ReplyProps) {
   const [price, setPrice] = useState("")
   const [message, setMessage] = useState("")
 
@@ -54,7 +55,10 @@ export default function ReplyTweet(props) {
         totalTweetsRefetch().then((value) => {
           toast.success("Sent tweet!")
           console.debug("Tweeted --", data.hash)
-          console.debug("Retrieved total tweet count --", value.data.toNumber())
+          console.debug(
+            "Retrieved total tweet count --",
+            value.data!.toNumber()
+          )
         })
       },
       onError(error) {

diff --git a/react/components/Sidebar.tsx b/react/components/Sidebar.tsx
@@ -1,7 +1,7 @@
 import { ConnectButton } from "@rainbow-me/rainbowkit"
 import Controls from "./Controls"
 
-export default function Sidebar(props) {
+export default function Sidebar(props: { isOwner: boolean }) {
   return (
     <aside className="hidden min-h-screen w-1/4 flex-col lg:flex">
       <div className="mt-3 self-center">

diff --git a/react/components/Tweet.tsx b/react/components/Tweet.tsx
@@ -7,8 +7,8 @@ import {
   useContractWrite,
   UserRejectedRequestError,
 } from "wagmi"
-import { contractABI, contractAddress } from "../lib/contract.js"
-import { Tweet as TweetType } from "../lib/types"
+import { contractABI, contractAddress } from "../lib/contract"
+import { Tweet as TweetType, TweetProps } from "../lib/types"
 import Address from "./Address"
 import { useTweets } from "./AppProvider"
 import Avatar from "./Avatar"
@@ -20,7 +20,7 @@ import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 dayjs.extend(relativeTime)
 
-export default function Tweet(props) {
+export default function Tweet(props: TweetProps) {
   const [address, setAddress] = useState("")
   const [price, setPrice] = useState("")
   const [tweet, setTweet]: [any, any] = useState()
@@ -32,7 +32,7 @@ export default function Tweet(props) {
   const { tweets } = useTweets()
   useAccount({
     onSuccess(data) {
-      if (data && !address) {
+      if (data.address && !address) {
         setAddress(data.address)
       }
     },
@@ -73,7 +73,10 @@ export default function Tweet(props) {
         totalTweetsRefetch().then((value) => {
           toast.success("Sent tweet!")
           console.debug("Tweeted --", data.hash)
-          console.debug("Retrieved total tweet count --", value.data.toNumber())
+          console.debug(
+            "Retrieved total tweet count --",
+            value.data!.toNumber()
+          )
         })
       },
       onError(error) {
@@ -99,7 +102,10 @@ export default function Tweet(props) {
         totalTweetsRefetch().then((value) => {
           toast.success("Deleted tweet!")
           console.debug("Deleted --", data.hash)
-          console.debug("Retrieved total tweet count --", value.data.toNumber())
+          console.debug(
+            "Retrieved total tweet count --",
+            value.data!.toNumber()
+          )
         })
       },
       onError(error) {
@@ -153,21 +159,24 @@ export default function Tweet(props) {
    * @param {number} id
    * @returns {Array}
    */
-  const getReplies = (id: number): TweetType[] => {
-    let replies = [...tweets.entries()].filter(
-      (tweet) => tweet[1].replyID.eq(id) && !tweet[1].deleted
-    )
-    return replies
+  const getReplies = (id: number): [number, TweetType][] => {
+    if (tweets) {
+      let replies = [...tweets.entries()].filter(
+        (tweet) => tweet[1].replyID.eq(id) && !tweet[1].deleted
+      )
+      return replies
+    }
+    return []
   }
 
   /*
    * On page load, get the relevant tweet or retweet
    */
   useEffect(() => {
-    if (props.id && tweets.get(props.id).retweetID.isZero()) {
+    if (tweets && props.id && tweets.get(props.id)!.retweetID.isZero()) {
       setTweet(tweets.get(props.id))
-    } else if (props.id) {
-      const retweetID = tweets.get(props.id).retweetID
+    } else if (tweets && props.id) {
+      const retweetID = tweets.get(props.id)!.retweetID
       setTweet(tweets.get(retweetID.toNumber()))
       setRetweet(tweets.get(props.id))
     }

diff --git a/react/components/TweetList.tsx b/react/components/TweetList.tsx
@@ -2,33 +2,39 @@ import { Tweet as TweetType } from "../lib/types"
 import { useTweets } from "./AppProvider"
 import Tweet from "./Tweet"
 
-export default function TweetList(props) {
+export default function TweetList(props: { author?: string }) {
   const { tweets } = useTweets()
 
   /**
    * Filter for all tweets from the specified address
    * @returns {Array}
    */
   const getAuthorTweets = (): TweetType[] => {
-    let filtered = [...tweets.values()].filter(
-      (tweet) => tweet.replyID.eq(0) && !tweet.deleted
-    )
-    if (props.author) {
-      filtered = filtered.filter((tweet) => tweet.from == props.author)
+    if (tweets) {
+      let filtered = [...tweets.values()].filter(
+        (tweet) => tweet.replyID.eq(0) && !tweet.deleted
+      )
+      if (props.author) {
+        filtered = filtered.filter((tweet) => tweet.from == props.author)
+      }
+      return filtered
     }
-    return filtered
+    return []
   }
 
   /**
    * Filter for all replies to a tweet
    * @param {number} id
    * @returns {Array}
    */
-  const getReplies = (id: number): TweetType[] => {
-    let replies = [...tweets.entries()].filter(
-      (tweet) => tweet[1].replyID.eq(id) && !tweet[1].deleted
-    )
-    return replies
+  const getReplies = (id: number): [number, TweetType][] => {
+    if (tweets) {
+      let replies = [...tweets.entries()].filter(
+        (tweet) => tweet[1].replyID.eq(id) && !tweet[1].deleted
+      )
+      return replies
+    }
+    return []
   }
 
   return (

diff --git a/react/components/TweetModal.tsx b/react/components/TweetModal.tsx
@@ -6,10 +6,11 @@ import {
   useContractWrite,
   UserRejectedRequestError,
 } from "wagmi"
-import { contractABI, contractAddress } from "../lib/contract.js"
+import { contractABI, contractAddress } from "../lib/contract"
+import { ModalProps } from "../lib/types.js"
 import Avatar from "./Avatar"
 
-export default function TweetModal(props) {
+export default function TweetModal(props: ModalProps) {
   const [price, setPrice] = useState("")
   const [message, setMessage] = useState("")
 
@@ -48,7 +49,10 @@ export default function TweetModal(props) {
         totalTweetsRefetch().then((value) => {
           toast.success("Sent tweet!")
           console.debug("Tweeted --", data.hash)
-          console.debug("Retrieved total tweet count --", value.data.toNumber())
+          console.debug(
+            "Retrieved total tweet count --",
+            value.data!.toNumber()
+          )
         })
       },
       onError(error) {

diff --git a/react/lib/contract.js → react/lib/contract.ts b/react/lib/contract.js → react/lib/contract.ts