]> git.localhorst.tv Git - alttp.git/blob - resources/js/pages/User.js
some discord bot stuff
[alttp.git] / resources / js / pages / User.js
1 import axios from 'axios';
2 import React, { useEffect, useState } from 'react';
3 import { Helmet } from 'react-helmet';
4 import { useParams } from 'react-router-dom';
5
6 import NotFound from './NotFound';
7 import CanonicalLinks from '../components/common/CanonicalLinks';
8 import ErrorBoundary from '../components/common/ErrorBoundary';
9 import ErrorMessage from '../components/common/ErrorMessage';
10 import Loading from '../components/common/Loading';
11 import Profile from '../components/users/Profile';
12
13 const User = () => {
14         const params = useParams();
15         const { id } = params;
16
17         const [error, setError] = useState(null);
18         const [loading, setLoading] = useState(true);
19         const [user, setUser] = useState(null);
20
21         useEffect(() => {
22                 setLoading(true);
23                 const ctrl = new AbortController();
24                 axios
25                         .get(`/api/users/${id}`, { signal: ctrl.signal })
26                         .then(response => {
27                                 setError(null);
28                                 setLoading(false);
29                                 setUser(response.data);
30                         })
31                         .catch(error => {
32                                 setError(error);
33                                 setLoading(false);
34                                 setUser(null);
35                         });
36                 return () => {
37                         ctrl.abort();
38                 };
39         }, [id]);
40
41         useEffect(() => {
42                 const cb = (e) => {
43                         if (e.user) {
44                                 setUser(user => e.user.id === user.id ? { ...user, ...e.user } : user);
45                         }
46                 };
47                 window.Echo.channel('App.Control')
48                         .listen('UserChanged', cb);
49                 return () => {
50                         window.Echo.channel('App.Control')
51                                 .stopListening('UserChanged', cb);
52                 };
53         }, []);
54
55         if (loading) {
56                 return <Loading />;
57         }
58
59         if (error) {
60                 return <ErrorMessage error={error} />;
61         }
62
63         if (!user) {
64                 return <NotFound />;
65         }
66
67         return <ErrorBoundary>
68                 <Helmet>
69                         <title>{user.nickname || user.username}</title>
70                 </Helmet>
71                 <CanonicalLinks base={`/users/${user.id}`} />
72                 <Profile user={user} />
73         </ErrorBoundary>;
74 };
75
76 export default User;