audit.js

/* eslint-disable no-unused-vars */
import React, { PureComponent } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import PropTypes from 'prop-types';
import piechart from './prototype/piechart.png';
import barchart from './prototype/barchart.png';

import classNames from 'classnames';
import styles from './audit.module.css';

import {
  selectAceCredits,
  selectAdvanced,
  selectCreditsForMajor,
  selectCurrent,
  selectMenu,
  setCurrent,
  toggleAdvanced,
  toggleMenu,
} from './auditSlice.js';

function LoginScreen(props){
  const advanced = useSelector(selectAdvanced);
  const dispatch = useDispatch();
  const blockInvalidChar = (e) =>
    ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault();
  return (
    <div>
      <div className={styles.heading}>
        <h1 className={styles.headingText}>Degree Audit</h1>
        <h3 className={styles.headingText}>Start Page</h3>
      </div>

      <div className={styles.middleRow}>

        <div left>
          <div>
            <label className={styles.label}>NUID:</label>
            <input type="number" min="0" placeholder="NUID" onKeyDown={blockInvalidChar}
              className={styles.textBox} id="nuid"/>
          </div>

          {advanced ?
            <div>
              <div>
                <label className={styles.label}>Include Degree Planner Courses:</label>
                <input type="checkbox" className={styles.checkBox}></input>
              </div>

              <div>
                <label className={styles.label}>Format:</label>
                <select className={styles.majorDropDown}>
                  <option>Regular</option>
                  <option>PDF</option>
                </select>
              </div>
            </div> : null}
        </div>

        <div right>
          <div>
            <label for="major" className={styles.label}>Major</label>
            <select name="major" placeholder="Major" className={styles.majorDropDown}>
              <option>Software engineering</option>
              <option>Computer Science</option>
              <option>Computer Engineering</option>
              <option>Data Science</option>
            </select>
          </div>

          {advanced ?
            <div>
              <div>
                <label for="major" className={styles.label}>Major</label>
                <select name="major" placeholder="Major" className={styles.majorDropDown}>
                  <option>Software engineering</option>
                  <option>Computer Science</option>
                  <option>Computer Engineering</option>
                  <option>Data Science</option>
                </select>
                <button className={styles.majorButton}>-</button>
              </div>
              <div>
                <button className={styles.majorButton}>+</button>
                <label className={styles.label}>Add Major/Minor</label>
              </div>
            </div> : null}
        </div>
      </div>

      <div className={styles.middleRow}>
        <button className={styles.button} onClick={() => dispatch(toggleAdvanced())}>Advanced</button>
        <button className={styles.button} onClick={() => dispatch(toggleMenu(document.getElementById('nuid').value))}>
          Run</button>
      </div>
    </div>
  );
}

LoginScreen.propTypes = {
  nuid: PropTypes.number,
};

function CreditDetails(props){
  const dispatch = useDispatch();
  return (
    <div>
      <div className={styles.heading}>
        <h1 className={styles.headingText}>Degree Audit</h1>
        <h3 className={styles.headingText}>Credits Page</h3>
      </div>
      <div className={styles.middleRow}>
        <ShowCreditDetails />
      </div>
      <div className={styles.middleRow}>
        <SpecificCreditInfo type={'Credits for Select Major/Minor'} func="major" />
        <SpecificCreditInfo type={'Ace Credits'} func="ace" />
        <SpecificCreditInfo type={'Courses That Do Not Count'} func="notCount" />
        <SpecificCreditInfo type={'Additional Requirements'} />
      </div>

      <div className={styles.middleRow}>
        <CreditInfo credits={useSelector(selectCurrent)[0]} remaining={useSelector(selectCurrent)[1]} />
      </div>

      <div className={styles.middleRow}>
        <button className={styles.creditButton}
          onClick={() => dispatch(toggleMenu('50130305'))}>
          Run Another Audit</button>
      </div>
    </div>
  );
}

function CreditInfo(props){
  return (
    <div className={styles.creditInfo}>
      <text>{props.remaining} Credits Remaining</text>
      {props.credits.map((credit) =>
        <div>
          {credit[0] !== 'none' ?
            <div>
              {credit[2] === 0 ?
                <input type="checkbox" checked className={styles.checkBox} /> :
                <input type="checkbox" className={styles.checkBox} />}
              <text>{credit[0]} - {credit[2]} Credits Remain</text>
              <div>
                {credit[1].map((classes) =>
                  <a href={classes[1]} className={styles.link} target="_blank" rel="noreferrer">{classes[0]}</a>,
                )}
              </div>
            </div> :
            <text>No applicable Credits</text>}
        </div>,
      )}
    </div>
  );
}

CreditInfo.propTypes = {
  credits: PropTypes.array.isRequired,
  remaining: PropTypes.number.isRequired,
};

function SpecificCreditInfo(props){
  const dispatch = useDispatch();
  return (
    <div>
      <button className={styles.creditButton} onClick={() => dispatch(setCurrent(props.func))}>{ props.type }</button>
    </div>
  );
}

SpecificCreditInfo.propTypes = {
  type: PropTypes.string.isRequired,
  func: PropTypes.string,
};

function ShowCreditDetails(props){
  return (
    <div className={styles.detailBox}>
      <img src={piechart} alt="piechart showing credits remaining" className={styles.image} />
      <img src={barchart} alt="barchart showing credits remaining" className={styles.image} />
    </div>
  );
}

export function Audit(props) {
  const dispatch = useDispatch();
  dispatch(setCurrent('major'));
  return (
    <div className={styles.main}>
      {useSelector(selectMenu) ?
        <LoginScreen nuid={50130305} /> :
        <div>
          <CreditDetails />
        </div>
      }
    </div>
  );
}