-
Notifications
You must be signed in to change notification settings - Fork 16
/
index.js
95 lines (92 loc) · 3.82 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import React, { useEffect, useState } from "react"
import Layout from "./components/Layout"
import { useGrowthBook } from "@growthbook/growthbook-react"
import { generateListOfProfiles } from "./support/data-provider"
export default function Home() {
// States
const [buttonSchemeValue, setButtonSchemeValue] = useState("btn-danger")
const [showProfiles, setShowProfiles] = useState(false)
const [allowProfileManagement, setAllowProfileManagement] = useState(false)
const [textPresentation, setTextPresentation] = useState({
title: "Hello there 😄!",
subTitle: "Change how this app behave by changing the feature toggle tool ⚒",
profileTitle: "Registered profiles",
})
const [profiles, setProfiles] = useState(generateListOfProfiles())
// Events
const deleteProfile = e => {
e.preventDefault()
const form = e.target
const profileId = form.querySelector(`input[name=profileId]`).value
const updatedProfiles = profiles.filter(profile => profile.id !== profileId)
setProfiles(updatedProfiles)
}
// Feature toggle
const growthbook = useGrowthBook()
useEffect(() => {
if (!growthbook) return
let showProfiles = growthbook.isOn("SHOW_PROFILES".toLowerCase())
console.log(`Should show profiles? ${showProfiles}`)
setShowProfiles(showProfiles)
setAllowProfileManagement(growthbook.isOn("ALLOW_PROFILE_MANAGEMENT".toLowerCase()))
const textPresentationToggle = growthbook.getFeatureValue("TEXT_PRESENTATION".toLowerCase(), {
title: "Hello there 😄!",
subTitle: "Change how this app behave by changing the feature toggle tool ⚒",
profileTitle: "Registered profiles",
})
setTextPresentation(textPresentationToggle)
const buttonSchemeToggle = growthbook.getFeatureValue("PROFILE_MANAGEMENT_BUTTON_SCHEME".toLowerCase(), "btn-danger")
setButtonSchemeValue(buttonSchemeToggle)
}, [growthbook])
return (
<Layout>
<div className="pricing-header p-3 pb-md-4 mx-auto text-center">
<h1 className="display-4 fw-normal">{textPresentation.title}</h1>
<p className="fs-5 text-muted">{textPresentation.subTitle}</p>
</div>
<div className="card">
<h5 className="card-header">{textPresentation.profileTitle}</h5>
<div className="card-body">
{showProfiles && (
<table className="table">
<thead>
<tr>
<th scope="col">username</th>
<th scope="col">name</th>
<th scope="col">sex</th>
<th scope="col">address</th>
<th scope="col">mail</th>
<th scope="col">birthdate</th>
{allowProfileManagement && <th scope="col">actions</th>}
</tr>
</thead>
<tbody>
{profiles.map(profile => (
<tr key={profile.username}>
<td>{profile.username}</td>
<td>{profile.name}</td>
<td>{profile.sex}</td>
<td>{profile.address}</td>
<td>{profile.mail}</td>
<td>{profile.birthdate}</td>
{allowProfileManagement && (
<td>
<form onSubmit={deleteProfile}>
<button type="submit" className={`btn ${buttonSchemeValue} mb-3 `}>
Delete row
</button>
<input type="hidden" name="profileId" value={profile.id} />
</form>
</td>
)}
</tr>
))}
</tbody>
</table>
)}
{!showProfiles && <p className="card-text">This is not available. Try again later.</p>}
</div>
</div>
</Layout>
)
}