sigmasternchen/threadule
1
0
Fork 0
mirror of https://github.com/sigmasternchen/threadule synced 2025-03-15 08:09:01 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: added accounts now works

Browse source
This commit is contained in:
overflowerror 2021-08-21 15:05:47 +02:00
parent c07f3261a8
commit 91f6ab1b7b
4 changed files with 157 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
backend/internal/data/account.go
View file

@ -10,6 +10,7 @@ func (d *Data) GetAccountsByUser(user *models.User) ([]models.Account, error) {
err := d.db.
Preload("Threads").
Where("user_id = ?", user.ID).
Where("access_token IS NOT NULL").
Find(&accounts).
Error
if err != nil {

19
frontend/src/api/endpoints/AccountEndpoint.ts
View file

@ -4,6 +4,15 @@ import Endpoint from "./Endpoint";
const API_PREFIX = "/api/account/"
export type AddAccountResponse = {
id: string
url: string
}
export type AddAccountResolveParam = {
pin: string
}
class AccountEndpoint extends Endpoint {
constructor(client: Client) {
super(client)
@ -13,6 +22,16 @@ class AccountEndpoint extends Endpoint {
public async getAll(): Promise<Account[]> {
return await this.get<Account[]>(API_PREFIX)
}
public async addAccount(): Promise<AddAccountResponse> {
return await this.post<any, AddAccountResponse>(API_PREFIX, null)
}
public async addAccountResolve(accoundId: string, pin: string): Promise<void> {
return await this.post<AddAccountResolveParam, void>(API_PREFIX + "/" + accoundId, {
pin: pin
})
}
}
export default AccountEndpoint

146
frontend/src/components/AccountDialog/index.tsx
View file

@ -1,5 +1,19 @@
import {FunctionComponent} from "react";
import {Button, Dialog, DialogActions, DialogContent, DialogTitle} from "@material-ui/core";
import {FunctionComponent, useState} from "react";
import {
Button,
Dialog,
DialogContent,
DialogTitle,
Step,
StepContent,
StepLabel,
Stepper,
TextField,
Typography
} from "@material-ui/core";
import {useAuth} from "../../auth/AuthProvider";
import AccountEndpoint from "../../api/endpoints/AccountEndpoint";
import {MessageBox} from "../MessageBox";
export type AccountFormDialogProps = {
open: boolean
@ -14,24 +28,126 @@ const AccountDialog: FunctionComponent<AccountFormDialogProps> = (
onCancel
}
) => {
const {client} = useAuth()
const [activeStep, setActiveStep] = useState<number>(0)
const [accountId, setAccountId] = useState<string | null>(null)
const [code, setCode] = useState<string>("")
const [error, setError] = useState<string | null>(null)
return (
<Dialog open={open}>
<DialogTitle title={"New Account"}/>
<DialogContent>
<Stepper activeStep={activeStep} orientation="vertical">
<Step>
<StepLabel>Begin</StepLabel>
<StepContent>
<Typography>
This dialog will guide you through the process of adding a new account.
</Typography>
<Button
onClick={() => {
onCancel()
}}
color="secondary"
>
Cancel
</Button>
<Button
onClick={() => {
setActiveStep(activeStep + 1)
}}
color="primary"
>
Next
</Button>
</StepContent>
</Step>
<Step>
<StepLabel>Authorize The App</StepLabel>
<StepContent>
<Typography>
When you click "Next" you will be sent to Twitter.<br/>
After you authorize our app you will be given a 6-digit authorization code that you'll
need in the next step.
</Typography>
<Button
onClick={() => {
setActiveStep(activeStep - 1)
}}
color="secondary"
>
Back
</Button>
<Button
onClick={() => {
new AccountEndpoint(client).addAccount()
.then((data) => {
setAccountId(data.id)
setActiveStep(activeStep + 1)
window.open(data.url, "_blank")
})
.catch(error => {
console.error(error)
setError("Something went wrong.")
})
}}
color="primary"
>
Next
</Button>
</StepContent>
</Step>
<Step>
<StepLabel>Enter Authorization Code</StepLabel>
<StepContent>
<Typography>
Please enter the authorization code that twitter gave you.
</Typography>
<TextField
fullWidth
label="Authorization Code"
variant="outlined"
value={code}
error={!(code.length == 0 || code.match(/^[0-9]{6,}$/))}
onChange={(event) => {
setCode(event.target.value)
}}
/>
<Button
onClick={() => {
setActiveStep(activeStep - 1)
}}
color="secondary"
>
Back
</Button>
<Button
disabled={!code.match(/^[0-9]{6,}$/)}
onClick={() => {
new AccountEndpoint(client).addAccountResolve(accountId!, code)
.then(() => {
onSuccess()
})
.catch(error => {
console.error(error)
setError("Something went wrong.")
})
}}
color="primary"
>
Done
</Button>
</StepContent>
</Step>
</Stepper>
</DialogContent>
<DialogActions>
<Button onClick={() => {
onCancel()
}} color="secondary">
Cancel
</Button>
<Button onClick={() => {
onSuccess()
}} color="primary">
Submit
</Button>
</DialogActions>
<MessageBox open={Boolean(error)} success={false} message={error || ""} onClose={() => {
setError(null)
}}/>
</Dialog>
)
}

7
frontend/src/pages/Dashboard/index.tsx
View file

@ -12,6 +12,10 @@ import AccountDialog from "../../components/AccountDialog";
type DashboardProps = {}
const Dashboard: FunctionComponent<DashboardProps> = () => {
const [_reload, _setReload] = useState<number>(0)
const reload = () => {
_setReload(_reload + 1)
}
const [loading, setLoading] = useState<boolean>(true)
const [accounts, setAccounts] = useState<Account[]>([])
@ -47,7 +51,7 @@ const Dashboard: FunctionComponent<DashboardProps> = () => {
message: "Couldn't fetch accounts."
})
})
}, [])
}, [_reload])
return (
<>
@ -80,6 +84,7 @@ const Dashboard: FunctionComponent<DashboardProps> = () => {
open={openNewAccountDialog}
onSuccess={() => {
setOpenNewAccountDialog(false)
reload()
}}
onCancel={() => {
setOpenNewAccountDialog(false)