3⃣
Modifying the Client
Prerequisite:
As a Scholar or a Tinker, you would want to replace the existing client with your own.
Let’s change the default client into something else. As of now, you should be seeing something like this.
Let’s make a trivial change in it by replacing "Tribes" with "Hello, World!". In order to do that, open
/packages/client/src/tribes/tribes.tsx. Within that file you can replace the text “Tribes” with whatever you like. In this example, we will replace it with “Hello, World!”. So your file would look something like this.
import React, { useState, useEffect } from "react"
import { useNavigate } from "react-router-dom"
//@ts-ignore
import DappLib from "@decentology/dappstarter-dapplib"
import "./styles/Tribes.css"
import Nav from "./components/Nav"
import { ACCOUNT } from "./shared"
const TribesPage = (props: any) => {
const [currentTribe, setCurrentTribe] = useState()
const [showError, setShowError] = useState(false)
const [error, setError] = useState(false)
const navigate = useNavigate()
useEffect(() => {
const getCurrentTribe = async () => {
const data = {
tenantOwner: ACCOUNT.Admin,
account: ACCOUNT.Birbal,
}
try {
const stuff = await DappLib.TribesGetCurrentTribe(data)
setError(false)
setCurrentTribe(stuff.result)
} catch (error) {
// This will only happen if you haven't run "instance"
// for an account under the Tenant module,
// and your `tenantOwner` isn't that same account.
setError(true)
}
}
getCurrentTribe()
}, [])
return (
<main>
<Nav />
<div className="hero">
<div className="header">
<h1>Hello, World!</h1>
{!currentTribe ? (
<button
className="join"
onClick={() => {
error ? setShowError(true) : navigate("/all-tribes")
}}
>
Join A Tribe
</button>
) : (
<button className="join" onClick={() => navigate("/my-tribe")}>
View Your Tribe
</button>
)}
{showError && (
<div className="error">
<p>Two things could be wrong:</p>
<ul>
<li>
1) You have not called `instance` for an account in the Tribes
module.
</li>
<li>
2) The `tenantOwner` field in `getCurrentTribe` function is
not the account you used in the first step.
</li>
</ul>
</div>
)}
</div>
</div>
</main>
)
}
export default TribesPage
Save the file and you will notice that the project is hot loaded and the changes are rendered on the fly.
