Merge pull request #7 from maxpetretta/dev

Dev

react/components/AppProvider.jsx → react/components/AppProvider.tsx

@@ -5,11 +5,11 @@ import toast from "react-hot-toast"
 import { useAccount, useContractEvent, useContractRead } from "wagmi"
 import { contractABI, contractAddress } from "../lib/contract.js"
 
-const AppContext = createContext()
+const AppContext = createContext(null)
 
 export const AppProvider = ({ children }) => {
-  const [address, setAddress] = useState()
-  const [tweets, setTweets] = useState(new Map())
+  const [address, setAddress] = useState("")
+  const [tweets, setTweets] = useState(null)
   const [confetti, setConfetti] = useState(false)
   useAccount({
     onSuccess(data) {
@@ -35,6 +35,7 @@ export const AppProvider = ({ children }) => {
             let newState = new Map(prevState)
             data.forEach((tweet, id) => {
               newState.set(id + 1, {
+                id: id + 1,
                 from: tweet[0],
                 timestamp: new Date(tweet[1] * 1000),
                 message: tweet[2],
@@ -71,6 +72,7 @@ export const AppProvider = ({ children }) => {
       setTweets((prevState) => {
         let newState = new Map(prevState)
         newState.set(id.toNumber(), {
+          id: id.toNumber(),
           from: from,
           timestamp: new Date(timestamp * 1000),
           message: message,
@@ -107,6 +109,7 @@ export const AppProvider = ({ children }) => {
       setTweets((prevState) => {
         let newState = new Map(prevState)
         newState.set(id.toNumber(), {
+          id: id.toNumber(),
           from: from,
           timestamp: new Date(timestamp * 1000),
           message: message,

react/components/Avatar.jsx → react/components/Avatar.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react"
 import { useEnsAvatar } from "wagmi"
 
 export default function Avatar(props) {
-  const [avatar, setAvatar] = useState()
+  const [avatar, setAvatar] = useState("")
   const seedrandom = require("seedrandom")
   const colors = [
     "bg-red-400",
@@ -55,6 +55,9 @@ export default function Avatar(props) {
 
   return (
     <>
+      {
+        // eslint-disable-next-line
+      }
       <img
         src={avatar}
         className={

react/components/Controls.jsx → react/components/Controls.tsx

@@ -1,5 +1,5 @@
 import { ethers } from "ethers"
-import { useState } from "react"
+import React, { useState } from "react"
 import toast from "react-hot-toast"
 import {
   useContractRead,
@@ -9,9 +9,9 @@ import {
 import { contractABI, contractAddress } from "../lib/contract"
 
 export default function Controls() {
-  const [price, setPrice] = useState(0)
-  const [odds, setOdds] = useState(0)
-  const [jackpot, setJackpot] = useState(0)
+  const [price, setPrice] = useState("")
+  const [odds, setOdds] = useState("")
+  const [jackpot, setJackpot] = useState("")
 
   /**
    * Contract hooks
@@ -182,15 +182,17 @@ export default function Controls() {
    * Update the setting parameters (price, odds, jackpot), only for the owner
    * @param {Object} event
    */
-  const updateContractSettings = async (event) => {
+  const updateContractSettings = async (
+    e: React.FormEvent<HTMLFormElement>
+  ) => {
     try {
-      event.preventDefault()
+      e.preventDefault()
 
       updateSettings({
         args: [
-          event.target.odds.value,
-          ethers.utils.parseEther(event.target.price.value),
-          ethers.utils.parseEther(event.target.jackpot.value),
+          e.currentTarget.odds.value,
+          ethers.utils.parseEther(e.currentTarget.price.value),
+          ethers.utils.parseEther(e.currentTarget.jackpot.value),
         ],
       })
     } catch (error) {

react/components/EditModal.jsx → react/components/EditModal.tsx

@@ -52,7 +52,7 @@ export default function ReplyTweet(props) {
    * Update the specified tweet from the contract
    * @param {number} id
    */
-  const sendEdit = async (id) => {
+  const sendEdit = async (id: number) => {
     try {
       editTweet({
         args: [id, props.message],
@@ -100,15 +100,15 @@ export default function ReplyTweet(props) {
           <div className="mt-16 mb-4 flex items-center md:mt-4">
             <Avatar address={props.address} />
             <textarea
-              type="text"
-              rows="1"
+              rows={1}
               value={props.message}
-              maxLength="280"
+              maxLength={280}
               placeholder="Edit your tw33t's message"
               onChange={(e) => props.setMessage(e.target.value)}
               onInput={(e) => {
-                e.target.style.height = "auto"
-                e.target.style.height = e.target.scrollHeight + "px"
+                ;(e.target as HTMLInputElement).style.height = "auto"
+                ;(e.target as HTMLInputElement).style.height =
+                  (e.target as HTMLInputElement).scrollHeight + "px"
               }}
               className="mr-4 mb-4 grow resize-none text-xl outline-none"
             />

react/components/Editor.jsx → react/components/Editor.tsx

@@ -10,12 +10,12 @@ import {
   UserRejectedRequestError,
 } from "wagmi"
 import { contractABI, contractAddress } from "../lib/contract.js"
-import Avatar from "./Avatar.jsx"
+import Avatar from "./Avatar"
 
 export default function Editor() {
-  const [address, setAddress] = useState()
+  const [address, setAddress] = useState("")
   const [message, setMessage] = useState("")
-  const [price, setPrice] = useState(0)
+  const [price, setPrice] = useState("")
   useAccount({
     onSuccess(data) {
       if (data && !address) {
@@ -126,15 +126,15 @@ export default function Editor() {
       <div className="mt-2 hidden items-center md:flex">
         <Avatar address={address} />
         <textarea
-          type="text"
-          rows="1"
+          rows={1}
           value={message}
-          maxLength="280"
+          maxLength={280}
           placeholder="What's happening? (in web3)"
           onChange={(e) => setMessage(e.target.value)}
           onInput={(e) => {
-            e.target.style.height = "auto"
-            e.target.style.height = e.target.scrollHeight + "px"
+            ;(e.target as HTMLInputElement).style.height = "auto"
+            ;(e.target as HTMLInputElement).style.height =
+              (e.target as HTMLInputElement).scrollHeight + "px"
           }}
           className="mr-4 grow resize-none text-xl outline-none"
         />

react/components/Layout.jsx → react/components/Layout.tsx

@@ -42,7 +42,7 @@ export default function Layout(props) {
             },
             icon: "⚠️",
           })
-          sessionStorage.setItem("seenNetworkAlert", true)
+          sessionStorage.setItem("seenNetworkAlert", "true")
         }
 
         // Check if this is the owner's wallet

react/components/ReplyModal.jsx → react/components/ReplyModal.tsx

@@ -1,4 +1,3 @@
-import dayjs from "dayjs"
 import { ethers } from "ethers"
 import { useState } from "react"
 import toast from "react-hot-toast"
@@ -11,8 +10,13 @@ import { contractABI, contractAddress } from "../lib/contract.js"
 import Address from "./Address"
 import Avatar from "./Avatar"
 
+// Need type definitions, see: https://github.com/iamkun/dayjs/issues/297
+import dayjs from "dayjs"
+import relativeTime from "dayjs/plugin/relativeTime"
+dayjs.extend(relativeTime)
+
 export default function ReplyTweet(props) {
-  const [price, setPrice] = useState(0)
+  const [price, setPrice] = useState("")
   const [message, setMessage] = useState("")
 
   /**
@@ -72,7 +76,7 @@ export default function ReplyTweet(props) {
    * Reply to the specified tweet
    * @param {number} id
    */
-  const sendReply = async (id) => {
+  const sendReply = async (id: number) => {
     try {
       newTweet({
         args: [message.toString(), id, 0],
@@ -141,15 +145,15 @@ export default function ReplyTweet(props) {
           <div className="mt-8 mb-4 flex flex-1 items-center">
             <Avatar address={props.address} />
             <textarea
-              type="text"
-              rows="1"
+              rows={1}
               value={message}
-              maxLength="280"
+              maxLength={280}
               placeholder="Tw33t your reply"
               onChange={(e) => setMessage(e.target.value)}
               onInput={(e) => {
-                e.target.style.height = "auto"
-                e.target.style.height = e.target.scrollHeight + "px"
+                ;(e.target as HTMLInputElement).style.height = "auto"
+                ;(e.target as HTMLInputElement).style.height =
+                  (e.target as HTMLInputElement).scrollHeight + "px"
               }}
               className="mr-4 mb-4 grow resize-none text-xl outline-none"
             />

react/components/Tweet.jsx → react/components/Tweet.tsx

@@ -1,4 +1,3 @@
-import dayjs from "dayjs"
 import { ethers } from "ethers"
 import { useEffect, useState } from "react"
 import toast from "react-hot-toast"
@@ -9,20 +8,23 @@ import {
   UserRejectedRequestError,
 } from "wagmi"
 import { contractABI, contractAddress } from "../lib/contract.js"
+import { Tweet as TweetType } from "../lib/types"
 import Address from "./Address"
 import { useTweets } from "./AppProvider"
 import Avatar from "./Avatar"
 import EditModal from "./EditModal"
 import ReplyModal from "./ReplyModal"
 
-export default function Tweet(props) {
-  var relativeTime = require("dayjs/plugin/relativeTime")
-  dayjs.extend(relativeTime)
+// Need type definitions, see: https://github.com/iamkun/dayjs/issues/297
+import dayjs from "dayjs"
+import relativeTime from "dayjs/plugin/relativeTime"
+dayjs.extend(relativeTime)
 
-  const [address, setAddress] = useState()
-  const [price, setPrice] = useState(0)
-  const [tweet, setTweet] = useState()
-  const [retweet, setRetweet] = useState()
+export default function Tweet(props) {
+  const [address, setAddress] = useState("")
+  const [price, setPrice] = useState("")
+  const [tweet, setTweet]: [any, any] = useState()
+  const [retweet, setRetweet]: [any, any] = useState()
   const [message, setMessage] = useState("")
   const [replyModal, setReplyModal] = useState(false)
   const [editModal, setEditModal] = useState(false)
@@ -119,7 +121,7 @@ export default function Tweet(props) {
    * Retweet the specified tweet
    * @param {number} id
    */
-  const sendRetweet = async (id) => {
+  const sendRetweet = async (id: number) => {
     try {
       newTweet({
         args: ["", 0, id],
@@ -135,7 +137,7 @@ export default function Tweet(props) {
    * Delete the specified tweet from the contract
    * @param {number} id
    */
-  const removeTweet = async (id) => {
+  const removeTweet = async (id: number) => {
     try {
       deleteTweet({
         args: [id],
@@ -151,7 +153,7 @@ export default function Tweet(props) {
    * @param {number} id
    * @returns {Array}
    */
-  const getReplies = (id) => {
+  const getReplies = (id: number): TweetType[] => {
     let replies = [...tweets.entries()].filter(
       (tweet) => tweet[1].replyID.eq(id) && !tweet[1].deleted
     )
@@ -162,9 +164,9 @@ export default function Tweet(props) {
    * On page load, get the relevant tweet or retweet
    */
   useEffect(() => {
-    if (tweets.get(props.id).retweetID.isZero()) {
+    if (props.id && tweets.get(props.id).retweetID.isZero()) {
       setTweet(tweets.get(props.id))
-    } else {
+    } else if (props.id) {
       const retweetID = tweets.get(props.id).retweetID
       setTweet(tweets.get(retweetID.toNumber()))
       setRetweet(tweets.get(props.id))

react/components/TweetList.tsx

@@ -0,0 +1,49 @@
+import { Tweet as TweetType } from "../lib/types"
+import { useTweets } from "./AppProvider"
+import Tweet from "./Tweet"
+
+export default function TweetList(props) {
+  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)
+    }
+    return filtered
+  }
+
+  /**
+   * 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
+  }
+
+  return (
+    <section>
+      {tweets &&
+        getAuthorTweets()
+          .map((tweet) => {
+            const replies = getReplies(tweet.id)
+            return (
+              <div key={tweet.id} className="border-b">
+                <Tweet id={tweet.id} key={tweet.id} replies={replies} />
+              </div>
+            )
+          })
+          .reverse()}
+    </section>
+  )
+}