hiuphub-gamified/src/components/ReputationPoint/index.js

app of gamified

import PropTypes from "prop-types";
import React, { useState, useEffect } from "react";

import api from "../../api";
import "../../css/Modal.css";
import AddReputation from "./AddReputation";
import Input from "../../components/Common/Input";
import ReactModal from "../../components/Common/modal";
import initializeUrlAndToken from "../../utils/initializeToken";

function ReputationPoint(props) {
  initializeUrlAndToken(props);

  const { activities, apiurl } = props;
  const [token, setToken] = useState(props.token); // just for debug, remove it later
  const [isLoading, setIsLoading] = useState(true);
  const [searchText, setSearchText] = useState("");
  const [pageNumber, setPageNumber] = useState(1);
  const [reputationPoints, setReputationPoints] = useState([]);
  const [totalRepPoints, setTotalRepPoints] = useState(0);
  const [modalIsOpen, setIsOpen] = React.useState(false);

  useEffect(() => {
    let ignore = false;

    setIsLoading(true);

    const getReputationPoints = async () => {
      let url = `/reputationpoints/v1?pageNumber=${pageNumber}`;

      if (searchText) {
        url = `${url}&title=${searchText}`;
      }

      try {
        const results = await api.get(url);
        if (!ignore) {
          console.log("Ignore Consiton");
          setIsLoading(false);
          setReputationPoints(results.data);
          setTotalRepPoints(results.total);
        }
      } catch (err) {
        const error = err.message || err;
        console.log({ error });

        if (!ignore) {
          if (error === "jwt expired") {
            setToken(error);
          }

          setIsLoading(false);
          setReputationPoints([]);
        }
      }
    };

    getReputationPoints();

    return () => {
      ignore = true;
    };
  }, [pageNumber, searchText]);

  const addReputationResponse = data => {
    const reputationPoint = [...reputationPoints, ...data];
    setReputationPoints(reputationPoint);
  };

  const onSearchInputChange = event => {
    event.persist();

    console.log({ eee: event.key });
    if (event.key === "Enter") {
      setSearchText(event.target.value);
    }
  };

  function toggleModal() {
    setIsOpen(modalIsOpen => !modalIsOpen);
  }

  return (
    <div className="gamification">
      {/* 
      <div className="container-fluid bg-white border-bottom">
        <header className="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3">
          <a
            href="/"
            className="align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none"
          >
            <h4 className="lead">All Pathways</h4>
            <sub className="text-muted" style={{ fontSize: "0.75em" }}>
              2246 Pathways
            </sub>
          </a>
          <div className="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
            <div className="form-group has-search">
              <span className="fa fa-search form-control-feedback" />
              <input
                className="form-control form-control-sm"
                type="text"
                placeholder="Search..."
                aria-label="Search"
              />
            </div>
          </div>
          <div className="col-md-3 text-end">
            {activities.length ? (
              <button className="btn btn-dark me-1" onClick={toggleModal}>
                Add New
              </button>
            ) : null}
          </div>
        </header>
      </div>
      */}
      <div className="container-fluid py-5">
      
        <section className="clearfix">
          <div style={{display:'flex',justifyContent:'space-between'}}>
          <h1>Reputation Points</h1>
          {activities.length ? (
              <button className="btn btn-dark me-1"  onClick={toggleModal} style={{height:'40px'}}>
                Add New
              </button>
            ) : null}

          </div>
          <Input
            onChange={onSearchInputChange}
            onKeyDown={onSearchInputChange}
          />
        </section>
        {isLoading ? (
          <div>Loading....</div>
        ) : !reputationPoints.length ? (
          <div>No Reputation Points</div>
        ) : (
          <section className="clearfix">
            <table className="table table-striped">
              <thead>
                <tr>
                  <th>Title</th>
                  <th>Subscore</th>
                </tr>
              </thead>
              <tbody>
                {reputationPoints.map((rp, index) => {
                  return (
                    <tr key={rp._id}>
                      <td>{rp.title}</td>
                      <td>{rp.subscore}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </section>
        )}
      </div>
      <ReactModal isOpen={modalIsOpen} onRequestClose={toggleModal}>
        <AddReputation
          activities={activities}
          closeModal={toggleModal}
          onResponse={data => addReputationResponse(data)}
        />
      </ReactModal>
    </div>
  );
}

ReputationPoint.propTypes = {
  activities: PropTypes.array.isRequired,
};

export default ReputationPoint;