7. FeedPage

Search…
7. FeedPage
FeedPage
FeedPage is consisted of 3 main components that interact with Klaystagram contract.
​7-2. UploadPhoto component
7-3. Feed component
7-4. TransferOwnership component​
1
// src/pages/FeedPage.js
2
​
3
const FeedPage = () => (
4
  <main className="FeedPage">
5
    <UploadButton />               // 7-2. UploadPhoto
6
    <Feed />                       // 7-3. Feed
7
  </main>
8
)
Copied!
1
// src/components/Feed.js
2
​
3
<div className="Feed">
4
  {feed.length !== 0
5
    ? feed.map((photo) => {
6
      // ...
7
      return (
8
        <div className="FeedPhoto" key={id}>
9
​
10
            // ...
11
            {
12
              userAddress === currentOwner && (
13
                <TransferOwnershipButton   // 7-4. TransferOwnership
14
                  className="FeedPhoto__transferOwnership"
15
                  id={id}
16
                  issueDate={issueDate}
17
                  currentOwner={currentOwner}
18
                />
19
              )
20
            }
21
            // ...
22
        </div>
23
      )
24
    })
25
    : <span className="Feed__empty">No Photo :D</span>
26
  }
27
</div>
28
)
Copied!
To make component interact with contract, there are 3 steps.
First, create KlaystagramContract instance to connect contract with front-end. Second, using KlaystagramContract instance, make API functions that interact with contract in redux/actions
Third, call functions in each component
Let's build it!
6. Frontend Code Overview
7-1. Connect Contract to Frontend
Last modified 3mo ago
Copy link
Edit on GitHub