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;