first commt

resources/js/hooks/AuthUser.tsx

@@ -0,0 +1,73 @@
+import React, {
+    createContext,
+    Dispatch,
+    PropsWithChildren,
+    SetStateAction,
+    useContext,
+    useEffect,
+    useState
+} from "react";
+import axios from "axios";
+
+const AuthUserContext = createContext<AuthUserProps|undefined>(undefined)
+
+interface AuthUserProps {
+    authUser?: User|null,
+    setAuthUser: Dispatch<SetStateAction<User | null>>,
+    loadingAuthUser: boolean,
+    logout: () => void,
+}
+
+export const AuthUserProvider = ({children}: PropsWithChildren) => {
+    const [authUser, setAuthUser] = useState<User|null>(null)
+    const [loadingAuthUser, setLoadingAuthUser] = useState(true)
+
+    useEffect(() => {
+        (async () => {
+            try {
+                const res = await axios.get('/api/user')
+                setAuthUser(res.data)
+            } catch (e) {
+                // @ts-ignore
+                if (e.response.status === 401) {
+                    console.info('no user login')
+                }
+            } finally {
+                setLoadingAuthUser(false)
+            }
+        })()
+    }, [])
+
+    const logout = async () => {
+        try {
+            setLoadingAuthUser(false)
+            const res = await axios.delete('/api/logout')
+            setAuthUser(null)
+            window.location.replace('/')
+        } catch (e) {
+            console.error(e)
+        } finally {
+            setLoadingAuthUser(false)
+        }
+    }
+
+    return <AuthUserContext.Provider value={{authUser, setAuthUser, loadingAuthUser, logout}}>
+        {children}
+    </AuthUserContext.Provider>
+}
+
+const useAuthUser = () => {
+    const context = useContext(AuthUserContext)
+    if (context === undefined) {
+        throw new Error('Add AuthUserProvider to use AuthUserContext')
+    }
+    return context
+}
+
+export default useAuthUser
+
+interface User {
+    id: number,
+    name: string,
+    email: string,
+}

resources/js/hooks/AxiosTools.tsx

@@ -0,0 +1,15 @@
+import {useState} from "react";
+import axios from "axios";
+
+const useAxiosTools = () => {
+
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState<string|null>(null)
+
+    const axiosGet = axios.get
+    const axiosPost = axios.post
+
+    return {loading, setLoading, error, setError, axiosGet, axiosPost}
+}
+
+export default useAxiosTools

resources/js/hooks/DimensionHook.tsx

@@ -0,0 +1,36 @@
+import {useEffect, useLayoutEffect, useRef, useState} from "react"
+
+const useDimension = () => {
+
+    const RESET_TIMEOUT = 300
+    let movement_timer: number|undefined = undefined
+    const targetRef = useRef<any>()
+    const [dimensions, setDimensions] = useState({ width:0, height: 0 })
+
+    useEffect(() => {
+        window.addEventListener('resize', ()=>{
+            clearInterval(movement_timer)
+            movement_timer = setTimeout(testDimensions, RESET_TIMEOUT)
+        })
+    })
+
+    useLayoutEffect(() => {
+        testDimensions()
+    }, [])
+
+    const testDimensions = () => {
+        if (targetRef.current) {
+            setDimensions({
+                width: targetRef.current.offsetWidth,
+                height: targetRef.current.offsetHeight
+            })
+        }
+    }
+
+    return {
+        targetRef,
+        dimensions,
+    }
+}
+
+export default useDimension