pedroblandim / minesweeper

A simple Minesweeper game made with React.

Minesweeper

A simple Minesweeper game made with React.

https://react-simple-minesweeper.herokuapp.com/

minesweeper's Issues

Some refactor

All those comments below are valid for all your files.

test and @types dependencies should be installed as devDependencies, you should know the difference between them.

Minesweeper/package.json

Line 9 in 37eaf42

"@types/jest": "^24.0.0",

---

:React.FCis not needed, TS and infer some types, react component type is one of them

Minesweeper/src/App.tsx

Line 5 in 37eaf42

const App:React.FC = () => {

---

There are many better ways to place this function, you can have a file /src/utils.js, or if you're using only here in this components you can put before the component declaration, it's always better to declare stuff before you use them. Take a look at airbnb style guide to learn more about some best practices.

Minesweeper/src/components/Board/index.tsx

Line 359 in 37eaf42

function createEmptyMatrix<T>(rows: number, columns: number, defaultValue: T): T[][]{

---

Some places of your file have indentation with 4 spaces, other places have 2 spaces, you must follow a pattern, 2 spaces is the best option in my opinion, airbnb use 2 spaces as well.

Minesweeper/src/components/Board/index.tsx

Line 168 in 37eaf42

const openThisAndPlacesAround = (position: Position) => {

---

It's important to know the difference between types and interfaces on TS, most of your interfaces should actually by declared as types.

Minesweeper/src/components/Board/index.tsx

Line 6 in 37eaf42

interface ISquare {

---

When you have a default value on useState you don't need to declare the type, TS can infer.

Minesweeper/src/components/Board/index.tsx

Line 46 in 37eaf42

const [isGameWon, setIsGameWon] = useState<Boolean>(false);

---

Your project indentation is really strange, I recommend vs-code with the config for 2 spaces (not tabs) for indentation

Minesweeper/src/components/Minesweeper/index.tsx

Line 98 in 37eaf42

<EndGameModal isOpen={showGameOverModal}

---

A nice challenge for the future, try to change localstorage with redux:

Minesweeper/src/components/Minesweeper/index.tsx

Line 87 in 37eaf42

const record = window.localStorage.getItem("record");

---

A tip for any language, try to avoid else, to understand an else the dev must always read all ifs and else ifs, so the else can become unclear really easy, prefer:

if (condition 1) .... return;
if (condition 2) .... return;
if (condition 3) .... return;

Minesweeper/src/components/Square/index.tsx

Line 61 in 37eaf42

} else {

Also, to understand more read this:
https://blog.timoxley.com/post/47041269194/avoid-else-return-early

---

I don't think this component should be a class, maybe you can do the same thing using just hooks

Minesweeper/src/components/Timer/index.tsx

Line 15 in 37eaf42

class Timer extends React.Component<IProps, {}> {

---

A challenge for the future: try to replace your css files with styled-components in my opinion it's the better way to add css styles on React components.

Minesweeper/src/components/Timer/styles.css

Line 1 in 37eaf42

.timerContainer{

---

A challenge for the future: try to add eslint + prettier config on vs-code, you'll have a much better auto-formatting for your code, and you can also apply of other projects in the future.