mirror of
https://github.com/Steffo99/festa.git
synced 2024-12-22 22:54:22 +00:00
Clean up components code
This commit is contained in:
parent
5e1ff05c0a
commit
c708201379
9 changed files with 33 additions and 34 deletions
|
@ -1,4 +1,4 @@
|
|||
import classNames from "classnames";
|
||||
import { default as classNames } from "classnames";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import { HTMLProps } from "react";
|
||||
import { useMyEvents } from "../hooks/useMyEvents";
|
||||
|
@ -8,16 +8,16 @@ import { EventCreate } from "./EventCreate";
|
|||
|
||||
|
||||
export function ActionEventList(props: HTMLProps<HTMLFormElement>) {
|
||||
const {t} = useTranslation()
|
||||
const { t } = useTranslation()
|
||||
const { data, error } = useMyEvents()
|
||||
|
||||
const newClassName = classNames(props.className, {
|
||||
"negative": error,
|
||||
})
|
||||
|
||||
|
||||
let contents: JSX.Element
|
||||
|
||||
if(error) {
|
||||
if (error) {
|
||||
contents = <>
|
||||
<p>
|
||||
{t("eventListError")}
|
||||
|
@ -27,16 +27,16 @@ export function ActionEventList(props: HTMLProps<HTMLFormElement>) {
|
|||
</code>
|
||||
</>
|
||||
}
|
||||
else if(!data) {
|
||||
contents = <Loading text={t("eventListLoading")}/>
|
||||
else if (!data) {
|
||||
contents = <Loading text={t("eventListLoading")} />
|
||||
}
|
||||
else {
|
||||
if(data.length === 0) {
|
||||
if (data.length === 0) {
|
||||
contents = <>
|
||||
<p>
|
||||
{t("eventListCreateFirst")}
|
||||
</p>
|
||||
<EventCreate/>
|
||||
<EventCreate />
|
||||
</>
|
||||
}
|
||||
else {
|
||||
|
@ -44,11 +44,11 @@ export function ActionEventList(props: HTMLProps<HTMLFormElement>) {
|
|||
<p>
|
||||
{t("eventListDescription")}
|
||||
</p>
|
||||
<EventList data={data}/>
|
||||
<EventList data={data} />
|
||||
<p>
|
||||
{t("eventListCreateAnother")}
|
||||
</p>
|
||||
<EventCreate/>
|
||||
<EventCreate />
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import {default as axios, AxiosError } from "axios"
|
||||
import {default as classNames} from "classnames"
|
||||
import { default as axios, AxiosError } from "axios"
|
||||
import { default as classNames } from "classnames"
|
||||
import { useTranslation } from "next-i18next"
|
||||
import { HTMLProps, useCallback, useState } from "react"
|
||||
import { LoginContext } from "../contexts/login"
|
||||
|
@ -9,8 +9,8 @@ import { useDefinedContext } from "../utils/definedContext"
|
|||
import { TelegramLoginButton } from "./TelegramLoginButton"
|
||||
|
||||
|
||||
export function ActionLoginTelegram({className, ...props}: HTMLProps<HTMLFormElement>) {
|
||||
const { t } = useTranslation("common")
|
||||
export function ActionLoginTelegram({ className, ...props }: HTMLProps<HTMLFormElement>) {
|
||||
const { t } = useTranslation("common")
|
||||
const [_, setLogin] = useDefinedContext(LoginContext)
|
||||
const [working, setWorking] = useState<boolean>(false)
|
||||
const [error, setError] = useState<ApiError | null | undefined>(null)
|
||||
|
@ -23,7 +23,7 @@ export function ActionLoginTelegram({className, ...props}: HTMLProps<HTMLFormEle
|
|||
try {
|
||||
var response = await axios.post<ApiResult<FestaLoginData>>("/api/login?provider=telegram", data)
|
||||
}
|
||||
catch(e) {
|
||||
catch (e) {
|
||||
const axe = e as AxiosError
|
||||
setError(axe?.response?.data as ApiError | undefined)
|
||||
return
|
||||
|
@ -41,11 +41,11 @@ export function ActionLoginTelegram({className, ...props}: HTMLProps<HTMLFormEle
|
|||
const newClassName = classNames(className, {
|
||||
"negative": error,
|
||||
})
|
||||
|
||||
|
||||
let message: JSX.Element
|
||||
let contents: JSX.Element
|
||||
|
||||
if(error) {
|
||||
if (error) {
|
||||
message = t("formTelegramLoginError")
|
||||
contents = (
|
||||
<div>
|
||||
|
@ -55,7 +55,7 @@ export function ActionLoginTelegram({className, ...props}: HTMLProps<HTMLFormEle
|
|||
</div>
|
||||
)
|
||||
}
|
||||
else if(working) {
|
||||
else if (working) {
|
||||
message = t("formTelegramLoginWorking")
|
||||
contents = <></>
|
||||
}
|
||||
|
@ -68,7 +68,7 @@ export function ActionLoginTelegram({className, ...props}: HTMLProps<HTMLFormEle
|
|||
/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className={newClassName}>
|
||||
<p>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import Image, { ImageProps } from "next/image";
|
||||
import classNames from "classnames"
|
||||
import { default as Image, ImageProps } from "next/image";
|
||||
import { default as classNames } from "classnames"
|
||||
|
||||
export function Avatar(props: ImageProps) {
|
||||
return (
|
||||
|
|
|
@ -11,7 +11,7 @@ export function ErrorBlock(props: ErrorBlockProps) {
|
|||
return (
|
||||
<div className="error error-block negative">
|
||||
<p>
|
||||
<FestaIcon icon={faCircleExclamation}/>
|
||||
<FestaIcon icon={faCircleExclamation} />
|
||||
|
||||
<span>
|
||||
{props.text}
|
||||
|
|
|
@ -9,7 +9,7 @@ type ErrorInlineProps = {
|
|||
export function ErrorInline(props: ErrorInlineProps) {
|
||||
return (
|
||||
<span className="error error-inline negative">
|
||||
<FestaIcon icon={faCircleExclamation}/>
|
||||
<FestaIcon icon={faCircleExclamation} />
|
||||
|
||||
<span>
|
||||
{props.text}
|
||||
|
|
|
@ -8,29 +8,29 @@ import { useEffect } from "react"
|
|||
import { ErrorBlock } from "./ErrorBlock"
|
||||
|
||||
export function EventCreate() {
|
||||
const {t} = useTranslation()
|
||||
const { t } = useTranslation()
|
||||
const router = useRouter()
|
||||
const [name, setName] = useState<string>("")
|
||||
const createEvent = useAxiosRequest<Event>({
|
||||
method: "POST",
|
||||
url: "/api/events/",
|
||||
data: {name}
|
||||
data: { name }
|
||||
})
|
||||
|
||||
// This is a pretty bad hack... or not?
|
||||
// Idc, as long as it works
|
||||
useEffect(() => {
|
||||
if(createEvent.error) return
|
||||
if(!createEvent.data) return
|
||||
if (createEvent.error) return
|
||||
if (!createEvent.data) return
|
||||
router.push(`/event/${createEvent.data.slug}`)
|
||||
})
|
||||
|
||||
if(createEvent.running) return <Loading text={t("eventListCreateRunning")}/>
|
||||
if (createEvent.running) return <Loading text={t("eventListCreateRunning")} />
|
||||
|
||||
return <>
|
||||
<form
|
||||
<form
|
||||
className="form-monorow"
|
||||
onSubmit={e => {e.preventDefault(); createEvent.run()}}
|
||||
onSubmit={e => { e.preventDefault(); createEvent.run() }}
|
||||
noValidate
|
||||
>
|
||||
<input
|
||||
|
@ -49,6 +49,6 @@ export function EventCreate() {
|
|||
disabled={!name}
|
||||
/>
|
||||
</form>
|
||||
{createEvent.error ? <ErrorBlock error={createEvent.error} text={t("eventListCreateError")}/> : null}
|
||||
{createEvent.error ? <ErrorBlock error={createEvent.error} text={t("eventListCreateError")} /> : null}
|
||||
</>
|
||||
}
|
|
@ -1,5 +1,5 @@
|
|||
import { Event } from "@prisma/client"
|
||||
import Link from "next/link"
|
||||
import { default as Link } from "next/link"
|
||||
|
||||
type EventListProps = {
|
||||
data: Event[]
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
|
||||
import classNames from "classnames";
|
||||
import { default as classNames } from "classnames";
|
||||
|
||||
export function FestaIcon(props: FontAwesomeIconProps) {
|
||||
const newClassName = classNames(props.className, "icon")
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
import * as React from 'react';
|
||||
import { default as OriginalTelegramLoginButton } from 'react-telegram-login'
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue