first commit

resources/js/components/Card.tsx

@@ -0,0 +1,15 @@
+import React, {FC} from "react";
+import {PropsWithChildren} from "react";
+
+const Card: FC<PropsWithChildren<CardProps>> = ({children, className = ''}) => {
+
+    return <div className={`${className} border m-1 rounded py-1 px-2`}>
+        {children}
+    </div>
+}
+
+export default Card
+
+interface CardProps {
+    className?: string
+}

resources/js/components/Field.tsx

@@ -0,0 +1,34 @@
+import React, {
+    FC, HTMLInputTypeAttribute,
+    ReactElement
+} from "react"
+
+const Field: FC<FieldProps> = ({children, type = 'text', className = '', classNameForm = '', ...props}) => {
+
+    return <div className={`form-control ${classNameForm}`}>
+        {children && <label className="block text-gray-900 dark:text-gray-200"
+               htmlFor={props.id ?? undefined}>
+            {children}
+        </label>}
+        <input className={`${className} w-full mt-2 rounded dark:bg-gray-700`}
+               type={type}
+               {...props}/>
+        <div className={`error-message`} />
+    </div>
+}
+
+export default Field
+
+interface FieldProps {
+    children?: ReactElement|string,
+    type?: HTMLInputTypeAttribute,
+    name: string,
+    id?: string,
+    value: any,
+    placeholder?: string,
+    autoFocus?: boolean,
+    className?: string,
+    classNameForm?: string,
+    step?: string,
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void,
+}

resources/js/components/Header.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import {Link, useLocation} from "react-router-dom"
+import useAuthUser from "../hooks/AuthUser";
+import Tracker from "./Tracker";
+
+const Header = () => {
+
+    const {authUser} = useAuthUser()
+    const location = useLocation()
+
+    console.log(authUser)
+
+    return <header className="flex justify-between py-3 px-5 bg-blue-700 text-white text-xl">
+        <div>
+            <Link to="/">Ticcat</Link>
+        </div>
+
+        {authUser && <Tracker />}
+        {authUser
+            ? <span className="flex gap-2">
+                <Link to="/profile" className={location.pathname === '/profile' ? 'font-bold' : ''}>{authUser.name}</Link>
+            </span>
+            : <span className="flex gap-2">
+                <Link to="/connexion">Connexion</Link>
+                {/*<Link to="/sinscrire">S'inscrire</Link>*/}
+            </span>}
+    </header>
+}
+
+export default Header

resources/js/components/PageLayout.tsx

@@ -0,0 +1,10 @@
+import React, {PropsWithChildren} from "react"
+
+const PageLayout = ({children}: PropsWithChildren) => {
+
+    return <div className="m-2">
+        {children}
+    </div>
+}
+
+export default PageLayout

resources/js/components/Tracker.tsx

@@ -0,0 +1,43 @@
+import React, {useEffect, useState} from "react"
+import useTracker from "../hooks/TraskerHook"
+import {Link} from "react-router-dom";
+
+const Tracker = () => {
+
+    const [timer, setTimer] = useState('')
+    const {currentTimeTracker, stopCurrentTimeTrack} = useTracker()
+
+    useEffect(() => {
+        setTimer(formatTimer(currentTimeTracker?.start_at))
+    }, [currentTimeTracker])
+
+    useEffect(() => {
+        setTimeout(() => setTimer(formatTimer(currentTimeTracker?.start_at)), 1000)
+    }, [timer]);
+
+    const formatTimer = (startAt: string|null|undefined) => {
+        if (!startAt) {
+            return '--:--'
+        }
+        let timer = Math.floor(((new Date()).getTime() - (new Date(startAt)).getTime()) / 1000)
+        let hours = Math.floor(timer / 3600)
+        let minutes = Math.floor((timer - hours * 3600) / 60)
+        let secondes = timer - hours * 3600 - minutes * 60
+        return `${hours}:${String(minutes).padStart(2, '0')}:${String(secondes).padStart(2, '0')}`
+    }
+
+    return <div>
+        {currentTimeTracker
+            ? <div className="flex gap-2">
+                <Link to={`/todos/${currentTimeTracker.to_do.id}`}>
+                    {currentTimeTracker.to_do.name}
+                </Link>
+                <span>{timer}</span>
+                <button onClick={stopCurrentTimeTrack}>Stop</button>
+            </div>
+            : <div>--:--</div>
+        }
+    </div>
+}
+
+export default Tracker

resources/js/components/toDos/ToDoIndex.tsx

@@ -0,0 +1,74 @@
+import React, {FC, useEffect, useState} from "react";
+import useAxiosTools from "../../hooks/AxiosTools";
+import {toDo} from "../../utilities/types";
+import {Link} from "react-router-dom";
+import useTracker from "../../hooks/TraskerHook";
+import {Simulate} from "react-dom/test-utils";
+import load = Simulate.load;
+
+const ToDoIndex: FC<ToDoIndexProps> = ({reload}) => {
+
+    const {loading, setLoading, errorCatch, errorLabel, axiosGet, axiosPut} = useAxiosTools(true)
+    const [toDos, setToDos] = useState<toDo[]>([])
+    const {startTrackToDo} = useTracker()
+
+    useEffect(() => {
+        fetchToDos()
+    }, [])
+
+    useEffect(() => {
+        if (reload && !loading) {
+            fetchToDos()
+        }
+    }, [reload]);
+
+    const fetchToDos = async () => {
+        try {
+            const res = await axiosGet('api/todos')
+            setToDos(res.data)
+        } catch (error) {
+            errorCatch(error)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const toggleCheck = async (toDo: toDo) => {
+        console.log(toDo)
+        try {
+            await axiosPut('api/todos/' + toDo.id, {checked: ! toDo.checked})
+            await fetchToDos()
+        } catch (error) {
+            errorCatch(error)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return <>
+        {errorLabel()}
+        <ul className="my-5">
+            {toDos.map(toDo => <li key={toDo.id} className="flex gap-2">
+                <span>Move</span>
+                <input type={"checkbox"}
+                       checked={toDo.checked}
+                       onChange={() =>toggleCheck(toDo)}
+                       className=""/>
+                <Link to={"/todos/" + toDo.id}
+                      className={`${toDo.checked ? 'line-through' : ''} flex-1`}>
+                    {toDo.name}
+                </Link>
+                {!toDo.checked && <span className="cursor-pointer"
+                                        onClick={() => startTrackToDo(toDo)}>
+                    Play
+                </span>}
+            </li>)}
+        </ul>
+    </>
+}
+
+export default ToDoIndex
+
+interface ToDoIndexProps {
+    reload: Date|null,
+}

resources/js/components/toDos/ToDoShow.tsx

@@ -0,0 +1,100 @@
+import React, {FC, HTMLInputTypeAttribute, ReactElement, useEffect, useState} from "react"
+import {useParams} from "react-router-dom";
+import useAxiosTools from "../../hooks/AxiosTools";
+import {timeTracker, toDo} from "../../utilities/types";
+
+const ToDoShow = () => {
+
+    const {id} = useParams()
+    console.log(id)
+    const {setLoading, errorCatch, errorLabel, axiosGet, axiosPut} = useAxiosTools(true)
+    const [toDo, setToDo] = useState<toDo|null>(null)
+
+    useEffect(() => {
+        fetchToDo()
+    }, [])
+
+    const fetchToDo = async () => {
+        try {
+            const res = await axiosGet('/api/todos/' + id)
+            setToDo(res.data)
+        } catch (error) {
+            errorCatch(error)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+
+    return <div>
+        <h1>{toDo?.name}</h1>
+        <h1>{toDo?.description}</h1>
+
+        {toDo && <ToDoTimeTrackers toDo={toDo} />}
+    </div>
+}
+
+export default ToDoShow
+
+const ToDoTimeTrackers: FC<ToDoTimeTrackers> = ({toDo: toDo}) => {
+
+    const {setLoading, errorCatch, errorLabel, axiosGet, axiosPut} = useAxiosTools(true)
+    const [timeTrackers, setTimeTrackers] = useState<timeTracker[]>([])
+
+    useEffect(() => {
+        fetchTimeTrackers()
+    }, [])
+
+    const fetchTimeTrackers = async () => {
+        try {
+            const res = await axiosGet(`/api/todos/${toDo.id}/time-trackers`)
+            setTimeTrackers(res.data)
+        } catch (error) {
+            errorCatch(error)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const timeSpend = () => {
+        let timer = 0
+        let more = false
+        timeTrackers.forEach(timeTracker => {
+            if (! timeTracker.end_at) {
+                more = true
+            } else {
+                timer += ((new Date(timeTracker.end_at)).getTime()) - (new Date(timeTracker.start_at)).getTime()
+            }
+        })
+
+        timer = Math.floor(timer / 1000)
+        let hours = Math.floor(timer / 3600)
+        let minutes = Math.floor((timer - hours * 3600) / 60)
+        let secondes = timer - hours * 3600 - minutes * 60
+        return `${more ? '+' : ''} ${hours}:${String(minutes).padStart(2, '0')}:${String(secondes).padStart(2, '0')}`
+    }
+
+    return <div>
+        <div>Temps passé : {timeSpend()}</div>
+        <table className="mx-auto">
+            <thead>
+            <tr>
+                <th>Début</th>
+                <th>Fin</th>
+                <th>Différence</th>
+            </tr>
+            </thead>
+            <tbody>
+            {timeTrackers.map(timeTracker => <tr key={timeTracker.id} className="text-center">
+                <td>{timeTracker.start_at ? (new Date(timeTracker.start_at)).toSmallFrDate() : ''}</td>
+                <td>{timeTracker.end_at ? (new Date(timeTracker.end_at)).toSmallFrDate() : ''}</td>
+                <td className="text-right">{timeTracker.start_at && timeTracker.end_at ? (new Date(timeTracker.end_at)).difference(new Date(timeTracker.start_at)) : ''}</td>
+            </tr>)}
+            </tbody>
+        </table>
+    </div>
+}
+
+interface ToDoTimeTrackers {
+    toDo: toDo,
+}

resources/js/components/toDos/ToDoStore.tsx

@@ -0,0 +1,41 @@
+import React, {FC, FormEvent, useState} from "react"
+import Field from "../Field";
+import useAxiosTools from "../../hooks/AxiosTools";
+
+const ToDoStore: FC<ToDoStoreProps> = ({setReload}) => {
+
+    const [toDo, setToDo] = useState('')
+    const {errorCatch, errorLabel, axiosPost} = useAxiosTools()
+
+    const onSubmit = async (event: FormEvent) => {
+        event.preventDefault()
+        try {
+            await axiosPost('api/todos', {name: toDo})
+            setToDo('')
+            setReload(new Date())
+        } catch (error) {
+            errorCatch(error)
+        }
+    }
+
+    return <>
+        {errorLabel()}
+        <form className="flex" onSubmit={onSubmit}>
+            <Field name="todo"
+                   value={toDo}
+                   classNameForm="flex-1"
+                   className="h-10 !mt-0 rounded-r-none px-2"
+                   onChange={event => setToDo(event.target.value)} />
+            <button type="submit"
+                    className="bg-blue-900 h-10 rounded-r px-5">
+                Ajouter
+            </button>
+        </form>
+    </>
+}
+
+export default ToDoStore
+
+interface ToDoStoreProps {
+    setReload: (date: Date) => void,
+}