.github/workflows/code-style.yml

@@ -1,41 +0,0 @@
-name: Code style
-
-on: [push]
-
-jobs:
-  prettier:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install packages
-        uses: borales/actions-yarn@v2.0.0
-        with:
-          cmd: --frozen-lockfile
-
-      - name: Run prettier
-        uses: borales/actions-yarn@v2.0.0
-        with:
-          cmd: format
-
-      - name: Commit actions
-        uses: stefanzweifel/git-auto-commit-action@v4
-        with:
-          commit_message: Apply Prettier styles
-          branch: ${{ github.head_ref }}
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules/
 /.pnp
 .pnp.js
 
@@ -9,11 +9,11 @@
 /coverage
 
 # next.js
-/.next/
+.next/
 /out/
 
 # production
-/build
+build/
 
 # misc
 .DS_Store

README.md

@@ -1,4 +1,2 @@
-# ugra-hackathon_frontend
-
-Training project to get another members of team used to code style
-Some very clever caption
+# KOMAP
+Сервис для составления маршрутов

components/ExampleComponent.jsx

@@ -1,11 +0,0 @@
-import React from "react";
-import { useCounter } from "hooks/counter";
-
-import styles from "styles/exampleComponent.module.css";
-
-const ExampleComponent = () => {
-  const {} = useCounter();
-  return <button className={styles.button}>Amazing button by Timothy!</button>;
-};
-
-export default ExampleComponent;

components/PowerfulComponent/handlers.js

@@ -1,11 +0,0 @@
-// Лучше писать документацию на функции, за это будет респект от менторов
-/**
- * Increase counter
- * @param {SetStateAction} setCounter
- */
-const handleCounterClick = (setCounter) => {
-  return () => setCounter((prev) => prev + 1); // Если используем контекст, тогда замыкаем всё, что нужно внутри обработчика
-};
-
-// Экспорт лучше делать отдельно, чтобы всегда знать, что мы экспортируем из файла, а что используем внутри (как с public/private методами)
-export { handleCounterClick };

components/PowerfulComponent/index.js

@@ -1,26 +0,0 @@
-import React, { useCallback, useContext } from "react";
-
-import { CounterContext } from "context/counterContext";
-import { handleCounterClick } from "./handlers"; // Обработчики событий лучше держать в отдельном файле или использовать кастомные хуки
-
-/**
- * Complex component with counter with context in it
- */
-const PowerfulComponent = () => {
-  const context = useContext(CounterContext);
-
-  console.log(context);
-
-  const handleClick = useCallback(handleCounterClick(context.setCounter), [
-    context.setCounter,
-  ]);
-
-  return (
-    <div>
-      <h1>{context?.counter}</h1>
-      <button onClick={handleClick}>Increase</button>
-    </div>
-  );
-};
-
-export default PowerfulComponent;

context/counterContext.js

@@ -1,22 +0,0 @@
-import React, { useEffect, useMemo, useState } from "react";
-
-const CounterContext = React.createContext(null);
-
-const initialContext = 0;
-
-const CounterProvider = ({ children }) => {
-  const [counter, setCounter] = useState(null);
-
-  useEffect(() => {
-    // Тут что-то делать для инициализации контекста
-    setCounter(initialContext); // Например
-  }, []);
-
-  const value = useMemo(() => ({ counter, setCounter }), [counter]); // На самом деле, в случе нашего проекта это мало повлияет на производительность, но в каком-то туториале советовали так делать, поэтому почему бы и нет
-
-  return (
-    <CounterContext.Provider value={value}>{children}</CounterContext.Provider>
-  );
-};
-
-export { CounterContext, CounterProvider };

front/hooks/counter.js

@@ -2,7 +2,7 @@ import { useState } from "react";
 
 // Если функционал можно где-то переиспользовать или если код логики компонента занимает больше 150 строк, стоит разбить его на кастомные хуки и вынести сюда
 /**
- * Simple hook
+ * Simple counter hook
  * @param {number} initialState
  */
 const useCounter = (initialState = 0) => {
@@ -18,4 +18,4 @@ const useCounter = (initialState = 0) => {
   return { counter, increaseCounter };
 };
 
-export { useCounter };
+export { useCounter }

pages/counter.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { useCounter } from "hooks/counter";
-
-const Counter = () => {
-  const { counter, increaseCounter } = useCounter();
-
-  return (
-    <div>
-      <h1>{counter}</h1>
-      <button onClick={increaseCounter}>+</button>
-    </div>
-  );
-};
-
-export default Counter

pages/index.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import Link from "next/link";
-
-import ExampleComponent from "components/ExampleComponent";
-import PowerfulComponent from "components/PowerfulComponent";
-
-export default function Home() {
-  return (
-    <>
-      <ExampleComponent />
-      <PowerfulComponent />
-      <Link href="/counter">
-        <a>Simplifyed counter</a>
-      </Link>
-    </>
-  );
-}

styles/exampleComponent.module.css

@@ -1,6 +0,0 @@
-/* Благодаря использованию css-modules можно использовать одни и те же названия классов
-  в разных компонентах и ничего нам за это не будет, ибо при сборке к ним добавятся хеши */
-.button {
-  background-color: red;
-  color: rgb(255, 255, 255);
-}

styles/globals.css

@@ -1,16 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}