Configure prettier and Prettify code

.prettierignore

@@ -0,0 +1,4 @@
+package.json
+yarn.lock
+dist
+build

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

package.json

@@ -34,7 +34,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts build",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "format": "prettier --write './src/**/*.{js,css,json,md}'"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -53,6 +54,7 @@
   },
   "devDependencies": {
     "bootstrap": "^4.3.1",
+    "prettier": "^1.19.1",
     "react-scripts": "^3.3.0",
     "react-test-renderer": "^16.8.6"
   }

src/App.js

@@ -1,9 +1,7 @@
-import React from "react";
+import React from 'react';
 import AppRouter from './components/AppRouter.js';
 import './styles/icons.css';
 
 export default function App() {
-  return (
-    <AppRouter/>
-  );
+  return <AppRouter />;
 }

src/components/AppRouter.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { Switch, Route, Redirect } from "react-router-dom";
-import Content from "./Content";
-import ExtLanding from "./ExtLanding";
-import { useBlockstack } from "react-blockstack";
-import Login from "./Login";
+import React from 'react';
+import { Switch, Route, Redirect } from 'react-router-dom';
+import Content from './Content';
+import ExtLanding from './ExtLanding';
+import { useBlockstack } from 'react-blockstack';
+import Login from './Login';
 
 export default function AppRouter() {
   const { person, signOut } = useBlockstack();
@@ -13,18 +13,14 @@ export default function AppRouter() {
         exact={true}
         path="/login"
         render={routeProps => {
-          return !person ? (
-            <Login {...routeProps} />
-          ) : (
-            <Redirect to="/items/all" />
-          );
+          return !person ? <Login {...routeProps} /> : <Redirect to="/items/all" />;
         }}
       />
       <Route
         exact={true}
         path="/"
         render={() => {
-          return <Redirect to="/items/all" />
+          return <Redirect to="/items/all" />;
         }}
       />
       <Route
@@ -40,11 +36,11 @@ export default function AppRouter() {
       />
       <Route
         path="/:type/:subType"
-        render={(routeProps) => {
+        render={routeProps => {
           if (person) {
-            return <Content {...routeProps} person={person} />
-          } else if( person === null ) {
-            window.location.assign("https://vaultilo.madoveradvertising.com/");
+            return <Content {...routeProps} person={person} />;
+          } else if (person === null) {
+            window.location.assign('https://vaultilo.madoveradvertising.com/');
           }
         }}
       />

src/components/Cards/AddNewCard.js

@@ -1,11 +1,11 @@
-import React from "react";
+import React from 'react';
 import './index.css';
 
-export default function AddNewCard({ formType, onClick}) {
+export default function AddNewCard({ formType, onClick }) {
   return (
     <div className="new-card" onClick={() => onClick(formType)}>
       <div className="new-card-icon">+</div>
       <div className="title">Add New</div>
     </div>
-  )
-}
+  );
+}

src/components/Cards/CryptoCard.js

@@ -1,8 +1,8 @@
-import React from "react";
+import React from 'react';
 import './index.css';
 import { getFormattedTime } from '../../helper';
 
-export default function CryptoCard({credential, onClick, onDeleteClick}) {
+export default function CryptoCard({ credential, onClick, onDeleteClick }) {
   const { walletName, subType, timeStamp } = credential;
   const getSubClass = () => {
     if (subType === 'ethereum') {
@@ -12,21 +12,23 @@ export default function CryptoCard({credential, onClick, onDeleteClick}) {
       return 'other-box';
     }
     return '';
-  }
+  };
   return (
     <div className={`wallet-box ${getSubClass()}`}>
-      <div className="action-btn view-btn" onClick={() => onClick(credential)}><i className="icon-eye"/></div>
-      <div className="action-btn delete-btn" onClick={() => onDeleteClick(credential)}><i className="icon-delete"/></div>
-      <div className="top-img">
-        <img src={`/images/${subType}.svg`} alt="" /> 
+      <div className="action-btn view-btn" onClick={() => onClick(credential)}>
+        <i className="icon-eye" />
+      </div>
+      <div className="action-btn delete-btn" onClick={() => onDeleteClick(credential)}>
+        <i className="icon-delete" />
       </div>
-      <div className="title">
-        {walletName}
+      <div className="top-img">
+        <img src={`/images/${subType}.svg`} alt="" />
       </div>
+      <div className="title">{walletName}</div>
       <div className="time-label">
         <i className="icon-clock" />
         {getFormattedTime(timeStamp)}
       </div>
     </div>
-  )
-}
+  );
+}

src/components/Cards/NotesCard.js

@@ -1,18 +1,20 @@
-import React from "react";
+import React from 'react';
 import './index.css';
 
-export default function NotesCard({credential, onClick, onDeleteClick}) {
+export default function NotesCard({ credential, onClick, onDeleteClick }) {
   const { noteTitle } = credential;
   return (
     <div className="notes-box">
-      <div className="action-btn view-btn" onClick={() => onClick(credential)} ><i className="icon-eye"/></div>
-      <div className="action-btn delete-btn" onClick={() => onDeleteClick(credential)}><i className="icon-delete"/></div>
+      <div className="action-btn view-btn" onClick={() => onClick(credential)}>
+        <i className="icon-eye" />
+      </div>
+      <div className="action-btn delete-btn" onClick={() => onDeleteClick(credential)}>
+        <i className="icon-delete" />
+      </div>
       <div className="note-img">
         <i className="icon-note" />
       </div>
-      <div className="title">
-        {noteTitle}
-      </div>
+      <div className="title">{noteTitle}</div>
     </div>
-  )
-}
+  );
+}

src/components/Cards/PasswordsCard.js

@@ -1,23 +1,25 @@
-import React from "react";
+import React from 'react';
 import './index.css';
 import { getFormattedTime } from '../../helper';
 
-export default function PasswordsCard({credential, onClick, onDeleteClick}) {
+export default function PasswordsCard({ credential, onClick, onDeleteClick }) {
   const { domainName, timeStamp } = credential;
   return (
     <div className="wallet-box password-box">
-      <div className="action-btn view-btn" onClick={() => onClick(credential)}><i className="icon-eye"/></div>
-      <div className="action-btn delete-btn" onClick={() => onDeleteClick(credential)}><i className="icon-delete"/></div>
-      <div className="top-img">
-        <img src='/images/password.svg' /> 
+      <div className="action-btn view-btn" onClick={() => onClick(credential)}>
+        <i className="icon-eye" />
+      </div>
+      <div className="action-btn delete-btn" onClick={() => onDeleteClick(credential)}>
+        <i className="icon-delete" />
       </div>
-      <div className="title">
-        {domainName}
+      <div className="top-img">
+        <img src="/images/password.svg" />
       </div>
+      <div className="title">{domainName}</div>
       <div className="time-label">
         <i className="icon-clock" />
         {getFormattedTime(timeStamp)}
       </div>
     </div>
-  )
-}
+  );
+}

src/components/Cards/index.css

@@ -1,11 +1,11 @@
 .wallet-box {
   position: relative;
-  background: #FFFFFF;
+  background: #ffffff;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.14);
   border-radius: 4px;
   padding: 22px 16px 8px 16px;
   height: 120px;
-  border:1px solid #f3f0f0;
+  border: 1px solid #f3f0f0;
   margin-bottom: 35px;
 }
 .wallet-box .top-img {
@@ -26,7 +26,7 @@
   border-radius: 4px;
   height: 120px;
   background-color: white;
-  border:1px solid #f3f0f0;
+  border: 1px solid #f3f0f0;
   margin-bottom: 35px;
 }
 .note-img {
@@ -35,7 +35,8 @@
   padding: 22px 0;
   background-color: #2b9b97;
 }
-.notes-box .icon-note, .notes-box .icon-password {
+.notes-box .icon-note,
+.notes-box .icon-password {
   font-size: 38px;
 }
 .notes-box .title {
@@ -50,7 +51,7 @@
   background: rgba(196, 196, 196, 0.2);
   border-radius: 4px;
   text-align: center;
-  color: #2B9B98;
+  color: #2b9b98;
   cursor: pointer;
   margin-bottom: 35px;
 }
@@ -67,7 +68,7 @@
   position: absolute;
   cursor: pointer;
   visibility: hidden;
-  color: #CACACA;
+  color: #cacaca;
 }
 
 .wallet-box .action-btn:hover {
@@ -90,7 +91,8 @@
   top: 11px;
 }
 
-.wallet-box:hover .action-btn, .notes-box:hover .action-btn {
+.wallet-box:hover .action-btn,
+.notes-box:hover .action-btn {
   visibility: visible;
 }
 
@@ -101,7 +103,7 @@
   font-size: 13px;
   line-height: 14px;
   /* identical to box height */
-  color: #6F6F6F;
+  color: #6f6f6f;
   padding-top: 12px;
   text-align: right;
 }

src/components/CarouselRow.js

@@ -1,33 +1,29 @@
-import React from "react";
-import { Carousel } from "react-bootstrap";
-import CryptoCard from "./Cards/CryptoCard";
-import NotesCard from "./Cards/NotesCard";
-import PasswordsCard from "./Cards/PasswordsCard";
+import React from 'react';
+import { Carousel } from 'react-bootstrap';
+import CryptoCard from './Cards/CryptoCard';
+import NotesCard from './Cards/NotesCard';
+import PasswordsCard from './Cards/PasswordsCard';
 
 export default function CarouselRow(props) {
   const { items, cardType, onClick, onDeleteClick } = props;
 
-  const getItemCard = (credential) => {
+  const getItemCard = credential => {
     if (cardType === 'crypto') {
-      return (
-        <CryptoCard credential={credential} onClick={onClick} onDeleteClick={onDeleteClick} />
-      )
+      return <CryptoCard credential={credential} onClick={onClick} onDeleteClick={onDeleteClick} />;
     }
     if (cardType === 'notes') {
-      return (
-        <NotesCard credential={credential} onClick={onClick} onDeleteClick={onDeleteClick} />
-      )
+      return <NotesCard credential={credential} onClick={onClick} onDeleteClick={onDeleteClick} />;
     }
     if (cardType === 'passwords') {
       return (
         <PasswordsCard credential={credential} onClick={onClick} onDeleteClick={onDeleteClick} />
-      )
+      );
     }
-  }
-  
+  };
+
   const rows = [...Array(Math.ceil(items.length / 3))];
   const itemRows = rows.map((row, idx) => items.slice(idx * 3, idx * 3 + 3));
-  
+
   return (
     <>
       <Carousel controls={items.length > 3} indicators={false} interval={null} wrap={false}>