10481076447

Committed 21 Aug 2024 12:09AM UTC coverage: 92.336% (-0.2%) from 92.527%

Build # 10481076447

Build Type

push

github

Committed by

caleb531

Commit Message

Convert components to JSX

Also add Prettier and clsx.

Run Details

354 of 385 branches covered (91.95%)

Branch coverage included in aggregate %.

519 of 544 new or added lines in 20 files covered. (95.4%)

1 existing line in 1 file now uncovered.

1935 of 2094 relevant lines covered (92.41%)

441.91 hits per line

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

92.79

/scripts/components/preferences.jsx

import clsx from 'clsx';
import Preferences from '../models/preferences.js';
import CloseButtonComponent from './close-button.jsx';
import ColorSwatchComponent from './color-swatch.jsx';
import DismissableOverlayComponent from './dismissable-overlay.jsx';
import RadioButtonComponent from './radio-button.jsx';

class PreferencesComponent {
  oninit({ attrs: { preferences, onClosePreferences } }) {
    this.preferences = preferences;
    this.onClosePreferences = onClosePreferences;
  }

  savePreference(event) {
    let preferenceValue;
    if (!isNaN(event.target.value)) {
      preferenceValue = Number(event.target.value);
    } else {
      preferenceValue = event.target.value;
    }
    this.preferences.set({
      [event.target.name]: preferenceValue
    });
    this.preferences.save();
  }

  view({ attrs: { preferencesOpen } }) {
    return (
      <div
        className={clsx('app-preferences', {
          'app-preferences-open': preferencesOpen
        })}
        onchange={(event) => this.savePreference(event)}
      >
        <DismissableOverlayComponent
          aria-labelledby="app-preferences-close-control"
          onDismiss={() => this.onClosePreferences()}
        />

        <div className="panel app-preferences-panel">
          <CloseButtonComponent
            id="app-preferences-close-control"
            aria-label="Close Preferences"
            onClose={() => this.onClosePreferences()}
          />

          <h2 className="app-preferences-heading">Preferences</h2>

          {Preferences.preferences.map((preference) => {
            return (
              <div
                className="app-preference"
                data-preference-id={preference.id}
              >
                <label className="app-preference-label">
                  {preference.label}
                </label>
                <p className="app-preference-description">
                  {preference.description}
                </p>
                <div className="app-preference-options">
                  {preference.options.map((option) => {
                    return (
                      <div
                        className={clsx('app-preference-option', {
                          'app-preference-option-selected':
                            this.preferences[preference.id] === option.value
                        })}
                      >
                        <RadioButtonComponent
                          preferences={this.preferences}
                          preference={preference}
                          option={option}
                        />
                        {preference.optionType === 'color' ? (
                          <ColorSwatchComponent
                            preferences={this.preferences}
                            preference={preference}
                            option={option}
                          />
                        ) : null}
                        <label
                          className="app-preference-option-label"
                          htmlFor={`${preference.id}-${option.value}`}
                        >
                          {option.label}
                        </label>
                      </div>
                    );
                  })}
                </div>
                {preference.id === 'reminderInterval' &&
                this.preferences.reminderInterval > 0 &&
                Notification.permission === 'denied' ? (
                  <p className="app-preferences-notification-error">
                    Your web browser is currently blocking WTC reminder
                    notifications. Please refer to
                    <a
                      href="https://help.vwo.com/hc/en-us/articles/360007700494-How-To-Unblock-Notifications-From-A-Website-VWO-Help-"
                      target="_blank"
                    >
                      this article
                    </a>
                    to fix this.
                  </p>
                ) : null}
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

export default PreferencesComponent;

1	import clsx from 'clsx';	3✔
2	import Preferences from '../models/preferences.js';	3✔
3	import CloseButtonComponent from './close-button.jsx';	3✔
4	import ColorSwatchComponent from './color-swatch.jsx';	3✔
5	import DismissableOverlayComponent from './dismissable-overlay.jsx';	3✔
6	import RadioButtonComponent from './radio-button.jsx';	3✔
7
8	class PreferencesComponent {	3✔
9	oninit({ attrs: { preferences, onClosePreferences } }) {	3✔
10	this.preferences = preferences;	45✔
11	this.onClosePreferences = onClosePreferences;	45✔
12	}	45✔
13
14	savePreference(event) {	3✔
15	let preferenceValue;	54✔
16	if (!isNaN(event.target.value)) {	54✔
17	preferenceValue = Number(event.target.value);	45✔
18	} else {	54✔
19	preferenceValue = event.target.value;	9✔
20	}	9✔
21	this.preferences.set({	54✔
22	[event.target.name]: preferenceValue	54✔
23	});	54✔
24	this.preferences.save();	54✔
25	}	54✔
26
27	view({ attrs: { preferencesOpen } }) {	3✔
28	return (	145✔
29	<div	145✔
30	className={clsx('app-preferences', {	145✔
31	'app-preferences-open': preferencesOpen	145✔
32	})}	145✔
33	onchange={(event) => this.savePreference(event)}	145✔
34	>
35	<DismissableOverlayComponent	145✔
36	aria-labelledby="app-preferences-close-control"	145✔
37	onDismiss={() => this.onClosePreferences()}	145✔
38	/>	145✔
39
40	<div className="panel app-preferences-panel">	145✔
41	<CloseButtonComponent	145✔
42	id="app-preferences-close-control"	145✔
43	aria-label="Close Preferences"	145✔
44	onClose={() => this.onClosePreferences()}	145✔
45	/>	145✔
46
47	<h2 className="app-preferences-heading">Preferences</h2>	145✔
48
49	{Preferences.preferences.map((preference) => {	145✔
50	return (	725✔
51	<div	725✔
52	className="app-preference"	725✔
53	data-preference-id={preference.id}	725✔
54	>
55	<label className="app-preference-label">	725✔
56	{preference.label}	725✔
57	</label>	725✔
58	<p className="app-preference-description">	725✔
59	{preference.description}	725✔
60	</p>	725✔
61	<div className="app-preference-options">	725✔
62	{preference.options.map((option) => {	725✔
63	return (	2,465✔
64	<div	2,465✔
65	className={clsx('app-preference-option', {	2,465✔
66	'app-preference-option-selected':	2,465✔
67	this.preferences[preference.id] === option.value	2,465✔
68	})}	2,465✔
69	>
70	<RadioButtonComponent	2,465✔
71	preferences={this.preferences}	2,465✔
72	preference={preference}	2,465✔
73	option={option}	2,465✔
74	/>	2,465✔
75	{preference.optionType === 'color' ? (	2,465✔
76	<ColorSwatchComponent	725✔
77	preferences={this.preferences}	725✔
78	preference={preference}	725✔
79	option={option}	725✔
80	/>	725✔
81	) : null}	1,740✔
82	<label	2,465✔
83	className="app-preference-option-label"	2,465✔
84	htmlFor={`${preference.id}-${option.value}`}	2,465✔
85	>
86	{option.label}	2,465✔
87	</label>	2,465✔
88	</div>	2,465✔
89	);
90	})}	725✔
91	</div>	725✔
92	{preference.id === 'reminderInterval' &&	725✔
93	this.preferences.reminderInterval > 0 &&	145✔
94	Notification.permission === 'denied' ? (	36!
NEW 95	<p className="app-preferences-notification-error">	×
96	Your web browser is currently blocking WTC reminder
97	notifications. Please refer to
NEW 98	<a	×
NEW 99	href="https://help.vwo.com/hc/en-us/articles/360007700494-How-To-Unblock-Notifications-From-A-Website-VWO-Help-"	×
NEW 100	target="_blank"	×
NEW 101	>	×
102	this article
NEW 103	</a>	×
104	to fix this.
NEW 105	</p>	×
106	) : null}	725✔
107	</div>	725✔
108	);
109	})}	145✔
110	</div>	145✔
111	</div>	145✔
112	);
113	}	145✔
114	}	3✔
115
116	export default PreferencesComponent;	3✔

caleb531 / workday-time-calculator / 10481076447

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