mirror of
https://github.com/sigmasternchen/threadule
synced 2025-03-15 08:09:01 +00:00
feat: added accounts now works
This commit is contained in:
parent
c07f3261a8
commit
91f6ab1b7b
4 changed files with 157 additions and 16 deletions
|
@ -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 {
|
||||
|
|
|
@ -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
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in a new issue