<commit_before>import React, { Component } from "react"
import { prettyHours, shortDayNames } from "./utils/Strings"
import {
  getStartPadding,
  getDesiredHeight,
  getStartOfWeek,
  getWeekArray,
  getMilitaryTime
} from "./utils/DateHelper"
import Typography from "material-ui/Typography"

const columnStyle = {
  width: "14%",
  height: "100%",
  textAlign: "center"
}

const hourColStyle = {
  display: "flex",
  flexDirection: "column",
  width: "5%",
  minWidth: 40
}

const dayHeaderStyle = {
  height: "2.7%",
  color: "black",
  opacity: ".7",
  border: "1px solid rgba(0, 0, 0, 0.075)",
  fontWeight: "bold",
  fontSize: "medium"
}

const hourHeaderStyle = {
  height: "5.72%",
  color: "black",
  opacity: ".7",
  fontWeight: "bold",
  textAlign: "center",
  minWidth: 40,
  marginRight: 1
}

const buttonStyles = {
  backgroundColor: "#0074b7",
  color: "white",
  fontWeight: "bold",
  border: "none",
  width: "100%"
}

const hourCol = () => {
  let column = [
    <div
      key="TopLeftCorner"
      style={{
        height: "1.8%"
      }}
    />
  ]
  for (let i = 0, size = prettyHours.length; i < size; i++) {
    column.push(
      <Typography component="div" style={hourHeaderStyle} key={prettyHours[i]}>
        {" "}{prettyHours[i]}
        {" "}
      </Typography>
    )
  }
  return column
}

const newWeekCol = (meetings, day) => {
  let column = []
  for (let i = 0; i < 34; i++) {
    column.push(
      <div
        key={day + "-" + i}
        id={"weekCol-" + day + "-" + i}
        style={{
          border: "1px solid lightgrey",
          height: "2.65%"
        }}
      />
    )
  }
  if (!Object.is(meetings, null) && !Object.is(meetings, undefined)) {
    for (let j = 0; j < meetings.length; j++) {
      let colIndex = getMilitaryTime(meetings[j].starttime).hours * 2 - 14
      let desiredHeight = getDesiredHeight(
        meetings[j].starttime,
        meetings[j].endtime
      )
      let elemHeight = {
        height: desiredHeight.toString() + "%",
        marginTop: getStartPadding(meetings[j].starttime) + "px"
      }
      column[colIndex] = (
        <div
          id={"weekCol-" + day + "-" + colIndex}
          style={{ border: "1px solid lightgrey", height: "2.65%" }}
        >
          <button style={Object.assign({}, buttonStyles, elemHeight)}>
            {meetings[j].coursetitle + "\n"}
          </button>
        </div>
      )
    }
  }
  return column
}

class Weekview extends Component {
  getWeekCol = () => {
    const currentDate = this.props.currentDateRange
    const startOfWeek = getStartOfWeek(
      currentDate.month,
      currentDate.year,
      currentDate.week
    )
    let weekcols = []
    for (let i = 0; i < 7; i++) {
      let weekGrid = ""
      try {
        weekGrid = newWeekCol(
          this.props.meetings[currentDate.month][startOfWeek + i],
          i
        )
      } catch (err) {
        weekGrid = newWeekCol(null)
      }
      weekcols.push(
        <div style={columnStyle}>
          <Typography component="div" style={dayHeaderStyle}>
            {" "}{shortDayNames[i]}
            {" "}
          </Typography>
          {" "}{weekGrid}
          {" "}
        </div>
      )
    }
    return weekcols
  }

  render() {
    const currentDate = this.props.currentDateRange
    const startOfWeek = getStartOfWeek(
      currentDate.month,
      currentDate.year,
      currentDate.week
    )
    return (
      <div
        style={{
          border: "1px solid black",
          height: 950,
          display: "flex",
          fontFamily: "Arimo"
        }}
      >
        <div style={hourColStyle}> {hourCol()} </div> {this.getWeekCol()}
        {" "}
      </div>
    )
  }
}

export default Weekview<commit_msg>Weekview is more inline with the material-ui framework #5<commit_after>import React, { Component } from "react"
import PropTypes from "prop-types"
import { prettyHours, shortDayNames } from "./utils/Strings"
import { withStyles, createStyleSheet } from "material-ui/styles"
import {
  getStartPadding,
  getDesiredHeight,
  getStartOfWeek,
  getWeekArray,
  getMilitaryTime
} from "./utils/DateHelper"
import Button from "material-ui/Button"
import Typography from "material-ui/Typography"

const styleSheet = createStyleSheet("Weekview", theme => ({
  weekContent: {
    border: "1px solid black",
    height: 950,
    display: "flex",
    fontFamily: "Arimo"
  },
  weekBox: {
    border: "1px solid lightgrey",
    height: "2.65%"
  },

  buttonStyles: {
    backgroundColor: "#0074b7",
    color: "white",
    fontWeight: "bold",
    border: "none",
    width: "100%"
  },

  dayHeader: {
    height: "2.7%",
    color: "black",
    opacity: ".7",
    border: "1px solid rgba(0, 0, 0, 0.075)",
    fontWeight: "bold",
    fontSize: "medium"
  },

  hourColumn: {
    display: "flex",
    flexDirection: "column",
    width: "5%",
    minWidth: 40
  },

  weekColumn: {
    width: "14%",
    height: "100%",
    textAlign: "center"
  },

  hourHeader: {
    height: "5.72%",
    color: "black",
    opacity: ".7",
    fontWeight: "bold",
    textAlign: "center",
    minWidth: 40,
    marginRight: 1
  }
}))

const hourCol = classes => {
  let column = [
    <div
      key="TopLeftCorner"
      style={{
        height: "1.8%"
      }}
    />
  ]
  for (let i = 0, size = prettyHours.length; i < size; i++) {
    column.push(
      <Typography
        component="div"
        className={classes.hourHeader}
        key={prettyHours[i]}
      >
        {prettyHours[i]}
      </Typography>
    )
  }
  return column
}

const newWeekCol = (meetings, day, classes) => {
  let column = []
  for (let i = 0; i < 34; i++) {
    column.push(
      <Typography
        component="div"
        key={day + "-" + i}
        id={"weekCol-" + day + "-" + i}
        className={classes.weekBox}
      />
    )
  }
  if (!Object.is(meetings, null) && !Object.is(meetings, undefined)) {
    for (let j = 0; j < meetings.length; j++) {
      let colIndex = getMilitaryTime(meetings[j].starttime).hours * 2 - 14
      let desiredHeight = getDesiredHeight(
        meetings[j].starttime,
        meetings[j].endtime
      )
      let elemHeight = {
        height: desiredHeight.toString() + "%",
        marginTop: getStartPadding(meetings[j].starttime) + "px"
      }
      column[colIndex] = (
        <Typography
          component="div"
          key={day + "-" + colIndex}
          id={"weekCol-" + day + "-" + colIndex}
          className={classes.weekBox}
        >
          <button className={classes.buttonStyles} style={elemHeight}>
            {meetings[j].coursetitle + "\n"}
          </button>
        </Typography>
      )
    }
  }
  return column
}

class Weekview extends Component {
  getWeekCol = () => {
    const currentDate = this.props.currentDateRange
    const classes = this.props.classes
    const startOfWeek = getStartOfWeek(
      currentDate.month,
      currentDate.year,
      currentDate.week
    )
    let weekcols = []
    for (let i = 0; i < 7; i++) {
      let weekGrid = ""
      try {
        weekGrid = newWeekCol(
          this.props.meetings[currentDate.month][startOfWeek + i],
          i,
          classes
        )
      } catch (err) {
        weekGrid = newWeekCol(null)
      }
      weekcols.push(
        <div className={classes.weekColumn}>
          <Typography component="div" className={classes.dayHeader}>
            {shortDayNames[i]}
          </Typography>
          {weekGrid}
        </div>
      )
    }
    return weekcols
  }

  render() {
    const currentDate = this.props.currentDateRange
    const classes = this.props.classes
    const startOfWeek = getStartOfWeek(
      currentDate.month,
      currentDate.year,
      currentDate.week
    )
    return (
      <div className={classes.weekContent}>
        <div className={classes.hourColumn}> {hourCol(classes)} </div>{" "}
        {this.getWeekCol()}
      </div>
    )
  }
}

Weekview.propTypes = {
  classes: PropTypes.object.isRequired
}

export default withStyles(styleSheet)(Weekview)
{'fraction_non_alphanumeric': 0.14671142608479423, 'fraction_numerical': 0.014049484023374362, 'mean_word_length': 2.2086158755484644, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 42, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6294652', 'n_tokens_mistral': 2734, 'n_tokens_neox': 2639, 'n_words': 572}