/**************************************************/
/** LIST OF ALL GEN-ED CATEGORIES
/**************************************************/
class Categories extends React.Component {
    constructor(props) {
      super()
      this.state = { loaded:false, data:[] }
    }
    componentDidMount() {
      callDb("/api/build.php?categories=all", this);
    }
    render() {
      let links, loading = 'Loading...';
      if(this.state.loaded){
        let categoryArray = this.state.data;
        loading = '';

        links = categoryArray.map(function(y, key) {
          switch (y.category) {
            case 'GE1': 
              y.name = 'GE Category 1 - Literature';
              break;
            case 'GE2':
              y.name = 'GE Category 2 - Arts';
              break;
            case 'GE3':
              y.name = 'GE Category 3 - Numerical Understanding';
              break;
            case 'GE4':
              y.name = 'GE Category 4 - Natural Sciences';
              break;
            case 'GE5':
              y.name = 'GE Category 5 - History/Philosophy';
              break;
            case 'GE6':
              y.name = 'GE Category 6 - Social Sciences';
              break;
            case 'GE7':
              y.name = 'GE Category 7 - Social Institutions';
              break;
            case 'GE8':
              y.name = 'GE Category 8 - International Systems';
              break;
            case 'GE9':
              y.name = 'GE Category 9 - Oral Communications';
              break;
            case 'GE10':
              y.name = 'GE Category 10 - Written Communications';
              break;
            default:
              y.name = y.category_description;
          }
          return <div key={y.category}><Link to={'/category/'+y.category}>{y.name}</Link></div>
        })

      }
      return (
        <div className="main row">
          <div className="col-lg-3">
            <Sidebar />
          </div>
          <div className="col-lg-9">
            <div className="row">
              <div className="col">
                <h1>Transfer Courses by Basic Skills/General Education Category</h1>
              </div>
            </div>
            <div className="row text-left">
              <div className="col">
                <ul className="list-item-bullet">
                  <li>PLACEHOLDER TEXT (TBD)</li>
                </ul>
              </div>
            </div>
            <div className="row mb-3">
              <div className="col pr-0">
                <strong>Select a basic skills/general education category below to view the transfer courses that meet these requirements.</strong>
              </div>
            </div>
            <div className="row">
              <div className="col">
              <h2>Select Cateogry</h2>
              </div>
            </div>
            <div className="links row">
              <div className="col-12">{ loading }</div>
              <div className="col-12">{ links }</div>
            </div>
          </div>
        </div>
      )
    }
  }