Format using prettier v2

cypress/integration/dark-mode.js

@@ -1,18 +1,14 @@
 describe('Dark Mode', () => {
   it('set local storage preferDarkMode to true if in dark mode', () => {
     cy.fetchReposAndWait({ darkMode: true });
-    cy.window()
-      .its('localStorage.preferDarkMode')
-      .should('eq', 'true');
+    cy.window().its('localStorage.preferDarkMode').should('eq', 'true');
     cy.findByLabelText('Sun Icon').should('exist');
     cy.findByLabelText('Moon Icon').should('not.exist');
   });
 
   it('set local storage preferDarkMode to false if in light mode', () => {
     cy.fetchReposAndWait({ darkMode: false });
-    cy.window()
-      .its('localStorage.preferDarkMode')
-      .should('eq', 'false');
+    cy.window().its('localStorage.preferDarkMode').should('eq', 'false');
     cy.findByLabelText('Moon Icon').should('exist');
     cy.findByLabelText('Sun Icon').should('not.exist');
   });

cypress/integration/feeling-lucky.js

@@ -2,8 +2,8 @@ describe('I’m Feeling Lucky', () => {
   it('should have a lucky repo', () => {
     cy.fetchReposAndWait();
 
-    cy.fixture('trending').then(json => {
-      const names = json.map(repo => repo.name);
+    cy.fixture('trending').then((json) => {
+      const names = json.map((repo) => repo.name);
       cy.findByText('I’m Feeling Lucky').should('exist');
       cy.findByTestId('random-repo-list')
         .findAllByTestId('repo-card')
@@ -26,16 +26,16 @@ describe('I’m Feeling Lucky', () => {
   it('reload should update the picked item', () => {
     cy.fetchReposAndWait();
 
-    cy.fixture('trending').then(json => {
-      const names = json.map(repo => repo.name);
+    cy.fixture('trending').then((json) => {
+      const names = json.map((repo) => repo.name);
       cy.findByTestId('random-repo-list')
         .findByTestId('name')
         .invoke('text')
         .should('be.oneOf', names);
     });
 
-    cy.fixture('trending-2').then(json => {
-      const names = json.map(repo => repo.name);
+    cy.fixture('trending-2').then((json) => {
+      const names = json.map((repo) => repo.name);
       cy.route({
         method: 'GET',
         url: 'https://ghapi.huchen.dev/repositories?since=daily',

cypress/integration/scroll-icon.js

@@ -4,14 +4,10 @@ describe('Scroll Icon', () => {
     cy.visit('/');
     cy.findByLabelText('Scroll to Top Button').should('not.be.visible');
     cy.scrollTo(0, 300);
-    cy.window()
-      .its('pageYOffset')
-      .should('eq', 300);
+    cy.window().its('pageYOffset').should('eq', 300);
     cy.findByLabelText('Scroll to Top Button').should('be.visible');
     cy.findByLabelText('Scroll to Top Button').click();
-    cy.window()
-      .its('pageYOffset')
-      .should('eq', 0);
+    cy.window().its('pageYOffset').should('eq', 0);
     cy.findByLabelText('Scroll to Top Button').should('not.be.visible');
   });
 });

cypress/plugins/index.js

@@ -18,4 +18,4 @@
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-}
+};

src/background/index.js

@@ -15,10 +15,10 @@ chrome.runtime.onStartup.addListener(() => {
   startRequest();
 });
 
-chrome.alarms.onAlarm.addListener(alarm => {
+chrome.alarms.onAlarm.addListener((alarm) => {
   console.log('Alarm triggered', alarm);
   if (alarm && alarm.name === 'watchdog') {
-    chrome.alarms.get('refresh', alarm => {
+    chrome.alarms.get('refresh', (alarm) => {
       if (alarm) {
         console.log('Refresh alarm exists. Yay.');
         const repos = getObject(KEY_REPOSITORIES);

src/components/ContentPlaceholder.js

@@ -12,9 +12,9 @@ const placeHolderShimmer = keyframes`
   }
 `;
 
-const Placeholder = props => (
+const Placeholder = (props) => (
   <div
-    css={theme => css`
+    css={(theme) => css`
       width: 100%;
       display: inline-block;
       display: inline-block;
@@ -43,7 +43,7 @@ const Placeholder = props => (
   </div>
 );
 
-const PlaceholderCard = props => (
+const PlaceholderCard = (props) => (
   <Card>
     <Left>
       <Placeholder
@@ -107,7 +107,7 @@ const ContentPlaceholder = ({ size = 1 }) => {
   return (
     <div
       data-test-id="loading-list"
-      css={theme => css`
+      css={(theme) => css`
         background: ${theme.card.bg};
         border-radius: 5px;
         overflow: hidden;
@@ -120,7 +120,7 @@ const ContentPlaceholder = ({ size = 1 }) => {
           <div
             data-test-id="loading-card"
             key={index}
-            css={theme => css`
+            css={(theme) => css`
               border-bottom: 1px solid ${theme.card.divider};
               overflow: hidden;
 

src/components/RepositoriesList.js

@@ -26,11 +26,15 @@ const RepositoriesList = ({
     setRandom(getRandomRepositories(repositories));
   }, [repositories]);
 
-  const transitions = useTransition(random, item => (item ? item.url : null), {
-    from: { opacity: 0 },
-    enter: { opacity: 1 },
-    leave: { position: 'absolute', opacity: 0 },
-  });
+  const transitions = useTransition(
+    random,
+    (item) => (item ? item.url : null),
+    {
+      from: { opacity: 0 },
+      enter: { opacity: 1 },
+      leave: { position: 'absolute', opacity: 0 },
+    }
+  );
 
   return (
     <Container>
@@ -62,7 +66,7 @@ const RepositoriesList = ({
             ))}
             <div
               aria-label="Random Pick Button"
-              css={theme => css`
+              css={(theme) => css`
                 position: absolute;
                 right: 0;
                 top: 50%;
@@ -99,7 +103,7 @@ const RepositoriesList = ({
           <ContentPlaceholder size={10} />
         ) : (
           <List data-test-id="loaded-repo-list">
-            {repositories.map(rep => (
+            {repositories.map((rep) => (
               <Card key={rep.url}>
                 <RepositoryCard {...rep} />
               </Card>
@@ -148,24 +152,24 @@ const Title = styled.h1`
   line-height: 1.1;
   transition: color 0.2s ease-in-out;
   color: rgba(
-    ${props => (props.theme.isDark ? '255,255,255' : '0,0,0')},
-    ${props => (props.isLoading ? '0.38' : '0.87')}
+    ${(props) => (props.theme.isDark ? '255,255,255' : '0,0,0')},
+    ${(props) => (props.isLoading ? '0.38' : '0.87')}
   );
 `;
 
 const List = styled.div`
-  background-color: ${props => props.theme.card.bg};
-  transition: background-color ${props => props.theme.transition};
+  background-color: ${(props) => props.theme.card.bg};
+  transition: background-color ${(props) => props.theme.transition};
   border-radius: 5px;
   overflow: hidden;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
   min-height: 120px;
-  border: 1px solid ${props => props.theme.card.border};
+  border: 1px solid ${(props) => props.theme.card.border};
 `;
 
 const Card = styled.div`
-  border-bottom: 1px solid ${props => props.theme.card.divider};
-  transition: border-color ${props => props.theme.transition};
+  border-bottom: 1px solid ${(props) => props.theme.card.divider};
+  transition: border-color ${(props) => props.theme.transition};
   overflow: hidden;
   :last-of-type {
     border-bottom: 0;

src/components/RepositoryCard.js

@@ -126,7 +126,7 @@ const Card = styled.a`
   padding: 20px;
   box-sizing: border-box;
   display: flex;
-  transition: background-color ${props => props.theme.transition};
+  transition: background-color ${(props) => props.theme.transition};
 
   &,
   &:hover,
@@ -137,7 +137,7 @@ const Card = styled.a`
   }
 
   &:hover {
-    background-color: ${props => props.theme.card.bgHover};
+    background-color: ${(props) => props.theme.card.bgHover};
   }
 `;
 
@@ -170,8 +170,8 @@ const Avatar = styled.img`
 const Description = styled.div`
   flex-grow: 1;
   font-weight: 400;
-  color: ${props => props.theme.text.helper};
-  transition: color ${props => props.theme.transition};
+  color: ${(props) => props.theme.text.helper};
+  transition: color ${(props) => props.theme.transition};
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -188,8 +188,8 @@ const Description = styled.div`
 const AdditionalInfo = styled.div`
   display: flex;
   align-items: center;
-  color: ${props => props.theme.card.additional};
-  transition: color ${props => props.theme.transition};
+  color: ${(props) => props.theme.card.additional};
+  transition: color ${(props) => props.theme.transition};
   margin-top: 20px;
   justify-content: space-between;
 `;
@@ -211,7 +211,7 @@ const LanguageColor = styled.div`
   height: 12px;
   width: 12px;
   border-radius: 50%;
-  background-color: ${props => props.color || props.theme.card.additional};
+  background-color: ${(props) => props.color || props.theme.card.additional};
 `;
 
 const CurrentStar = styled.div`
@@ -220,8 +220,8 @@ const CurrentStar = styled.div`
   top: 4px;
   font-size: 46px;
   line-height: 1;
-  color: ${props => props.theme.card.currentStar};
-  transition: color ${props => props.theme.transition};
+  color: ${(props) => props.theme.card.currentStar};
+  transition: color ${(props) => props.theme.transition};
   font-weight: 500;
   font-family: 'TT Commons', sans-serif;
 `;

src/components/ScrollTop.js

@@ -28,7 +28,7 @@ export default function ScrollTop(props) {
       y: 0,
       reset: true,
       from: { y: window.scrollY },
-      onFrame: props => window.scroll(0, props.y),
+      onFrame: (props) => window.scroll(0, props.y),
     });
   };
 

src/components/TopBar.js

@@ -69,7 +69,7 @@ const TopBar = ({
       >
         <a
           href="https://github.com/huchenme/hacker-tab-extension"
-          css={theme => css`
+          css={(theme) => css`
             display: block;
             color: ${theme.rgba(0.38)};
             transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
@@ -125,10 +125,10 @@ const Container = styled.div`
   display: flex;
   align-items: center;
   position: relative;
-  background-color: ${props => props.theme.topBar.bg};
+  background-color: ${(props) => props.theme.topBar.bg};
   padding: 0 16px;
   height: 56px;
   box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
     0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-  transition: background-color ${props => props.theme.transition};
+  transition: background-color ${(props) => props.theme.transition};
 `;

src/helpers/localStorage.js

@@ -8,6 +8,6 @@ export const KEY_SELECTED_PERIOD = 'selectedPeriod';
 export const KEY_SCHEMA_VERSION = 'schemaVersion';
 export const KEY_DARK_MODE = 'preferDarkMode';
 
-export const getObject = key => JSON.parse(localStorage.getItem(key));
+export const getObject = (key) => JSON.parse(localStorage.getItem(key));
 export const setObject = (key, value) =>
   localStorage.setItem(key, JSON.stringify(value));