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