rev view

import React, { useState } from 'react';
import { useAuth } from '../../auth/authContext';

const ReviewView = (props) => {
  const { id, username, text, handleRemove, update } = props;
  const { user } = useAuth();
  const [viewText, setViewText] = useState(text);
  const [updateMode, setModeUpdate] = useState(false);

  const handleUpdate = () => {
    setModeUpdate((preState) => !preState);
  };

  const saveEdit = () => {
    update({ text: viewText });
    handleUpdate();
  };

  return (
    <div>
      <span>{username + ': '}</span>
      {username === user.username ? (
        <>
          {updateMode ? (
            <>
              <input
                value={viewText}
                onChange={(ev) => setViewText(ev.target.value)}
              />
              <button onClick={saveEdit}>Save</button>
              <button onClick={handleUpdate}>Cancel</button>
            </>
          ) : (
            <>
              <span>{text}</span>
              <button onClick={handleUpdate}>Edit Review</button>
            </>
          )}

          <button onClick={() => handleRemove(id)}>Delete review</button>
        </>
      ) : null}
    </div>
  );
};

export default ReviewView;