Ran prettier on *.js, *.jsx and *.md files. (#11586)

2020-11-23 20:45:50 -05:00 · 2020-11-23 20:45:50 -05:00 · bf7780cd2c
commit bf7780cd2c
parent 44569605d2
46 changed files with 210 additions and 209 deletions
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@ -12,4 +12,4 @@
 //
 //= require jquery
 //= require jquery_ujs
-//= require_tree .
+//= require_tree .
--- a/app/assets/javascripts/initializers/initializeAllTagEditButtons.js
+++ b/app/assets/javascripts/initializers/initializeAllTagEditButtons.js
@ -11,7 +11,8 @@ function initializeAllTagEditButtons() {
  if (
    user &&
    tagEditButton &&
-    (user.moderator_for_tags.indexOf(tagEditButton.dataset.tag) > -1 || user.admin)
+    (user.moderator_for_tags.indexOf(tagEditButton.dataset.tag) > -1 ||
+      user.admin)
  ) {
    tagEditButton.style.display = 'inline-block';
    document.getElementById('tag-mod-button').style.display = 'inline-block';
--- a/app/assets/javascripts/initializers/initializeArticleDate.js
+++ b/app/assets/javascripts/initializers/initializeArticleDate.js
@ -1,5 +1,3 @@
-
-
 /* Show article date/time according to user's locale */
 /* global addLocalizedDateTimeToElementsTitles */

--- a/app/assets/javascripts/initializers/initializeBodyData.js
+++ b/app/assets/javascripts/initializers/initializeBodyData.js
@ -1,4 +1,3 @@
-
 /* global checkUserLoggedIn */

 function removeExistingCSRF() {
--- a/app/assets/javascripts/initializers/initializeEllipsisMenu.js
+++ b/app/assets/javascripts/initializers/initializeEllipsisMenu.js
@ -47,9 +47,7 @@ function onXhrSuccess(form, article, values) {
    toggleNotifications(submit, submitValue);
  }

-  article
-    .getElementsByClassName('js-ellipsis-menu')[0]
-    .classList.add('hidden');
+  article.getElementsByClassName('js-ellipsis-menu')[0].classList.add('hidden');
 }

 function handleFormSubmit(e) {
--- a/app/assets/javascripts/initializers/initializePWAFunctionality.js
+++ b/app/assets/javascripts/initializers/initializePWAFunctionality.js
@ -1,19 +1,22 @@
 'use strict';

 function initializePWAFunctionality() {
-  if (window.matchMedia('(display-mode: standalone)').matches || window.frameElement) {
+  if (
+    window.matchMedia('(display-mode: standalone)').matches ||
+    window.frameElement
+  ) {
    document
      .getElementById('pwa-nav-buttons')
      .classList.add('pwa-nav-buttons--showing');
-    document.getElementById('app-back-button').onclick = e => {
+    document.getElementById('app-back-button').onclick = (e) => {
      e.preventDefault();
      window.history.back();
    };
-    document.getElementById('app-forward-button').onclick = e => {
+    document.getElementById('app-forward-button').onclick = (e) => {
      e.preventDefault();
      window.history.forward();
    };
-    document.getElementById('app-refresh-button').onclick = e => {
+    document.getElementById('app-refresh-button').onclick = (e) => {
      e.preventDefault();
      window.location.reload();
    };
--- a/app/assets/javascripts/initializers/initializeTimeFixer.js
+++ b/app/assets/javascripts/initializers/initializeTimeFixer.js
@ -57,12 +57,12 @@ function initializeTimeFixer() {
  updateLocalDateTime(
    utcTime,
    convertUtcTime,
-    element => element.dataset.datetime,
+    (element) => element.dataset.datetime,
  );
  updateLocalDateTime(
    utcDate,
    convertUtcDate,
-    element => element.dataset.datetime,
+    (element) => element.dataset.datetime,
  );
-  updateLocalDateTime(utc, convertCalEvent, element => element.innerHTML);
+  updateLocalDateTime(utc, convertCalEvent, (element) => element.innerHTML);
 }
--- a/app/assets/javascripts/jquery_s3_upload.js
+++ b/app/assets/javascripts/jquery_s3_upload.js
@ -1 +1 @@
-//= require s3_direct_upload
+//= require s3_direct_upload
--- a/app/assets/javascripts/serviceworker-companion.js
+++ b/app/assets/javascripts/serviceworker-companion.js
@ -6,16 +6,16 @@ if ('serviceWorker' in navigator) {
    .then(function swStart(registration) {
      // registered!
    })
-    .catch(error => {
+    .catch((error) => {
      // eslint-disable-next-line no-console
      console.log('ServiceWorker registration failed: ', error);
    });
 }

-window.addEventListener('beforeinstallprompt', e => {
+window.addEventListener('beforeinstallprompt', (e) => {
  // beforeinstallprompt Event fired
  // e.userChoice will return a Promise.
-  e.userChoice.then(choiceResult => {
+  e.userChoice.then((choiceResult) => {
    ga('send', 'event', 'PWA-install', choiceResult.outcome);
  });
 });
--- a/app/assets/javascripts/utilities/dynamicallyLoadScript.js
+++ b/app/assets/javascripts/utilities/dynamicallyLoadScript.js
@ -1,5 +1,3 @@
-
-
 function dynamicallyLoadScript(url) {
  if (document.querySelector(`script[src='${url}']`)) return;

--- a/app/assets/javascripts/utilities/sendFetch.js
+++ b/app/assets/javascripts/utilities/sendFetch.js
@ -1,7 +1,7 @@
 'use strict';

 const fetchCallback = ({ url, headers = {}, addTokenToBody = false, body }) => {
-  return csrfToken => {
+  return (csrfToken) => {
    if (addTokenToBody) {
      body.append('authenticity_token', csrfToken);
    }
--- a/app/assets/javascripts/utilities/timeAgo.js
+++ b/app/assets/javascripts/utilities/timeAgo.js
@ -38,7 +38,7 @@ function secondsToHumanUnitAgo(seconds) {
 */
 function timeAgo({
  oldTimeInSeconds,
-  formatter = humanTime =>
+  formatter = (humanTime) =>
    `<span class="time-ago-indicator">(${humanTime})</span>`,
  maxDisplayedAge = 60 * 60 * 24 - 1,
 }) {
--- a/app/javascript/analytics/dashboard.js
+++ b/app/javascript/analytics/dashboard.js
@ -60,7 +60,7 @@ function drawChart({ canvas, title, labels, datasets }) {
    },
  };

-  import("chart.js").then(({ Chart }) => {
+  import('chart.js').then(({ Chart }) => {
    // eslint-disable-next-line no-new
    new Chart(canvas, {
      type: 'line',
@ -75,14 +75,14 @@ function drawChart({ canvas, title, labels, datasets }) {

 function drawCharts(data, timeRangeLabel) {
  const labels = Object.keys(data);
-  const parsedData = Object.entries(data).map(date => date[1]);
-  const comments = parsedData.map(date => date.comments.total);
-  const reactions = parsedData.map(date => date.reactions.total);
-  const likes = parsedData.map(date => date.reactions.like);
-  const readingList = parsedData.map(date => date.reactions.readinglist);
-  const unicorns = parsedData.map(date => date.reactions.unicorn);
-  const followers = parsedData.map(date => date.follows.total);
-  const readers = parsedData.map(date => date.page_views.total);
+  const parsedData = Object.entries(data).map((date) => date[1]);
+  const comments = parsedData.map((date) => date.comments.total);
+  const reactions = parsedData.map((date) => date.reactions.total);
+  const likes = parsedData.map((date) => date.reactions.like);
+  const readingList = parsedData.map((date) => date.reactions.readinglist);
+  const unicorns = parsedData.map((date) => date.reactions.unicorn);
+  const followers = parsedData.map((date) => date.follows.total);
+  const readers = parsedData.map((date) => date.page_views.total);

  drawChart({
    canvas: document.getElementById('reactions-chart'),
@ -169,8 +169,8 @@ function drawCharts(data, timeRangeLabel) {
 function renderReferrers(data) {
  const container = document.getElementById('referrers-container');
  const tableBody = data.domains
-    .filter(referrer => referrer.domain)
-    .map(referrer => {
+    .filter((referrer) => referrer.domain)
+    .map((referrer) => {
      return `
      <tr>
        <td>${referrer.domain}</td>
@ -181,7 +181,7 @@ function renderReferrers(data) {

  // add referrers with empty domains if present
  const emptyDomainReferrer = data.domains.filter(
-    referrer => !referrer.domain,
+    (referrer) => !referrer.domain,
  )[0];
  if (emptyDomainReferrer) {
    tableBody.push(`
@ -196,12 +196,12 @@ function renderReferrers(data) {
 }

 function callAnalyticsAPI(date, timeRangeLabel, { organizationId, articleId }) {
-  callHistoricalAPI(date, { organizationId, articleId }, data => {
+  callHistoricalAPI(date, { organizationId, articleId }, (data) => {
    writeCards(data, timeRangeLabel);
    drawCharts(data, timeRangeLabel);
  });

-  callReferrersAPI(date, { organizationId, articleId }, data => {
+  callReferrersAPI(date, { organizationId, articleId }, (data) => {
    renderReferrers(data);
  });
 }
--- a/app/javascript/article-form/articleForm.jsx
+++ b/app/javascript/article-form/articleForm.jsx
@ -7,13 +7,7 @@ import { submitArticle, previewArticle } from './actions';

 /* global activateRunkitTags */

-import {
-  EditorActions,
-  Form,
-  Header,
-  Help,
-  Preview,
-} from './components';
+import { EditorActions, Form, Header, Help, Preview } from './components';

 /*
  Although the state fields: id, description, canonicalUrl, series, allSeries and
@ -361,9 +355,11 @@ export default class ArticleForm extends Component {
          submitting={submitting}
        />

-        <KeyboardShortcuts shortcuts={{
-          "ctrl+shift+KeyP": this.fetchPreview,
-        }} />
+        <KeyboardShortcuts
+          shortcuts={{
+            'ctrl+shift+KeyP': this.fetchPreview,
+          }}
+        />
      </form>
    );
  }
--- a/app/javascript/article-form/components/ErrorList.jsx
+++ b/app/javascript/article-form/components/ErrorList.jsx
@ -3,7 +3,10 @@ import PropTypes from 'prop-types';

 export const ErrorList = ({ errors }) => {
  return (
-    <div data-testid="error-message" className="crayons-notice crayons-notice--danger mb-6">
+    <div
+      data-testid="error-message"
+      className="crayons-notice crayons-notice--danger mb-6"
+    >
      <h3 className="fs-l mb-2 fw-bold">Whoops, something went wrong:</h3>
      <ul className="list-disc pl-6">
        {Object.keys(errors).map((key) => {
--- a/app/javascript/article-form/components/Help.jsx
+++ b/app/javascript/article-form/components/Help.jsx
@ -75,8 +75,8 @@ export class Help extends Component {
            post.
          </li>
          <li>
-            Add up to four comma-separated tags per post. Combine tags to reach the appropriate
-            subcommunities.
+            Add up to four comma-separated tags per post. Combine tags to reach
+            the appropriate subcommunities.
          </li>
          <li>Use existing tags whenever possible.</li>
          <li>
--- a/app/javascript/article-form/components/PageTitle.jsx
+++ b/app/javascript/article-form/components/PageTitle.jsx
@ -2,7 +2,7 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 import { OrganizationPicker } from '../../organization/OrganizationPicker';

-export const PageTitle = ({organizations, organizationId, onToggle}) => {
+export const PageTitle = ({ organizations, organizationId, onToggle }) => {
  return (
    <div className="crayons-field__label flex items-center flex-1">
      <span className="hidden s:inline-block mr-2 whitespace-nowrap">
--- a/app/javascript/article-form/components/Tabs.jsx
+++ b/app/javascript/article-form/components/Tabs.jsx
@ -26,7 +26,6 @@ export const Tabs = ({ onPreview, previewShowing }) => {
  );
 };

-
 Tabs.propTypes = {
  previewShowing: PropTypes.bool.isRequired,
  onPreview: PropTypes.func.isRequired,
--- a/app/javascript/article-form/components/dragAndDropHelpers.js
+++ b/app/javascript/article-form/components/dragAndDropHelpers.js
@ -48,9 +48,7 @@ export function handleImageDrop(handleImageSuccess, handleImageFailure) {
 */
 export function onDragOver(event) {
  event.preventDefault();
-  event.currentTarget
-    .closest('.drop-area')
-    .classList.add('drop-area--active');
+  event.currentTarget.closest('.drop-area').classList.add('drop-area--active');
 }

 /**
--- a/app/javascript/articles/Feed.jsx
+++ b/app/javascript/articles/Feed.jsx
@ -137,7 +137,7 @@ export const Feed = ({ timeFrame, renderFeed }) => {
    'a.crayons-story__hidden-navigation-link',
    'div.paged-stories',
  );
-  
+
  useKeyboardShortcuts({
    b: (event) => {
      const article = event.target?.closest('article.crayons-story');
--- a/app/javascript/articles/tests/utilities/articleUtilities.js
+++ b/app/javascript/articles/tests/utilities/articleUtilities.js
@ -266,7 +266,7 @@ export const podcastArticle = {
    image_url: '/images/16.png',
    image_90: '/images/16.png',
  },
-  slug: 'episode-slug'
+  slug: 'episode-slug',
 };

 export const podcastEpisodeArticle = {
--- a/app/javascript/articles/components/CommentsCount.jsx
+++ b/app/javascript/articles/components/CommentsCount.jsx
@ -25,7 +25,7 @@ export const CommentsCount = ({ count, articlePath }) => {
        tagName="a"
      >
        <span title="Number of comments">
-          {count} 
+          {count}
          <span className="hidden s:inline">
            &nbsp;
            {`${count > 1 ? 'comments' : 'comment'}`}
--- a/app/javascript/chat/ChatChannelSettings/ChannelDescriptionSection.jsx
+++ b/app/javascript/chat/ChatChannelSettings/ChannelDescriptionSection.jsx
@ -4,25 +4,21 @@ import PropTypes from 'prop-types';
 const ChannelDescriptionSection = ({
  channelName,
  channelDescription,
-  currentMembershipRole
+  currentMembershipRole,
 }) => {
  return (
    <div className="p-4 grid gap-2 crayons-card mb-4 channel_details">
      <h1 className="mb-1 channel_title">{channelName}</h1>
      <p>{channelDescription}</p>
-      <p className="fw-bold">
-        You are a channel 
-        {' '}
-        {currentMembershipRole}
-      </p>
+      <p className="fw-bold">You are a channel {currentMembershipRole}</p>
    </div>
-  )
-}
+  );
+};

 ChannelDescriptionSection.propTypes = {
-    channelName: PropTypes.string.isRequired,
-    currentMembershipRole: PropTypes.string.isRequired,
-    channelDescription: PropTypes.string.isRequired
-}
+  channelName: PropTypes.string.isRequired,
+  currentMembershipRole: PropTypes.string.isRequired,
+  channelDescription: PropTypes.string.isRequired,
+};

 export default ChannelDescriptionSection;
--- a/app/javascript/chat/tests/chat.test.jsx
+++ b/app/javascript/chat/tests/chat.test.jsx
@ -168,9 +168,7 @@ describe('<Chat />', () => {

  it('should have no a11y violations', async () => {
    fetch.mockResponse(getMockResponse());
-    const { container } = render(
-      <Chat {...getRootData()} />,
-    );
+    const { container } = render(<Chat {...getRootData()} />);
    const results = await axe(container);

    expect(results).toHaveNoViolations();
@ -211,9 +209,7 @@ describe('<Chat />', () => {

  it('should collapse and expand chat channels properly', async () => {
    fetch.mockResponse(getMockResponse());
-    const { queryByText } = render(
-      <Chat {...getRootData()} />,
-    );
+    const { queryByText } = render(<Chat {...getRootData()} />);

    // // chat channels
    expect(
--- a/app/javascript/chat/tests/chatChannelSettings.test.jsx
+++ b/app/javascript/chat/tests/chatChannelSettings.test.jsx
@ -9,9 +9,7 @@ import ChatChannelSettings from '../ChatChannelSettings/ChatChannelSettings';
 describe('<ChatChannelSettings />', () => {
  it('should have no a11y violations', async () => {
    const { container } = render(
-      <ChatChannelSettings
-        activeMembershipId={12}
-      />,
+      <ChatChannelSettings activeMembershipId={12} />,
    );
    const results = await axe(container);

@ -20,9 +18,7 @@ describe('<ChatChannelSettings />', () => {

  it('should render if there are no channels', () => {
    const { container } = render(
-      <ChatChannelSettings
-        activeMembershipId={12}
-      />,
+      <ChatChannelSettings activeMembershipId={12} />,
    );

    expect(container.firstElementChild).toBeNull();
--- a/app/javascript/chat/tests/content.test.jsx
+++ b/app/javascript/chat/tests/content.test.jsx
@ -37,9 +37,7 @@ describe('<Content />', () => {
    it('should have no a11y violations', async () => {
      const channelRequestResource = getChannelRequestData();
      const { container } = render(
-        <Content
-          resource={channelRequestResource}
-        />,
+        <Content resource={channelRequestResource} />,
      );
      const results = await axe(container);

@ -49,9 +47,7 @@ describe('<Content />', () => {
    it('should render', () => {
      const channelRequestResource = getChannelRequestData();
      const { queryByText, queryByTitle } = render(
-        <Content
-          resource={channelRequestResource}
-        />,
+        <Content resource={channelRequestResource} />,
      );

      // Ensure the two buttons render
--- a/app/javascript/crayons/typography/stories/typographyAccented.stories.jsx
+++ b/app/javascript/crayons/typography/stories/typographyAccented.stories.jsx
@ -23,7 +23,9 @@ export const SampleTexts = () => (
    <div>
      <p className="ff-monospace fs-xs fw-bold">Lorem ipsum dolor sit amet.</p>
      <p className="ff-monospace fs-s fw-bold">Lorem ipsum dolor sit amet.</p>
-      <p className="ff-monospace fs-base fw-bold">Lorem ipsum dolor sit amet.</p>
+      <p className="ff-monospace fs-base fw-bold">
+        Lorem ipsum dolor sit amet.
+      </p>
      <p className="ff-monospace fs-l fw-bold">Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
--- a/app/javascript/listings/components/MessageModal.jsx
+++ b/app/javascript/listings/components/MessageModal.jsx
@ -36,9 +36,7 @@ const MessageModal = ({
        className="crayons-textfield mb-0"
        placeholder="Enter your message here..."
      />
-      <p
-        className="mb-4 fs-s color-base-60"
-      >
+      <p className="mb-4 fs-s color-base-60">
        {isCurrentUserOnListing &&
          'Message must be relevant and on-topic with the listing.'}
        All private interactions <b>must</b> abide by the{' '}
--- a/app/javascript/listings/components/SelectedTags.jsx
+++ b/app/javascript/listings/components/SelectedTags.jsx
@ -5,8 +5,16 @@ const SelectedTags = ({ tags, onRemoveTag, onKeyPress }) => {
  return (
    <section class="pt-2">
      {tags.map((tag) => (
-        <span className="listing-tag mr-1" key={tag.id} id={`selected-tag-${tag}`}>
-          <a href={`/listings?t=${tag}`} className="tag-name crayons-tag" data-no-instant>
+        <span
+          className="listing-tag mr-1"
+          key={tag.id}
+          id={`selected-tag-${tag}`}
+        >
+          <a
+            href={`/listings?t=${tag}`}
+            className="tag-name crayons-tag"
+            data-no-instant
+          >
            <span className="crayons-tag__prefix">#</span>
            <span role="button" tabIndex="0">
              {tag}
--- a/app/javascript/listings/dashboard/rowElements/tags.jsx
+++ b/app/javascript/listings/dashboard/rowElements/tags.jsx
@ -2,24 +2,17 @@ import PropTypes from 'prop-types';
 import { h } from 'preact';

 const Tags = ({ tagList }) => {
-  const tagLinks = tagList.map(tag => (
+  const tagLinks = tagList.map((tag) => (
    <a href={`/listings?t=${tag}`} data-no-instant>
-      #
-      {tag}
-      {' '}
+      #{tag}{' '}
    </a>
  ));

-  return (
-    <span className="dashboard-listing-tags">
-      {tagLinks} 
-    </span> 
-  )
-}
-
+  return <span className="dashboard-listing-tags">{tagLinks}</span>;
+};

 Tags.propTypes = {
  tagList: PropTypes.arrayOf(PropTypes.string).isRequired,
-}
+};

-export default Tags;
+export default Tags;
--- a/app/javascript/listings/listingDashboard.jsx
+++ b/app/javascript/listings/listingDashboard.jsx
@ -163,8 +163,7 @@ export class ListingDashboard extends Component {
        </h4>
      ) : (
        <h4>
-          Listings Made:
-          {' '}
+          Listings Made:{' '}
          {
            organizationListings.filter(
              (listing) => listing.organization_id === selected,
@ -182,8 +181,7 @@ export class ListingDashboard extends Component {
        </h4>
      ) : (
        <h4>
-          Credits Available:
-          {' '}
+          Credits Available:{' '}
          {
            organizations.find((org) => org.id === selected)
              .unspent_credits_count
--- a/app/javascript/listings/singleListing/AuthorInfo.jsx
+++ b/app/javascript/listings/singleListing/AuthorInfo.jsx
@ -42,12 +42,9 @@ const AuthorInfo = ({ listing, onCategoryClick }) => {
          className="crayons-avatar__image"
        />
      </a>
-      
+
      <div>
-        <a
-          href={`/${username}`}
-          className="crayons-link fw-medium"
-        >
+        <a href={`/${username}`} className="crayons-link fw-medium">
          {name}
        </a>
        <p className="fs-xs">
--- a/app/javascript/listings/singleListing/DropdownMenu.jsx
+++ b/app/javascript/listings/singleListing/DropdownMenu.jsx
@ -64,7 +64,10 @@ class DropdownMenu extends Component {
    const reportUrl = `/report-abuse?url=https://dev.to/listings/${category}/${slug}`;

    return (
-      <div className="single-listing__dropdown absolute right-0 top-0" ref={this.componentRef}>
+      <div
+        className="single-listing__dropdown absolute right-0 top-0"
+        ref={this.componentRef}
+      >
        <Button
          variant="ghost"
          contentType="icon"
--- a/app/javascript/listings/singleListing/SingleListing.jsx
+++ b/app/javascript/listings/singleListing/SingleListing.jsx
@ -6,8 +6,13 @@ import AuthorInfo from './AuthorInfo';
 import listingPropTypes from './listingPropTypes';

 export class SingleListing extends Component {
-
-  listingContent = (listing, currentUserId, onChangeCategory, onOpenModal, onAddTag) => {
+  listingContent = (
+    listing,
+    currentUserId,
+    onChangeCategory,
+    onOpenModal,
+    onAddTag,
+  ) => {
    return (
      <div className="relative">
        <Header
@ -25,7 +30,13 @@ export class SingleListing extends Component {
    );
  };

-  listingInline = (listing, currentUserId, onChangeCategory, onOpenModal, onAddTag) => {
+  listingInline = (
+    listing,
+    currentUserId,
+    onChangeCategory,
+    onOpenModal,
+    onAddTag,
+  ) => {
    return (
      <div
        className="single-listing relative crayons-card"
@ -38,14 +49,20 @@ export class SingleListing extends Component {
            currentUserId,
            onChangeCategory,
            onOpenModal,
-            onAddTag
+            onAddTag,
          )}
        </div>
      </div>
    );
  };

-  listingModal = (listing, currentUserId, onChangeCategory, onOpenModal, onAddTag) => {
+  listingModal = (
+    listing,
+    currentUserId,
+    onChangeCategory,
+    onOpenModal,
+    onAddTag,
+  ) => {
    return (
      <div
        className="single-listing relative"
@ -66,25 +83,29 @@ export class SingleListing extends Component {
  };

  render() {
-    const { listing, currentUserId, onChangeCategory, onOpenModal, isOpen, onAddTag } = this.props;
-    return (
-      isOpen ?
-        this.listingModal(
+    const {
+      listing,
+      currentUserId,
+      onChangeCategory,
+      onOpenModal,
+      isOpen,
+      onAddTag,
+    } = this.props;
+    return isOpen
+      ? this.listingModal(
          listing,
          currentUserId,
          onChangeCategory,
          onOpenModal,
-          onAddTag
+          onAddTag,
        )
-        :
-        this.listingInline(
+      : this.listingInline(
          listing,
          currentUserId,
          onChangeCategory,
          onOpenModal,
-          onAddTag
-        )
-    );
+          onAddTag,
+        );
  }
 }

@ -94,7 +115,7 @@ SingleListing.propTypes = {
  onChangeCategory: PropTypes.func.isRequired,
  isOpen: PropTypes.bool.isRequired,
  currentUserId: PropTypes.number,
-  onAddTag: PropTypes.func.isRequired
+  onAddTag: PropTypes.func.isRequired,
 };

 SingleListing.defaultProps = {
--- a/app/javascript/packs/Chat.jsx
+++ b/app/javascript/packs/Chat.jsx
@ -1,4 +1,3 @@
-
 import { h, render } from 'preact';
 import Chat from '../chat/chat';
 import { Snackbar } from '../Snackbar/Snackbar';
--- a/app/javascript/packs/clipboardCopy.js
+++ b/app/javascript/packs/clipboardCopy.js
@ -1,4 +1,4 @@
-HTMLDocument.prototype.ready = new Promise(resolve => {
+HTMLDocument.prototype.ready = new Promise((resolve) => {
  if (document.readyState !== 'loading') {
    return resolve();
  }
@ -13,13 +13,11 @@ document.ready.then(() => {
    !navigator.clipboard &&
    !navigator.Clipboard
  ) {
-    import('clipboard-polyfill').then(module => {
+    import('clipboard-polyfill').then((module) => {
      window.clipboard = module;
    });
  }
 });

-
-
 // import('@github/clipboard-copy-element');
-// Temporarily removed due to problems
+// Temporarily removed due to problems
--- a/app/javascript/packs/colorPreview.js
+++ b/app/javascript/packs/colorPreview.js
@ -1,44 +1,43 @@
-
 function initPreview() {
  const colorField = {
    // input type="color"
    bgColor: document.getElementById('bg-color-colorfield'),
    textColor: document.getElementById('text-color-colorfield'),
  };
-  
+
  const textField = {
    // input type="text"
    bgColor: document.getElementById('bg-color-textfield'),
    textColor: document.getElementById('text-color-textfield'),
  };
-  
+
  const preview = document.getElementById('color-select-preview-logo');
-  
+
  // Assigns input[type='text'] values to input[type='color']
  function updateColorFields() {
    colorField.bgColor.value = textField.bgColor.value;
    colorField.textColor.value = textField.textColor.value;
  }
-  
+
  // Updating text fields when color fields are changed
  function updateTextFields() {
    textField.bgColor.value = colorField.bgColor.value;
    textField.textColor.value = colorField.textColor.value;
  }
-  
+
  // Updates Preview Colors
  function updatePreview() {
    preview.style.backgroundColor = textField.bgColor.value;
    preview.style.fill = textField.textColor.value;
  }
-  
+
  // Event Watchers
  // When color fields change -> updateTextField values and refresh preview
  function watchColorFields() {
    updateTextFields();
    updatePreview();
  }
-  
+
  // When text fields change -> updateColorField values and refresh preview
  function watchTextFields(e) {
    if (e.target.value.match(/#[0-9a-f]{6}/gi)) {
@ -46,7 +45,7 @@ function initPreview() {
      updatePreview();
    }
  }
-  
+
  if (preview) {
    // Event Listeners
    colorField.bgColor.addEventListener('input', watchColorFields);
--- a/app/javascript/packs/sidebarWidget.jsx
+++ b/app/javascript/packs/sidebarWidget.jsx
@ -1,7 +1,7 @@
 import { h, render } from 'preact';
 import SidebarWidget from '../sidebar-widget/SidebarWidget';

-HTMLDocument.prototype.ready = new Promise(resolve => {
+HTMLDocument.prototype.ready = new Promise((resolve) => {
  if (document.readyState !== 'loading') {
    return resolve();
  }
--- a/app/javascript/packs/webShare.js
+++ b/app/javascript/packs/webShare.js
@ -1,3 +1,3 @@
 /* eslint no-unused-vars: ["error", { "argsIgnorePattern": "_" }] */
 // import 'web-share-wrapper';
-// Temporarily removed due to problems.
+// Temporarily removed due to problems.
--- a/app/javascript/podcasts/PodcastFeed.jsx
+++ b/app/javascript/podcasts/PodcastFeed.jsx
@ -2,7 +2,7 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';

 export const PodcastFeed = ({ podcastItems }) => {
-  const podcastItemDivs = podcastItems.map(ep => (
+  const podcastItemDivs = podcastItems.map((ep) => (
    <a
      className="individual-podcast-link"
      href={`/${ep.podcast.slug}/${ep.slug}`}
--- a/app/javascript/readingList/components/ItemListLoadMoreButton.jsx
+++ b/app/javascript/readingList/components/ItemListLoadMoreButton.jsx
@ -10,7 +10,9 @@ export const ItemListLoadMoreButton = ({ show, onClick }) => {

  return (
    <div>
-      <Button onClick={onClick} className="w-100" variant="secondary">Load more</Button>
+      <Button onClick={onClick} className="w-100" variant="secondary">
+        Load more
+      </Button>
    </div>
  );
 };
--- a/app/javascript/readingList/components/ItemListTags.jsx
+++ b/app/javascript/readingList/components/ItemListTags.jsx
@ -15,7 +15,11 @@ export const ItemListTags = ({ availableTags, selectedTags, onClick }) => {
      {`#${tag}`}
    </a>
  ));
-  return <nav className="crayons-layout__sidebar-left" data-testid="tags">{tagsHTML}</nav>;
+  return (
+    <nav className="crayons-layout__sidebar-left" data-testid="tags">
+      {tagsHTML}
+    </nav>
+  );
 };

 ItemListTags.propTypes = {
--- a/app/javascript/shared/components/tests/useKeyboardShortcuts.test.jsx
+++ b/app/javascript/shared/components/tests/useKeyboardShortcuts.test.jsx
@ -1,92 +1,84 @@
 import { h } from 'preact';
 import { renderHook } from '@testing-library/preact-hooks';
 import { fireEvent, render } from '@testing-library/preact';
-import { KeyboardShortcuts, useKeyboardShortcuts } from '../useKeyboardShortcuts';
+import {
+  KeyboardShortcuts,
+  useKeyboardShortcuts,
+} from '../useKeyboardShortcuts';

 describe('Keyboard shortcuts for components', () => {
  describe('useKeyboardShortcuts', () => {
    it('should fire a function when keydown is detected', () => {
      const shortcut = {
-        KeyK: jest.fn()
+        KeyK: jest.fn(),
      };

-      renderHook(() =>
-        useKeyboardShortcuts(shortcut, document),
-      );
-      fireEvent.keyDown(document, { code: "KeyK" });
+      renderHook(() => useKeyboardShortcuts(shortcut, document));
+      fireEvent.keyDown(document, { code: 'KeyK' });

      expect(shortcut.KeyK).toHaveBeenCalledTimes(1);
    });
-    
+
    it('should fire a function when chained keydown is detected', () => {
      const shortcut = {
-        "KeyA~KeyB": jest.fn()
+        'KeyA~KeyB': jest.fn(),
      };

-      renderHook(() =>
-        useKeyboardShortcuts(shortcut, document),
-      );
-      fireEvent.keyDown(document, { code: "KeyA" });
-      fireEvent.keyDown(document, { code: "KeyB" });
+      renderHook(() => useKeyboardShortcuts(shortcut, document));
+      fireEvent.keyDown(document, { code: 'KeyA' });
+      fireEvent.keyDown(document, { code: 'KeyB' });

-      expect(shortcut["KeyA~KeyB"]).toHaveBeenCalledTimes(1);
+      expect(shortcut['KeyA~KeyB']).toHaveBeenCalledTimes(1);
    });
-    
+
    it('should not fire a function when chained keydown is missed, timeout should only be 0ms', async () => {
      const shortcut = {
-        "KeyA~KeyB": jest.fn()
+        'KeyA~KeyB': jest.fn(),
      };
-      
+
      const timeout = 0;

-      renderHook(() =>
-        useKeyboardShortcuts(shortcut, document, { timeout }),
-      );
-      fireEvent.keyDown(document, { code: "KeyA" });
-      
-      await new Promise(resolve => setTimeout(() => {
-        fireEvent.keyDown(document, { code: "KeyB" });
-        resolve();
-      }, 25));
+      renderHook(() => useKeyboardShortcuts(shortcut, document, { timeout }));
+      fireEvent.keyDown(document, { code: 'KeyA' });

-      expect(shortcut["KeyA~KeyB"]).not.toHaveBeenCalled();
+      await new Promise((resolve) =>
+        setTimeout(() => {
+          fireEvent.keyDown(document, { code: 'KeyB' });
+          resolve();
+        }, 25),
+      );
+
+      expect(shortcut['KeyA~KeyB']).not.toHaveBeenCalled();
    });
-    
+
    it('should not add event listener if shortcut object is empty', () => {
      HTMLDocument.prototype.addEventListener = jest.fn();

-      renderHook(() =>
-        useKeyboardShortcuts({}, document),
-      );
+      renderHook(() => useKeyboardShortcuts({}, document));

      expect(HTMLDocument.prototype.addEventListener).not.toHaveBeenCalled();
    });

    it('should add event listener to window', () => {
      HTMLDocument.prototype.addEventListener = jest.fn();
-      
-      const shortcut = {
-        KeyK: null
-      }

-      renderHook(() =>
-        useKeyboardShortcuts(shortcut, document),
-      );
+      const shortcut = {
+        KeyK: null,
+      };
+
+      renderHook(() => useKeyboardShortcuts(shortcut, document));

      expect(HTMLDocument.prototype.addEventListener).toHaveBeenCalledTimes(1);
    });

    it('should not fire a function when keydown is detected in element', () => {
      const shortcut = {
-        KeyK: jest.fn()
+        KeyK: jest.fn(),
      };
-      const eventTarget = document.createElement('textarea') // eventTarget set since the default is window
+      const eventTarget = document.createElement('textarea'); // eventTarget set since the default is window

-      renderHook(() =>
-        useKeyboardShortcuts(shortcut, document),
-        eventTarget,
-      );
-      fireEvent.keyDown(eventTarget, { code: "KeyK" });
+      renderHook(() => useKeyboardShortcuts(shortcut, document), eventTarget);
+      fireEvent.keyDown(eventTarget, { code: 'KeyK' });

      expect(shortcut.KeyK).not.toHaveBeenCalled();
    });
@ -94,10 +86,10 @@ describe('Keyboard shortcuts for components', () => {
    it('should remove event listener when the hook is unmounted', () => {
      HTMLDocument.prototype.addEventListener = jest.fn();
      HTMLDocument.prototype.removeEventListener = jest.fn();
-      
+
      const shortcut = {
-        KeyK: null
-      }
+        KeyK: null,
+      };

      const { unmount } = renderHook(() =>
        useKeyboardShortcuts(shortcut, document),
@ -106,7 +98,9 @@ describe('Keyboard shortcuts for components', () => {
      unmount();

      expect(HTMLDocument.prototype.addEventListener).toHaveBeenCalledTimes(1);
-      expect(HTMLDocument.prototype.removeEventListener).toHaveBeenCalledTimes(1);
+      expect(HTMLDocument.prototype.removeEventListener).toHaveBeenCalledTimes(
+        1,
+      );
    });
  });

@ -114,9 +108,7 @@ describe('Keyboard shortcuts for components', () => {
    it('should not add event listener if shortcut object is empty', async () => {
      HTMLDocument.prototype.addEventListener = jest.fn();

-      render(
-        <KeyboardShortcuts eventTarget={document} />,
-      );
+      render(<KeyboardShortcuts eventTarget={document} />);

      expect(HTMLDocument.prototype.addEventListener).not.toHaveBeenCalled();
    });
@ -141,7 +133,9 @@ describe('Keyboard shortcuts for components', () => {

      unmount();
      expect(HTMLDocument.prototype.addEventListener).toHaveBeenCalledTimes(1);
-      expect(HTMLDocument.prototype.removeEventListener).toHaveBeenCalledTimes(1);
+      expect(HTMLDocument.prototype.removeEventListener).toHaveBeenCalledTimes(
+        1,
+      );
    });
  });
 });
--- a/app/javascript/sidebar-widget/sidebarUser.jsx
+++ b/app/javascript/sidebar-widget/sidebarUser.jsx
@ -17,7 +17,11 @@ class SidebarUser extends Component {
    const { user } = this.props;
    return (
      <div className="widget-list-item__suggestions">
-        <a data-testid="widget-avatar" href={`/${user.username}`} className="widget-list-item__avatar">
+        <a
+          data-testid="widget-avatar"
+          href={`/${user.username}`}
+          className="widget-list-item__avatar"
+        >
          <img
            src={user.profile_image_url}
            alt={user.name}
--- a/app/javascript/utilities/tests/timeAgo.test.js
+++ b/app/javascript/utilities/tests/timeAgo.test.js
@ -21,7 +21,7 @@ describe('timeAgo', () => {
    expect(
      timeAgo({
        oldTimeInSeconds,
-        formatter: x => `[${x}]`,
+        formatter: (x) => `[${x}]`,
      }),
    ).toEqual('[just now]');
  });
--- a/app/javascript/utilities/dragAndUpload.js
+++ b/app/javascript/utilities/dragAndUpload.js
@ -1,7 +1,11 @@
 import { generateMainImage } from '../article-form/actions';
 import { validateFileInputs } from '../packs/validateFileInputs';

-export const dragAndUpload = (files, handleImageSuccess, handleImageFailure) => {
+export const dragAndUpload = (
+  files,
+  handleImageSuccess,
+  handleImageFailure,
+) => {
  if (files.length > 0 && validateFileInputs()) {
    const payload = { image: files };
    generateMainImage(payload, handleImageSuccess, handleImageFailure);