Skip to content

Commit 580ccfb

Browse files
committed
Clean up code
1 parent 77eb050 commit 580ccfb

File tree

7 files changed

+47
-47
lines changed

7 files changed

+47
-47
lines changed

app/components/BeeperLogin.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -71,22 +71,22 @@ export default function BeeperLogin({ setBeeperToken }: any) {
7171
}
7272

7373
return (
74-
<div className={"m-20"}>
75-
<p className={"text-center text-4xl font-bold"}>Sign in to Beeper</p>
76-
<p className={"text-center mt-5"}>This will be used to connect your self-hosted bridge to your Beeper account. Your credentials will be passed directly to Fly.</p>
74+
<div className="m-20">
75+
<p className="text-center text-4xl font-bold">Sign in to Beeper</p>
76+
<p className="text-center mt-5">This will be used to connect your self-hosted bridge to your Beeper account. Your credentials will be passed directly to Fly.</p>
7777
{ sentCode ? (
78-
<div className={"mx-auto w-72 mt-16"}>
78+
<div className="mx-auto w-72 mt-16">
7979
<p>{"We've emailed you a login code."}</p>
80-
<form className={"mt-2"} onSubmit={getToken}>
80+
<form className="mt-2" onSubmit={getToken}>
8181
<p>Enter it here:</p>
82-
<input className={"p-2 border-2 rounded-md w-full"} name="code" type="number" />
82+
<input className="p-2 border-2 rounded-md w-full" name="code" type="number" />
8383
</form>
8484
</div>
8585
) : (
86-
<div className={"mx-auto w-72 mt-16"}>
86+
<div className="mx-auto w-72 mt-16">
8787
<form onSubmit={sendLoginEmail}>
8888
<p>Email:</p>
89-
<input className={"p-2 border-2 rounded-md w-full"} name="email" type="email" />
89+
<input className="p-2 border-2 rounded-md w-full" name="email" type="email" />
9090
</form>
9191
</div>
9292
)}

app/components/BridgeDeploy.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,8 @@ export default function BridgeDeploy({beeperToken, flyToken, onCreate}: any) {
9292
))}
9393
</select>
9494
{!deployInProgress ? <button
95-
className={"p-2 rounded-md m-4 bg-purple-600 border-0 text-white hover:bg-purple-500"}>Deploy</button> :
96-
<button className={"p-2 rounded-md m-4 bg-purple-300 border-0 text-white"}
95+
className="p-2 rounded-md m-4 bg-purple-600 border-0 text-white hover:bg-purple-500">Deploy</button> :
96+
<button className="p-2 rounded-md m-4 bg-purple-300 border-0 text-white"
9797
disabled={true}>Deploying...</button>}
9898
{errorMessage}
9999
</form>

app/components/Bridge.tsx renamed to app/components/BridgeInstance.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {useState} from "react";
22

3-
export default function Bridge({name, onFly, beeperToken, flyToken, onDelete}: any) {
3+
export default function BridgeInstance({name, onFly, beeperToken, flyToken, onDelete}: any) {
44

55
const [deleteInProgress, setDeleteInProgress] = useState(false)
66
const [errorMessage, setErrorMessage] = useState("")
@@ -25,21 +25,21 @@ export default function Bridge({name, onFly, beeperToken, flyToken, onDelete}: a
2525

2626
return (
2727
<tr>
28-
<td className={"border p-2"}>
29-
<p className={"p-2"}>{name}</p>
28+
<td className="border p-2">
29+
<p className="p-2">{name}</p>
3030
</td>
3131

32-
<td className={"border p-2 text-center"}>
33-
{ onFly && <button className={"p-2 rounded-md m-4 bg-gray-600 border-0 text-white hover:bg-gray-500"} onClick={() => { navigator.clipboard.writeText(`@${name}bot:beeper.local`)}}>Copy</button>}
32+
<td className="border p-2 text-center">
33+
{ onFly && <button className="p-2 rounded-md m-4 bg-gray-600 border-0 text-white hover:bg-gray-500" onClick={() => { navigator.clipboard.writeText(`@${name}bot:beeper.local`)}}>Copy</button>}
3434
</td>
3535

36-
<td className={"border p-2 text-center"}>
36+
<td className="border p-2 text-center">
3737
{ onFly && <a target="_blank" href={`https://fly.io/apps/${name}/monitoring`} rel="noopener noreferrer">View on Fly</a> }
3838
</td>
3939

40-
<td className={"border p-2 text-center"}>
41-
{!deleteInProgress ? <button className={"p-2 rounded-md m-4 bg-red-600 border-0 text-white hover:bg-red-500"} onClick={deleteBridge}>Delete</button> :
42-
<button className={"p-2 rounded-md m-4 bg-red-300 border-0 text-white"} disabled={true}>Deleting...</button>}
40+
<td className="border p-2 text-center">
41+
{!deleteInProgress ? <button className="p-2 rounded-md m-4 bg-red-600 border-0 text-white hover:bg-red-500" onClick={deleteBridge}>Delete</button> :
42+
<button className="p-2 rounded-md m-4 bg-red-300 border-0 text-white" disabled={true}>Deleting...</button>}
4343
{ errorMessage }
4444
</td>
4545
</tr>

app/components/Console.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Bridge from "./Bridge";
1+
import BridgeInstance from "./BridgeInstance";
22
import BridgeDeploy from "./BridgeDeploy";
33
import {useEffect, useState} from "react";
44

@@ -49,28 +49,28 @@ export default function Console({ beeperToken, flyToken }: any) {
4949
}, [bridgeDeleted, bridgeCreated]);
5050

5151
return (
52-
<div className={"m-20"}>
53-
<p className={"max-w-3xl mx-auto"}>Press {"\"Deploy\""} to deploy a bridge. Then, in Beeper Desktop, send a message to the bridge bot. You may need to wait a minute for the bridge to initialize before being able to message the bot.</p>
54-
<p className={"max-w-3xl mx-auto mt-4"}>To experiment with bridges, check out <a target="_blank" href={"https://github.com/beeper/bridge-manager"} rel="noopener noreferrer">https://github.com/beeper/bridge-manager</a>. {"You'll"} also need it to remove bridges from your Beeper account, in addition to deleting the app on Fly.</p>
52+
<div className="m-20">
53+
<p className="max-w-3xl mx-auto">Press {"\"Deploy\""} to deploy a bridge. Then, in Beeper Desktop, send a message to the bridge bot. You may need to wait a minute for the bridge to initialize before being able to message the bot.</p>
54+
<p className="max-w-3xl mx-auto mt-4">To experiment with bridges, check out <a target="_blank" href={"https://github.com/beeper/bridge-manager"} rel="noopener noreferrer">https://github.com/beeper/bridge-manager</a>. {"You'll"} also need it to remove bridges from your Beeper account, in addition to deleting the app on Fly.</p>
5555
<BridgeDeploy beeperToken={beeperToken} flyToken={flyToken} onCreate={handleBridgeCreate} />
5656
<p className="text-center m-10">{ error }</p>
5757
{ loading
5858
? <p className="text-center">Loading...</p>
5959
: (
6060
bridges?.length ? (
6161
<>
62-
<table className={"table-auto mx-auto mt-10"}>
62+
<table className="table-auto mx-auto mt-10">
6363
<thead>
6464
<tr>
65-
<th className={"border py-2 px-8"}>Name</th>
66-
<th className={"border py-2 px-8"}>Bridge Bot ID</th>
67-
<th className={"border py-2 px-8"}>Console</th>
68-
<th className={"border py-2 px-8"}>Delete</th>
65+
<th className="border py-2 px-8">Name</th>
66+
<th className="border py-2 px-8">Bridge Bot ID</th>
67+
<th className="border py-2 px-8">Console</th>
68+
<th className="border py-2 px-8">Delete</th>
6969
</tr>
7070
</thead>
7171
<tbody>
7272
{ bridges.map((bridge: {id: string, onFly: string}) => (
73-
<Bridge key={bridge.id} name={bridge.id} onFly={bridge.onFly} beeperToken={beeperToken} flyToken={flyToken} onDelete={handleBridgeDelete} />
73+
<BridgeInstance key={bridge.id} name={bridge.id} onFly={bridge.onFly} beeperToken={beeperToken} flyToken={flyToken} onDelete={handleBridgeDelete} />
7474
)) }
7575
</tbody>
7676
</table>
@@ -79,8 +79,8 @@ export default function Console({ beeperToken, flyToken }: any) {
7979
)}
8080

8181

82-
<div className={"text-center"}>
83-
<button className={"p-2 rounded-md mt-20 border-2 hover:bg-gray-50"} onClick={signOut}>Sign Out</button>
82+
<div className="text-center">
83+
<button className="p-2 rounded-md mt-20 border-2 hover:bg-gray-50" onClick={signOut}>Sign Out</button>
8484
</div>
8585
</div>
8686
)

app/components/FlyLogin.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@ export default function FlyLogin({setFlyToken}: any) {
77
window.localStorage.setItem("flyToken", event.target[0].value)
88
}
99
return (
10-
<div className={"m-20"}>
11-
<div className={"px-20"}>
12-
<p className={"text-center text-4xl font-bold"}>Sign in to Fly</p>
13-
<p className={"mt-4"}>{"We'll"} use Fly, a cloud hosting provider, to deploy your bridges. You can run up to 3 bridges for free, then {"they'll"} charge you $2/month for each additional bridge.</p>
14-
<p className={"mt-4"}>Create a Fly account at <a target="_blank" href={"https://fly.io/app/sign-up"} rel="noopener noreferrer">https://fly.io/app/sign-up</a>.</p>
15-
<p className={"mt-4"}>Next, generate an access token: <a target="_blank" href={"https://fly.io/user/personal_access_tokens"} rel="noopener noreferrer">https://fly.io/user/personal_access_tokens</a>. This allows the self-host utility to deploy bridges on your Fly account. Your token is passed directly from this web app to Fly, and all of the code involving your Fly token is open-source on GitHub.</p>
10+
<div className="m-20">
11+
<div className="px-20">
12+
<p className="text-center text-4xl font-bold">Sign in to Fly</p>
13+
<p className="mt-4">{"We'll"} use Fly, a cloud hosting provider, to deploy your bridges. You can run up to 3 bridges for free, then {"they'll"} charge you $2/month for each additional bridge.</p>
14+
<p className="mt-4">Create a Fly account at <a target="_blank" href={"https://fly.io/app/sign-up"} rel="noopener noreferrer">https://fly.io/app/sign-up</a>.</p>
15+
<p className="mt-4">Next, generate an access token: <a target="_blank" href={"https://fly.io/user/personal_access_tokens"} rel="noopener noreferrer">https://fly.io/user/personal_access_tokens</a>. This allows the self-host utility to deploy bridges on your Fly account. Your token is passed directly from this web app to Fly, and all of the code involving your Fly token is open-source on GitHub.</p>
1616
</div>
1717

18-
<div className={"mx-auto w-72 mt-16"}>
18+
<div className="mx-auto w-72 mt-16">
1919
<p>Your fly.io token:</p>
2020
<form onSubmit={handleSubmit}>
21-
<input className={"p-2 border-2 rounded-md w-full"} type={"password"} />
21+
<input className="p-2 border-2 rounded-md w-full" type={"password"} />
2222
</form>
2323
</div>
2424
</div>

app/components/Welcome.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,23 @@ export default function Welcome({ setSeenWelcome }: any) {
77
}
88

99
return (
10-
<div className={"m-20"}>
10+
<div className="m-20">
1111
<Image
1212
src={"/beeper_icon.svg"}
1313
alt={"Beeper Logo"}
1414
width={100}
1515
height={100}
16-
className={"mx-auto"}
16+
className="mx-auto"
1717
/>
18-
<p className={"text-center text-4xl font-bold mt-5"}>Easily self-host bridges.</p>
18+
<p className="text-center text-4xl font-bold mt-5">Easily self-host bridges.</p>
1919

20-
<div className={"px-20"}>
21-
<p className={"mt-10"}>Use this web app to self-host bridges on your <a target="_blank" href={"https://fly.io/"} rel="noopener noreferrer">fly.io</a> account. Simply sign into Beeper and Fly, and this web app will run the bridge on your Fly account and install it in Beeper.</p>
22-
<p className={"mt-5"}>This site is open-source at <a target="_blank" href={"https://github.com/beeper/bridge-deployer"} rel="noopener noreferrer">https://github.com/beeper/bridge-deployer</a>. This webpage is being auto-deployed, however, you can run it from the GitHub if you prefer. Just follow the instructions in the README.</p>
20+
<div className="px-20">
21+
<p className="mt-10">Use this web app to self-host bridges on your <a target="_blank" href={"https://fly.io/"} rel="noopener noreferrer">fly.io</a> account. Simply sign into Beeper and Fly, and this web app will run the bridge on your Fly account and install it in Beeper.</p>
22+
<p className="mt-5">This site is open-source at <a target="_blank" href={"https://github.com/beeper/bridge-deployer"} rel="noopener noreferrer">https://github.com/beeper/bridge-deployer</a>. This webpage is being auto-deployed, however, you can run it from the GitHub if you prefer. Just follow the instructions in the README.</p>
2323
</div>
2424

25-
<div className={"text-center mt-10"}>
26-
<button onClick={acceptWelcome} className={"border-0 bg-purple-600 text-white p-4 rounded-md hover:bg-purple-500"}>Continue</button>
25+
<div className="text-center mt-10">
26+
<button onClick={acceptWelcome} className="border-0 bg-purple-600 text-white p-4 rounded-md hover:bg-purple-500">Continue</button>
2727
</div>
2828
</div>
2929
)

app/favicon.ico

-25.3 KB
Binary file not shown.

0 commit comments

Comments
 (0)