dogs.js

import React from 'react'; 
import { useContext } from 'react';
import { useParams, Link } from 'react-router-dom';
import { status, json } from '../utilities/requestHandlers';
import UserContext from '../contexts/user';

function Dogs(props) {
    let { id } = useParams();
    const [dog, setDog] = React.useState({});
    const context = useContext(UserContext);
    
    if (!dog.Name) {
        fetch(`https://melody-annex-3000.codio-box.uk/api/v1/dogs/${id}`)
        .then(status)
        .then(json)
        .then(data => {
        console.log(data);
        setDog(data);
        })
        .catch(err => console.error(err));
    }  
    if(!context.user.loggedIn){
      return ( 
              <> 
                  <h1>Dog ID: {id}</h1> 
                  {Object.keys(dog).map(key => <li key={key}>{key}: {dog[key]}</li>)}
              </> 
          );
    }else{
      if(context.user.role!=='admin'){
          return ( 
              <> 
                  <h1>Dog ID: {id}</h1> 
                  {Object.keys(dog).map(key => <li key={key}>{key}: {dog[key]}</li>)}
                  <button><Link to ={{pathname: `/message/${id}`,state:{data:dog}}} >Message us</Link></button>
              </> 
          );
      } else {
          return ( 
              <> 
                  <h1>Dog ID: {id}</h1> 
                  {Object.keys(dog).map(key => <li key={key}>{key}: {dog[key]}</li>)}
                  <button><Link to ={`/editdog/${id}`}>Edit</Link></button>
                  <button><Link to ={`/deletedog/${id}`}>Delete</Link></button>
              </> 
          );
      }
    }
}

export default Dogs;