1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-12-22 14:44:21 +00:00

Clean up components code

This commit is contained in:
Steffo 2022-06-03 03:56:43 +02:00
parent 5e1ff05c0a
commit c708201379
Signed by: steffo
GPG key ID: 6965406171929D01
9 changed files with 33 additions and 34 deletions

View file

@ -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 />
</>
}
}

View file

@ -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>

View file

@ -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 (

View file

@ -11,7 +11,7 @@ export function ErrorBlock(props: ErrorBlockProps) {
return (
<div className="error error-block negative">
<p>
<FestaIcon icon={faCircleExclamation}/>
<FestaIcon icon={faCircleExclamation} />
&nbsp;
<span>
{props.text}

View file

@ -9,7 +9,7 @@ type ErrorInlineProps = {
export function ErrorInline(props: ErrorInlineProps) {
return (
<span className="error error-inline negative">
<FestaIcon icon={faCircleExclamation}/>
<FestaIcon icon={faCircleExclamation} />
&nbsp;
<span>
{props.text}

View file

@ -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}
</>
}

View file

@ -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[]

View file

@ -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")

View file

@ -1,4 +1,3 @@
import * as React from 'react';
import { default as OriginalTelegramLoginButton } from 'react-telegram-login'