12976781475

Committed 26 Jan 2025 05:20PM UTC coverage: 91.854% (-0.02%) from 91.87%

Build # 12976781475

Build Type

Pull #7392

github

Committed by

web-flow

Commit Message

Merge 4e5b55b4a into 10a758445

Pull Request Pull Request #7392: Update React to v18

Run Details

624 of 1361 branches covered (45.85%)

Branch coverage included in aggregate %.

0 of 16 new or added lines in 8 files covered. (0.0%)

75 existing lines in 4 files now uncovered.

41290 of 44270 relevant lines covered (93.27%)

120.23 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

57.14

/app/javascript/Components/instructor_table.jsx

import React from "react";
import {createRoot} from "react-dom/client";
import PropTypes from "prop-types";

import ReactTable from "react-table";
import {selectFilter} from "./Helpers/table_helpers";

class InstructorTable extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [],
      counts: {all: 0, active: 0, inactive: 0},
      loading: true,
    };
    this.fetchData = this.fetchData.bind(this);
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(Routes.course_instructors_path(this.props.course_id), {
      headers: {
        Accept: "application/json",
      },
    })
      .then(response => {
        if (response.ok) {
          return response.json();
        }
      })
      .then(res => {
        this.setState({data: res.data, counts: res.counts, loading: false});
      });
  }

  render() {
    const {data} = this.state;
    return (
      <ReactTable
        data={data}
        columns={[
          {
            Header: I18n.t("activerecord.attributes.user.user_name"),
            accessor: "user_name",
          },
          {
            Header: I18n.t("activerecord.attributes.user.first_name"),
            accessor: "first_name",
          },
          {
            Header: I18n.t("activerecord.attributes.user.last_name"),
            accessor: "last_name",
          },
          {
            Header: I18n.t("activerecord.attributes.user.email"),
            accessor: "email",
          },
          {
            Header: I18n.t("roles.active") + "?",
            accessor: "hidden",
            Cell: ({value}) => (value ? I18n.t("roles.inactive") : I18n.t("roles.active")),
            filterMethod: (filter, row) => {
              if (filter.value === "all") {
                return true;
              } else {
                return (
                  (filter.value === "active" && !row[filter.id]) ||
                  (filter.value === "inactive" && row[filter.id])
                );
              }
            },
            Filter: selectFilter,
            filterOptions: [
              {
                value: "active",
                text: `${I18n.t("roles.active")} (${this.state.counts.active})`,
              },
              {
                value: "inactive",
                text: `${I18n.t("roles.inactive")} (${this.state.counts.inactive})`,
              },
            ],
            filterAllOptionText: `${I18n.t("all")} (${this.state.counts.all})`,
          },
          {
            Header: I18n.t("actions"),
            accessor: "id",
            Cell: data => (
              <span>
                <a href={Routes.edit_course_instructor_path(this.props.course_id, data.value)}>
                  {I18n.t("edit")}
                </a>
              </span>
            ),
            sortable: false,
          },
        ]}
        filterable
        loading={this.state.loading}
      />
    );
  }
}

InstructorTable.propTypes = {
  course_id: PropTypes.number,
};

function makeInstructorTable(elem, props) {
  const root = createRoot(elem);
  root.render(<InstructorTable {...props} />);
}

export {makeInstructorTable, InstructorTable};

1	import React from "react";
2	import {createRoot} from "react-dom/client";
3	import PropTypes from "prop-types";
4
5	import ReactTable from "react-table";
6	import {selectFilter} from "./Helpers/table_helpers";
7
8	class InstructorTable extends React.Component {
9	constructor() {
10	super();	3✔
11	this.state = {	2✔
12	data: [],
13	counts: {all: 0, active: 0, inactive: 0},
14	loading: true,
15	};
16	this.fetchData = this.fetchData.bind(this);	2✔
17	}
18
19	componentDidMount() {
20	this.fetchData();	2✔
21	}
22
23	fetchData() {
24	fetch(Routes.course_instructors_path(this.props.course_id), {	2✔
25	headers: {
26	Accept: "application/json",
27	},
28	})
29	.then(response => {
30	if (response.ok) {	2!
31	return response.json();	2✔
32	}
33	})
34	.then(res => {
35	this.setState({data: res.data, counts: res.counts, loading: false});	2✔
36	});
37	}
38
39	render() {
40	const {data} = this.state;	4✔
41	return (	4✔
42	<ReactTable
43	data={data}
44	columns={[
45	{
46	Header: I18n.t("activerecord.attributes.user.user_name"),
47	accessor: "user_name",
48	},
49	{
50	Header: I18n.t("activerecord.attributes.user.first_name"),
51	accessor: "first_name",
52	},
53	{
54	Header: I18n.t("activerecord.attributes.user.last_name"),
55	accessor: "last_name",
56	},
57	{
58	Header: I18n.t("activerecord.attributes.user.email"),
59	accessor: "email",
60	},
61	{
62	Header: I18n.t("roles.active") + "?",
63	accessor: "hidden",
64	Cell: ({value}) => (value ? I18n.t("roles.inactive") : I18n.t("roles.active")),	2✔
65	filterMethod: (filter, row) => {
66	if (filter.value === "all") {	×
67	return true;	×
68	} else {
69	return (	×
70	(filter.value === "active" && !row[filter.id]) \|\|	×
71	(filter.value === "inactive" && row[filter.id])
72	);
73	}
74	},
75	Filter: selectFilter,
76	filterOptions: [
77	{
78	value: "active",
79	text: `${I18n.t("roles.active")} (${this.state.counts.active})`,
80	},
81	{
82	value: "inactive",
83	text: `${I18n.t("roles.inactive")} (${this.state.counts.inactive})`,
84	},
85	],
86	filterAllOptionText: `${I18n.t("all")} (${this.state.counts.all})`,
87	},
88	{
89	Header: I18n.t("actions"),
90	accessor: "id",
91	Cell: data => (
92	<span>	2✔
93	<a href={Routes.edit_course_instructor_path(this.props.course_id, data.value)}>
94	{I18n.t("edit")}
95	</a>
96	</span>
97	),
98	sortable: false,
99	},
100	]}
101	filterable
102	loading={this.state.loading}
103	/>
104	);
105	}
106	}
107
108	InstructorTable.propTypes = {	1✔
109	course_id: PropTypes.number,
110	};
111
112	function makeInstructorTable(elem, props) {
NEW 113	const root = createRoot(elem);	×
NEW 114	root.render(<InstructorTable {...props} />);	×
115	}
116
117	export {makeInstructorTable, InstructorTable};

MarkUsProject / Markus / 12976781475

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous