Prettier the world

Author: chadian

.eslintrc.js

@@ -5,21 +5,21 @@ module.exports = {
     node: true,
     jest: true,
   },
-  extends: ["eslint:recommended", "plugin:react/recommended", "prettier"],
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier'],
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 12,
-    sourceType: "module",
+    sourceType: 'module',
   },
-  plugins: ["react", "prettier"],
+  plugins: ['react', 'prettier'],
   rules: {
-    "prettier/prettier": "error",
+    'prettier/prettier': 'error',
   },
   settings: {
     react: {
-      version: "detect",
+      version: 'detect',
     },
   },
 };

__tests__/add-rhythm.test.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import RhythmischApp from "../pages/app";
-import { RhythmsProvider } from "../hooks/rhythms";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import "@testing-library/jest-dom/extend-expect";
-import { ThemeProvider } from "../hooks/theme";
-import { setLocalStorageRhythms } from "../hooks/rhythms/local-storage";
+import RhythmischApp from '../pages/app';
+import { RhythmsProvider } from '../hooks/rhythms';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import { ThemeProvider } from '../hooks/theme';
+import { setLocalStorageRhythms } from '../hooks/rhythms/local-storage';
 
 beforeEach(() => {
   setLocalStorageRhythms([]);
@@ -19,15 +19,17 @@ beforeEach(() => {
   );
 });
 
-it("can add a new rhythm", () => {
+it('can add a new rhythm', () => {
   const addButton = screen.getByRole('button', { name: 'Add' });
   userEvent.click(addButton);
   const modal = screen.getByRole('dialog');
   expect(modal).toBeInTheDocument();
 
   const action = screen.getByLabelText('Rhythm action description');
   const numeratorFrequency = screen.getByLabelText('Rhythm action count');
-  const denomenatorFrequency = screen.getByLabelText('Rhythm action count time span');
+  const denomenatorFrequency = screen.getByLabelText(
+    'Rhythm action count time span'
+  );
   const reason = screen.getByLabelText('Rhythm reason description');
   const submit = screen.getByRole('button', { name: 'Create' });
 
@@ -41,14 +43,18 @@ it("can add a new rhythm", () => {
 
   expect(screen.getByText('Read every day')).toBeInTheDocument();
   expect(screen.getByText('thrice every week')).toBeInTheDocument();
-  expect(screen.getByText('because there is much I would like to learn')).toBeInTheDocument();
+  expect(
+    screen.getByText('because there is much I would like to learn')
+  ).toBeInTheDocument();
 
-  const localStorageRhythms = JSON.parse(window.localStorage.getItem("app.rhythms"));
+  const localStorageRhythms = JSON.parse(
+    window.localStorage.getItem('app.rhythms')
+  );
   expect(localStorageRhythms).toHaveLength(1);
   const addedRhythm = localStorageRhythms[0];
   expect(addedRhythm.id).toBeTruthy;
-  expect(addedRhythm.action).toBe("read every day");
-  expect(addedRhythm.reason).toBe("there is much I would like to learn");
+  expect(addedRhythm.action).toBe('read every day');
+  expect(addedRhythm.reason).toBe('there is much I would like to learn');
   expect(addedRhythm.frequency).toMatchObject([3, 7]);
   expect(addedRhythm.hits).toMatchObject([]);
 });

__tests__/edit-rhythm.test.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import RhythmischApp from "../pages/app";
-import { RhythmsProvider } from "../hooks/rhythms";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import "@testing-library/jest-dom/extend-expect";
-import { ThemeProvider } from "../hooks/theme";
-import { setLocalStorageRhythms } from "../hooks/rhythms/local-storage";
+import RhythmischApp from '../pages/app';
+import { RhythmsProvider } from '../hooks/rhythms';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import { ThemeProvider } from '../hooks/theme';
+import { setLocalStorageRhythms } from '../hooks/rhythms/local-storage';
 
 const getLocalStorageRhythms = () => {
   const localStorageRhythms = JSON.parse(
-    window.localStorage.getItem("app.rhythms")
+    window.localStorage.getItem('app.rhythms')
   );
   return localStorageRhythms;
 };
@@ -18,9 +18,9 @@ let rhythm;
 
 beforeEach(() => {
   rhythm = {
-    id: "local-storage-rhythm",
-    action: "pass this test",
-    reason: "tests should pass",
+    id: 'local-storage-rhythm',
+    action: 'pass this test',
+    reason: 'tests should pass',
     frequency: [1, 1],
     hits: [],
   };
@@ -36,7 +36,7 @@ beforeEach(() => {
   );
 });
 
-it("can edit an existing rhythm", () => {
+it('can edit an existing rhythm', () => {
   let localStorageRhythms = getLocalStorageRhythms();
   expect(localStorageRhythms).toHaveLength(1);
   const localStorageRhythm = localStorageRhythms[0];
@@ -49,31 +49,31 @@ it("can edit an existing rhythm", () => {
   const editButton = screen.getByRole('button', { name: 'Edit' });
   userEvent.click(editButton);
 
-  const modal = screen.getByRole("dialog");
+  const modal = screen.getByRole('dialog');
   expect(modal).toBeInTheDocument();
 
-  const action = screen.getByLabelText("Rhythm action description");
-  const numeratorFrequency = screen.getByLabelText("Rhythm action count");
+  const action = screen.getByLabelText('Rhythm action description');
+  const numeratorFrequency = screen.getByLabelText('Rhythm action count');
   const denomenatorFrequency = screen.getByLabelText(
-    "Rhythm action count time span"
+    'Rhythm action count time span'
   );
-  const reason = screen.getByLabelText("Rhythm reason description");
-  const submit = screen.getByRole("button", { name: "Update" });
+  const reason = screen.getByLabelText('Rhythm reason description');
+  const submit = screen.getByRole('button', { name: 'Update' });
 
   userEvent.clear(action);
-  userEvent.type(action, "read every day");
-  userEvent.selectOptions(numeratorFrequency, "thrice");
-  userEvent.selectOptions(denomenatorFrequency, "week");
+  userEvent.type(action, 'read every day');
+  userEvent.selectOptions(numeratorFrequency, 'thrice');
+  userEvent.selectOptions(denomenatorFrequency, 'week');
   userEvent.clear(reason);
-  userEvent.type(reason, "there is much I would like to learn");
+  userEvent.type(reason, 'there is much I would like to learn');
   userEvent.click(submit);
 
   expect(modal).not.toBeInTheDocument();
 
-  expect(screen.getByText("Read every day")).toBeInTheDocument();
-  expect(screen.getByText("thrice every week")).toBeInTheDocument();
+  expect(screen.getByText('Read every day')).toBeInTheDocument();
+  expect(screen.getByText('thrice every week')).toBeInTheDocument();
   expect(
-    screen.getByText("because there is much I would like to learn")
+    screen.getByText('because there is much I would like to learn')
   ).toBeInTheDocument();
 
   localStorageRhythms = getLocalStorageRhythms();
@@ -82,7 +82,7 @@ it("can edit an existing rhythm", () => {
   expect(updatedLocalStorageRhythm.id).toBe(rhythm.id);
   expect(updatedLocalStorageRhythm.action).toBe('read every day');
   expect(updatedLocalStorageRhythm.reason).toBe(
-    "there is much I would like to learn"
+    'there is much I would like to learn'
   );
   expect(updatedLocalStorageRhythm.frequency).toMatchObject([3, 7]);
   expect(updatedLocalStorageRhythm.hits).toMatchObject([]);

__tests__/remove-rhythm.test.js

@@ -1,27 +1,29 @@
 import React from 'react';
-import RhythmischApp from "../pages/app";
-import { RhythmsProvider } from "../hooks/rhythms";
-import { ThemeProvider } from "../hooks/theme";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import "@testing-library/jest-dom/extend-expect";
-import { setLocalStorageRhythms } from "../hooks/rhythms/local-storage";
+import RhythmischApp from '../pages/app';
+import { RhythmsProvider } from '../hooks/rhythms';
+import { ThemeProvider } from '../hooks/theme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import { setLocalStorageRhythms } from '../hooks/rhythms/local-storage';
 
 const getLocalStorageRhythms = () => {
   const localStorageRhythms = JSON.parse(
-    window.localStorage.getItem("app.rhythms")
+    window.localStorage.getItem('app.rhythms')
   );
   return localStorageRhythms;
 };
 
 beforeEach(() => {
-  setLocalStorageRhythms([{
-    id: 'local-storage-rhythm',
-    action: 'pass this test',
-    reason: 'tests should pass',
-    frequency: [1, 1],
-    hits: [],
-  }]);
+  setLocalStorageRhythms([
+    {
+      id: 'local-storage-rhythm',
+      action: 'pass this test',
+      reason: 'tests should pass',
+      frequency: [1, 1],
+      hits: [],
+    },
+  ]);
 
   render(
     <ThemeProvider>
@@ -32,12 +34,12 @@ beforeEach(() => {
   );
 });
 
-it("can delete an existing rhythm", () => {
+it('can delete an existing rhythm', () => {
   expect(getLocalStorageRhythms()).toHaveLength(1);
 
-  const action = screen.getByText("Pass this test");
-  const frequency = screen.getByText("once every day");
-  const reason = screen.getByText("because tests should pass");
+  const action = screen.getByText('Pass this test');
+  const frequency = screen.getByText('once every day');
+  const reason = screen.getByText('because tests should pass');
 
   expect(action).toBeInTheDocument();
   expect(frequency).toBeInTheDocument();

__tests__/render.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { render } from "@testing-library/react";
-import RhythmischApp from "../pages/app";
+import { render } from '@testing-library/react';
+import RhythmischApp from '../pages/app';
 import { RhythmsProvider } from '../hooks/rhythms';
 import { ThemeProvider } from '../hooks/theme';
 import { setLocalStorageRhythms } from '../hooks/rhythms/local-storage';
-import "@testing-library/jest-dom/extend-expect";
+import '@testing-library/jest-dom/extend-expect';
 
 let rendered;
 
@@ -18,17 +18,17 @@ function setup() {
   );
 }
 
-describe('render' , () => {
+describe('render', () => {
   beforeEach(() => {
     setup();
   });
 
-  it("renders an Add button", () => {
+  it('renders an Add button', () => {
     const addButton = rendered.getByRole('button', { name: 'Add' });
     expect(addButton).toBeInTheDocument();
   });
 
-  it("renders the default Rhythm", () => {
+  it('renders the default Rhythm', () => {
     const action = rendered.getByText('Use Rhythmisch on this device');
     expect(action).toBeInTheDocument();
 
@@ -38,16 +38,15 @@ describe('render' , () => {
     const reason = rendered.getByText('because I want to get into the rhythm');
     expect(reason).toBeInTheDocument();
 
-    const historicalOccurrences = rendered.getAllByLabelText(/Missed target on /);
+    const historicalOccurrences =
+      rendered.getAllByLabelText(/Missed target on /);
     expect(historicalOccurrences).toHaveLength(13);
 
     const todaysOccurrence = rendered.getByLabelText(/Mark as /);
     expect(todaysOccurrence).toBeInTheDocument();
 
     // the default rhythm is not stored in local storage
-    expect(JSON.parse(
-      window.localStorage.getItem("app.rhythms")
-    )).toBeNull;
+    expect(JSON.parse(window.localStorage.getItem('app.rhythms'))).toBeNull;
   });
 
   describe('with an empty list of rhythms', () => {
@@ -56,8 +55,10 @@ describe('render' , () => {
       setup();
     });
 
-    it("renders an empty rhythm list message", () => {
-      const emptyRhythmsText = rendered.getByText("All out of rhythms, enjoy some fresh air 💜");
+    it('renders an empty rhythm list message', () => {
+      const emptyRhythmsText = rendered.getByText(
+        'All out of rhythms, enjoy some fresh air 💜'
+      );
       expect(emptyRhythmsText).toBeInTheDocument();
     });
   });

components/button.js

@@ -1,44 +1,44 @@
-import React from "react";
-import { useTheme } from "../hooks/theme/index";
+import React from 'react';
+import { useTheme } from '../hooks/theme/index';
 
 export default function Button({
   children,
   onClick = () => {},
   attrs = {},
-  size = "large",
+  size = 'large',
 }) {
   const [theme] = useTheme();
   const { buttonTextColor, buttonBgColor } = theme;
 
-  const { className = "", type: buttonType, ...buttonAttrs } = attrs;
+  const { className = '', type: buttonType, ...buttonAttrs } = attrs;
 
   const largeButtonClassNames = [
     buttonTextColor,
     buttonBgColor,
-    "inline-block",
-    "font-medium",
-    "py-1.5",
-    "text-lg",
-    "md:text-xl",
+    'inline-block',
+    'font-medium',
+    'py-1.5',
+    'text-lg',
+    'md:text-xl',
   ];
 
   const smallButtonClassNames = [
     buttonTextColor,
     buttonBgColor,
-    "inline-block",
-    "font-medium",
-    "py-1.5",
+    'inline-block',
+    'font-medium',
+    'py-1.5',
   ];
 
   const sizeClassName =
-    size === "large"
-      ? largeButtonClassNames.join(" ")
-      : smallButtonClassNames.join(" ");
+    size === 'large'
+      ? largeButtonClassNames.join(' ')
+      : smallButtonClassNames.join(' ');
 
   return (
     <button
       {...buttonAttrs}
-      type={buttonType || "button"}
+      type={buttonType || 'button'}
       onClick={onClick}
       className={`${className} ${sizeClassName}`}
     >

components/content/section.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 export function SectionHeading({ children }) {
   return <h3 className="text-3xl text-gray-800 font-bold mb-4">{children}</h3>;