<repo_name>durdonadjalilova/captains-log-react<file_sep>/src/Components/Logs.js
import Log from "./Log"

const  Logs = ({ logs }) => {
    return (
      <div className="Logs">
        <section>
          <table>
            <thead>
              <tr>
                <th></th>
                <th>Take me there</th>
                <th>See this log</th>
              </tr>
            </thead>
            <tbody>
              {logs.map((log, index) => {
                return <Log key={index} log={log} index={index} />;
              })}
            </tbody>
          </table>
        </section>
      </div>
    );
  }

export default Logs<file_sep>/src/Components/LogDetails.js
import { useState, useEffect } from "react";
import { Link, useParams, useHistory, withRouter } from "react-router-dom";
import axios from "axios";
import { apiURL } from '../util/apiURL';
const API = apiURL();

function LogDetails(props) {
  const { deleteLog } = props;
  const [log, setLog] = useState([]);
  let { index } = useParams();
  let history = useHistory();

  const fetchLog = async() =>{
    try {
      const response = await axios.get(`${API}/logs/${index}`);
      // console.log(response.data);
      setLog(response.data);
    } catch (error) {
      console.log(error)
    }
  }
  useEffect(() => {
    fetchLog()
  }, []);

  const handleDelete = () => {
    deleteLog(index)
    history.push('/logs')
  };

  return (
    <article>
      <h3>
        {/* {log.mistakesWereMadeToday ? <span>😢</span> : <span>😃</span>}  */}
        {log.title}
      </h3>
      <h5>
        <span>
          {/* <a href={log.title}>{log.title}</a> */}
          {log.title} - By {log.captainName}
        </span>{" "}
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </h5>
      <h6>{log.post}</h6>
      <p> {`Mistakes were made today: ${log.mistakesWereMadeToday}`}</p>
      <p>Days since last crisis: {log.daysSinceLastCrisis}</p>
      <div className="showNavigation">
        <div>
          {" "}
          <Link to={`/logs`}>
            <button>Back</button>
          </Link>
        </div>
        <div>
          {" "}
          <Link to={`/logs/${index}/edit`}>
            <button>Edit</button>
          </Link>
        </div>
        <div>
          {" "}
          <button onClick={handleDelete}>Delete</button>
        </div>
      </div>
    </article>
  );
}
export default withRouter(LogDetails);


















<file_sep>/src/Components/Log.js
import { Link } from "react-router-dom";

const Log = ({ log, index }) => {
  return (
    <tr>
      <td>
        {log.mistakesWereMadeToday ? (
          <span>⭐️</span>
        ) : (
          <span>&nbsp; &nbsp; &nbsp;</span>
        )}
      </td>
      <td>
        {/* <a href={log.title} target="_blank" rel="noreferrer"> */}
        <Link to={`/logs/${index}`}>{log.title}</Link>     
        {/* </a> */}
      </td>
      <td>
        <Link to={`/logs/${index}`}>✏️</Link>
      </td>
    </tr>
  );
}

export default Log;
