Clean up components code

components/ActionEventList.tsx

@@ -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,7 +8,7 @@ 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, {
@@ -17,7 +17,7 @@ export function ActionEventList(props: HTMLProps<HTMLFormElement>) {
 
     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 />
             </>
         }
     }

components/ActionLoginTelegram.tsx

@@ -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,7 +9,7 @@ import { useDefinedContext } from "../utils/definedContext"
 import { TelegramLoginButton } from "./TelegramLoginButton"
 
 
-export function ActionLoginTelegram({className, ...props}: HTMLProps<HTMLFormElement>) {
+export function ActionLoginTelegram({ className, ...props }: HTMLProps<HTMLFormElement>) {
     const { t } = useTranslation("common")
     const [_, setLogin] = useDefinedContext(LoginContext)
     const [working, setWorking] = useState<boolean>(false)
@@ -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
@@ -45,7 +45,7 @@ export function ActionLoginTelegram({className, ...props}: HTMLProps<HTMLFormEle
     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 = <></>
     }

components/Avatar.tsx

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

components/ErrorBlock.tsx

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

components/ErrorInline.tsx

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

components/EventCreate.tsx

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

components/EventList.tsx

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

components/FestaIcon.tsx

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

components/TelegramLoginButton.tsx

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