<template>
  <div id="app">
    <p style="padding: 0.65rem">
      These all do the exact same functions. However, we use either the proper
      mix of forEach, Map, and filter. Or, we use only one of them. The times
      below reflect how long each function takes to complete.
    </p>
    <table class="table">
      <tr>
        <th>Function</th>
        <th>Time (ms)</th>
      </tr>
      <tr>
        <td>Proper</td>
        <td>
          <b>{{ properTime }}ms</b>
        </td>
      </tr>
      <tr>
        <td>Filter</td>
        <td>
          <b>{{ filterTime }}ms</b>
        </td>
      </tr>
      <tr>
        <td>Map</td>
        <td>
          <b>{{ mapTime }}ms</b>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
function proper() {
  let students = [
    {
      id: 10,
      name: "Brent D",
      age: 23,
      major: "Computer Science",
      classes: [
        {
          id: 1,
          name: "Intro to CSIS - 1010",
          grade: "C-",
          started: "09-01-2022",
          ends: "12-14-2022",
          instructor: "Prof. Teacher"
        }
      ]
    }
  ];

  while (students.length <= 10000) {
    students.push({
      ...students[0],
      id: students.length + 1,
      name: students[0].name + students.length + 1
    });
  }

  const startTime = Date.now();

  function addClassToStudent(student, _class) {
    if (
      !student ||
      Object.keys(student).length == 0 ||
      !_class ||
      Object.keys(_class).length == 0
    ) {
      return null;
    }

    let studentHasClass =
      student.classes.filter((__class) => _class.id !== _class.id).length > 0;

    if (studentHasClass) return null;

    student.classes.push(_class);
  }

  students = students.map((student) => {
    addClassToStudent(student, {
      id: 2,
      name: "CSIS 2010",
      grade: "N/A",
      started: "10-01-2022",
      ends: "12-14-2022",
      instructor: "Prof. Teacher"
    });

    return student;
  });

  students.forEach((student) => {
    let classesCount = student.classes.length;
    student.classesCount = classesCount;
  });

  return Date.now() - startTime;
}

function filters() {
  let students = [
    {
      id: 10,
      name: "Brent D",
      age: 23,
      major: "Computer Science",
      classes: [
        {
          id: 1,
          name: "Intro to CSIS - 1010",
          grade: "C-",
          started: "09-01-2022",
          ends: "12-14-2022",
          instructor: "Prof. Teacher"
        }
      ]
    }
  ];

  while (students.length <= 10000) {
    students.push({
      ...students[0],
      id: students.length + 1,
      name: students[0].name + students.length + 1
    });
  }

  const startTime = Date.now();

  function addClassToStudent(student, _class) {
    if (
      !student ||
      Object.keys(student).length == 0 ||
      !_class ||
      Object.keys(_class).length == 0
    ) {
      return null;
    }

    let studentHasClass =
      student.classes.filter((__class) => _class.id !== _class.id).length > 0;

    if (studentHasClass) return null;

    student.classes.push(_class);
  }

  students = students.filter((student) => {
    addClassToStudent(student, {
      id: 2,
      name: "CSIS 2010",
      grade: "N/A",
      started: "10-01-2022",
      ends: "12-14-2022",
      instructor: "Prof. Teacher"
    });

    return student;
  });

  students.filter((student) => {
    let classesCount = student.classes.length;
    student.classesCount = classesCount;
  });

  return Date.now() - startTime;
}

function maps() {
  let students = [
    {
      id: 10,
      name: "Brent D",
      age: 23,
      major: "Computer Science",
      classes: [
        {
          id: 1,
          name: "Intro to CSIS - 1010",
          grade: "C-",
          started: "09-01-2022",
          ends: "12-14-2022",
          instructor: "Prof. Teacher"
        }
      ]
    }
  ];

  while (students.length <= 10000) {
    students.push({
      ...students[0],
      id: students.length + 1,
      name: students[0].name + students.length + 1
    });
  }

  const startTime = Date.now();

  function addClassToStudent(student, _class) {
    if (
      !student ||
      Object.keys(student).length == 0 ||
      !_class ||
      Object.keys(_class).length == 0
    ) {
      return null;
    }

    let studentHasClass =
      student.classes.filter((__class) => _class.id !== _class.id).length > 0;

    if (studentHasClass) return null;

    student.classes.push(_class);
  }

  students = students.map((student) => {
    addClassToStudent(student, {
      id: 2,
      name: "CSIS 2010",
      grade: "N/A",
      started: "10-01-2022",
      ends: "12-14-2022",
      instructor: "Prof. Teacher"
    });

    return student;
  });

  students.map((student) => {
    let classesCount = student.classes.length;
    student.classesCount = classesCount;
  });

  return Date.now() - startTime;
}

let properTime = proper();
let filterTime = filters();
let mapTime = maps();

export default {
  data() {
    return {
      properTime: properTime,
      filterTime: filterTime,
      mapTime: mapTime
    };
  }
};
</script>