alert-error.js

alert-error.js

import React, { useEffect, useState } from "react";
import { observer } from "mobx-react-lite";
import {
  Alert,
  Card,
  CardText,
  CardBody,
  CardTitle,
  CardSubtitle,
  Row,
  Col,
  CardGroup
} from "reactstrap";

import PageTitle from "components/common/PageTitle";
import { useRootStore } from "../../../stores/RootStore";
import AddAssessment from "./AddAssessment";
import { LoadingOverlay, Loader } from "react-overlay-loader";
import moment from "moment";
import { withRouter } from "react-router-dom";
import NoRecords from "components/common/NoRecords";

const getDate = (date = null) => {
  return date
    ? moment(date)
        .utc()
        .format("DD-MM-YYYY")
    : null;
};

const Assessments = observer(({ history }) => {
  const { assessmentEditionStore } = useRootStore();
  const [page] = useState(1);
  const [params] = useState({});

  useEffect(() => {
    assessmentEditionStore.loadPage(page, params);
  }, [page, params]);

  if (assessmentEditionStore.hasErrors) {
    return (
      <div>
        {assessmentEditionStore.errors.map(err => (
          <Alert key={err} className="c-danger">
            {err}
          </Alert>
        ))}
      </div>
    );
  }
  return (
    <div className="assessments">
      <PageTitle title="page.assessments" />
      {assessmentEditionStore.recordCreated && (
        <Alert className="c-primary">Record Created</Alert>
      )}
      }
      <LoadingOverlay>
        <AddAssessment
          onSubmit={item => {
            //trigger
            //assessmentEditionStore.updatePageData(page,item)
          }}
        />

        {/* Loader */}
        <Loader loading={assessmentEditionStore.loading !== false} />

        {/* No records  */}
        {assessmentEditionStore.dataMap.length === 0 && <NoRecords />}

        <CardGroup className="reactstrap-card-block row">
          {assessmentEditionStore.dataMap.map(edition => (
            <Card key={edition.id} className="mt-2">
              <CardBody>
                <CardTitle>{edition.title}</CardTitle>
                <CardSubtitle>{edition.description}</CardSubtitle>
                <CardText>
                  <Row
                    onClick={() => history.push("coming-soon")}
                    style={{ cursor: "pointer" }}
                    title="Click here to open Graders"
                  >
                    <Col xs="2">
                      <i class="fas fa-2x fa-clipboard-list"></i>
                    </Col>
                    <Col xs="10">Graders</Col>
                  </Row>
                  <Row>
                    <Col xs="2">
                      <i class="fas fa-2x fa-calendar-times"></i>
                    </Col>
                    <Col xs="10">
                      Published on :
                      {getDate(edition.publishedAt) || "Unpublished"}
                    </Col>
                  </Row>
                  <Row>
                    <Col xs="2">
                      <i class="fas fa-2x fa-sync-alt"></i>
                    </Col>
                    <Col xs="10">Version : V1</Col>
                  </Row>
                  <Row>
                    <Col xs="2">
                      <i class="fas fa-2x fa-users"></i>
                    </Col>
                    <Col xs="10">Total Participants : 0</Col>
                  </Row>
                </CardText>
              </CardBody>
            </Card>
          ))}
        </CardGroup>
      </LoadingOverlay>
    </div>
  );
});
export default withRouter(Assessments);