commit old, unstaged changes

src/components/followed.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react"
+import { Modal, Form, Button, Media, Content, Loader } from "react-bulma-components"
+import { ChainTree } from "tupelo-wasm-sdk"
+import { follow } from "../tweet"
+
+export function Followed({ show, onClose, userTree }: { userTree: ChainTree, show: boolean, onClose: (() => void) }) {
+  const [state, setState] = useState({
+    loading: false,
+    followed: ""
+  })
+
+  const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, [evt.target.name]: evt.target.value })
+  }
+
+  const handleSubmit = () => {
+    setState({ ...state, loading: true })
+    const doAsync = async () => {
+      await follow(userTree, state.followed)
+      setState({ ...state, loading: false, followed: "" })
+      onClose()
+    }
+
+    doAsync()
+  }
+
+  return (
+    <Modal show={show} onClose={onClose}>
+      <Modal.Card style={{ backgroundColor: "white" }}>
+        <Modal.Card.Head>
+          <Modal.Card.Title>
+            Follow Tweeter
+          </Modal.Card.Title>
+        </Modal.Card.Head>
+        <Modal.Card.Body>
+          <Media>
+            {state.loading ?
+              <Loader />
+              :
+              <Media.Item>
+                <Content>
+                  <Form.Field>
+                    <Form.Label>User Name</Form.Label>
+                    <Form.Control>
+                      <Form.Input value={state.followed} onChange={handleChange} name="followed" placeholder="Joe Influencer" />
+                    </Form.Control>
+                  </Form.Field>
+                  <Form.Field kind="group">
+                    <Button color="primary" onClick={handleSubmit}>Follow</Button>
+                    <Button text onClick={() => { onClose() }}>Cancel</Button>
+                  </Form.Field>
+                </Content>
+              </Media.Item>
+            }
+          </Media>
+        </Modal.Card.Body>
+      </Modal.Card>
+    </Modal>
+  )
+}

src/identity.ts

@@ -80,9 +80,9 @@ export const verifyAccount = async (username: string, password: string, userTree
     if (auths.includes(secureAddr)) {
         userTree.key = secureKey
 
-        return true
+        return [true, userTree]
     } else {
-        return false
+        return [false, null]
     }
 }
 
@@ -117,3 +117,16 @@ export const register = async (username: string, password: string) => {
 
     return userTree
 }
+
+/**
+ * Find the username from the given user account ChainTree
+ */
+export const resolveUsername = async (tree: ChainTree) => {
+    log("fetching username")
+    const usernameResp = await tree.resolveData(usernamePath)
+    if (usernameResp.remainderPath.length && usernameResp.remainderPath.length > 0) {
+        return ""
+    } else {
+        return usernameResp.value
+    }
+}

src/pages/login.tsx

@@ -155,8 +155,9 @@ function LoginBottom({ state, dispatch, onLogin }: { state: ILoginState, dispatc
     const tree = state.userTree
     const username = state.username
 
-    if (verifyAccount(username, password, tree)) {
-      onLogin(state.userTree)
+    const [verified, verTree] = await verifyAccount(username, password, tree)
+    if (verified) {
+      onLogin(verTree)
     } else {
       setError("invalid password")
     }

src/pages/tweets.tsx

@@ -3,11 +3,13 @@ import { Container, Button, Level } from 'react-bulma-components'
 import { Redirect, RouteProps } from 'react-router';
 import { StoreContext } from '../state/store';
 import { TweetComposer } from "../components/composer"
+import { Followed } from "../components/followed"
 
 export function Tweets(props: RouteProps) {
   const [state, setState] = useState({
     loading: true,
-    showComposeModal: false
+    showComposeModal: false,
+    showFollowModal: false
   })
   const [globalState] = useContext(StoreContext)
 
@@ -20,14 +22,19 @@ export function Tweets(props: RouteProps) {
     )
   }
 
+
   return (
     <Container>
       <TweetComposer show={state.showComposeModal} onClose={() => { setState({ ...state, showComposeModal: false }) }} userTree={globalState.userTree} />
+      <Followed show={state.showFollowModal} onClose={() => { setState({ ...state, showFollowModal: false }) }} userTree={globalState.userTree} />
       <Level>
         <Level.Side align="left">
           <Level.Item>
             <Button onClick={() => { setState({ ...state, showComposeModal: true }) }}>New Tweet</Button>
           </Level.Item>
+          <Level.Item>
+            <Button onClick={() => { setState({ ...state, showFollowModal: true }) }}>Follow</Button>
+          </Level.Item>
         </Level.Side>
       </Level>
     </Container>

src/tweet.ts

@@ -1,6 +1,7 @@
 import { debug } from "debug";
 import { appDataPrefix } from "./data"
 import { ChainTree, setDataTransaction } from "tupelo-wasm-sdk";
+import { resolveUsername } from "./identity"
 import { txsWithCommunityWait } from "./appcommunity";
 
 const log = debug("tweet")
@@ -11,6 +12,11 @@ const log = debug("tweet")
  */
 const tweetPrefix = appDataPrefix + "/tweets"
 
+/**
+ * The path of the array of followed user array
+ */
+const followedPath = appDataPrefix + "/followed"
+
 /**
  * The path within the user's ChainTree that stores the number of tweets they've
  * written
@@ -71,3 +77,65 @@ export const saveTweet = async (userTree: ChainTree, msg: string) => {
     log("playing tweet transaction onto user tree")
     await txsWithCommunityWait(userTree, tweetBlock)
 }
+
+const resolveTweet = async (num: number, tree: ChainTree) => {
+    const path = tweetPath(num)
+    const tweetResp = await tree.resolveData(path)
+    if (tweetResp.remainderPath.length && tweetResp.remainderPath.length > 0) {
+        return null
+    } else {
+        return tweetResp.value
+    }
+}
+
+/**
+ * Fetch all the tweets in a user chaintree, returning an array of tweet objects
+ * (including the username)
+ */
+export const readTweets = async (tree: ChainTree) => {
+    const username = await resolveUsername(tree)
+    if (username === "") {
+        return []
+    }
+
+    const count = await tweetCount(tree)
+    if (count === 0) {
+        return []
+    }
+
+    let tweets = []
+    for (let i = 0; i < count; i++) {
+        const tweet = await resolveTweet(i, tree)
+        if (tweet !== null) {
+            tweets.push({
+                username: username,
+                message: tweet.message,
+                time: tweet.time
+            })
+        }
+    }
+
+    return tweets
+}
+
+export const followed = async (userTree: ChainTree) => {
+    log("fetching the current followed list")
+    const followedResp = await userTree.resolveData(followedPath)
+    if (followedResp.remainderPath.length && followedResp.remainderPath.length > 0) {
+        return []
+    } else {
+        return followedResp.value
+    }
+}
+
+/**
+ * Follow another user's tweets
+ */
+export const follow = async (userTree: ChainTree, followedUser: string) => {
+    const currentFollowed = await followed(userTree)
+
+    currentFollowed.push(followedUser)
+    const newFollowedTx = setDataTransaction(followedPath, currentFollowed)
+
+    await txsWithCommunityWait(userTree, [newFollowedTx])
+}