Removed rubbish

This commit is contained in:
Dmitriy Shishkov 2020-11-28 13:00:49 +05:00
parent c03e10da16
commit da8a37dfbd
No known key found for this signature in database
GPG Key ID: D76D70029F55183E
9 changed files with 2 additions and 125 deletions

View File

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

View File

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

View File

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

View File

@ -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;

View File

@ -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 };

View File

@ -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

View File

@ -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>
</>
);
}

View File

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

View File

@ -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;
}