Formating changes

Author: Lnola

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "all",
+  "printWidth": 120,
+  "semi": true,
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}

jsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": ["src"]
+}

src/App.js

@@ -1,7 +1,7 @@
-import React from "react";
-import { RecoilRoot } from "recoil";
+import React from 'react';
+import { RecoilRoot } from 'recoil';
 
-import Tiles from "./levels/1. Tiles";
+import Tiles from './levels/1. Tiles';
 
 const App = () => {
   return (

src/components/common/Tile/index.js

@@ -1,15 +1,15 @@
-import React from "react";
-import { useRecoilState } from "recoil";
+import React from 'react';
+import { useRecoilState } from 'recoil';
 
-import Flex from "../../styled/Flex";
-import { TileBlockCss } from "./index.styled";
+import Flex from '../../styled/Flex';
+import { TileBlockCss } from './index.styled';
 
-import { getDotTile } from "../../../utils/Tiles/getDotTile";
-import { setTileAsVisited } from "../../../utils/Tiles/setTileAsVisited";
-import { setRandomDotTile } from "../../../utils/Tiles/setRandomDotTile";
+import { getDotTile } from '../../../utils/Tiles/getDotTile';
+import { setTileAsVisited } from '../../../utils/Tiles/setTileAsVisited';
+import { setRandomDotTile } from '../../../utils/Tiles/setRandomDotTile';
 
-import { tileType } from "../../../constants/tileType";
-import { recoilTiles } from "../../../recoil/Tiles/recoilTiles";
+import { tileType } from '../../../constants/tileType';
+import { recoilTiles } from '../../../recoil/Tiles/recoilTiles';
 
 const Tile = ({ rotation, tile }) => {
   const [tiles, setTiles] = useRecoilState(recoilTiles);
@@ -23,11 +23,7 @@ const Tile = ({ rotation, tile }) => {
   };
 
   return (
-    <Flex
-      css={TileBlockCss}
-      wasVisited={tile.wasVisited}
-      onClick={handleTileClick}
-    >
+    <Flex css={TileBlockCss} wasVisited={tile.wasVisited} onClick={handleTileClick}>
       {tileType[rotation]}
     </Flex>
   );

src/components/common/Tile/index.styled.js

@@ -1,7 +1,7 @@
-import { css } from "styled-components";
+import { css } from 'styled-components';
 
 export const TileBlockCss = css`
-  background-color: ${({ wasVisited }) => (wasVisited ? "green" : "red")};
+  background-color: ${({ wasVisited }) => (wasVisited ? 'green' : 'red')};
   height: 100px;
   width: 100px;
   font-size: 45px;

src/components/styled/Flex.js

@@ -1,17 +1,17 @@
-import styled, { css } from "styled-components";
+import styled, { css } from 'styled-components';
 
-const getAlignValue = (value) => {
+const getAlignValue = value => {
   switch (value) {
-    case "start":
-      return "flex-start";
-    case "end":
-      return "flex-end";
-    case "center":
-      return "center";
-    case "space-between":
-      return "space-between";
-    case "space-around":
-      return "space-around";
+    case 'start':
+      return 'flex-start';
+    case 'end':
+      return 'flex-end';
+    case 'center':
+      return 'center';
+    case 'space-between':
+      return 'space-between';
+    case 'space-around':
+      return 'space-around';
     default:
       return null;
   }
@@ -20,12 +20,9 @@ const getAlignValue = (value) => {
 export const flex = css`
   display: flex;
   ${({ direction }) => direction && `flex-direction: ${direction};`}
-  ${({ justifyContent }) =>
-    justifyContent && `justify-content: ${getAlignValue(justifyContent)};`}
-  ${({ justifySelf }) =>
-    justifySelf && `justify-self: ${getAlignValue(justifySelf)};`}
-  ${({ alignItems }) =>
-    alignItems && `align-items: ${getAlignValue(alignItems)};`}
+  ${({ justifyContent }) => justifyContent && `justify-content: ${getAlignValue(justifyContent)};`}
+  ${({ justifySelf }) => justifySelf && `justify-self: ${getAlignValue(justifySelf)};`}
+  ${({ alignItems }) => alignItems && `align-items: ${getAlignValue(alignItems)};`}
   ${({ alignSelf }) => alignSelf && `align-self: ${getAlignValue(alignSelf)};`}
   ${({ wrap }) => wrap && `flex-wrap: ${wrap};`}
   ${({ margin }) => margin && `margin: ${margin};`}

src/constants/rotations.js

@@ -1,8 +1,8 @@
 export const rotations = {
-  right: "right",
-  left: "left",
-  up: "up",
-  down: "down",
-  dot: "dot",
-  none: "none",
+  right: 'right',
+  left: 'left',
+  up: 'up',
+  down: 'down',
+  dot: 'dot',
+  none: 'none',
 };

src/constants/tileType.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 export const tileType = {
   right: <span>&rarr;</span>,

src/index.js

@@ -1,11 +1,11 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-import "./styles.css";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import './styles.css';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById('root'),
 );

src/levels/1. Tiles/index.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
+import React from 'react';
+import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
 
-import SizePicker from "./screens/SizePicker";
-import TileBoard from "./screens/TileBoard";
-import EndScreen from "./screens/EndScreen";
+import SizePicker from './screens/SizePicker';
+import TileBoard from './screens/TileBoard';
+import EndScreen from './screens/EndScreen';
 
 const Tiles = () => {
   return (