diff --git a/README.md b/README.md index 57ea835..0ea92fa 100644 --- a/README.md +++ b/README.md @@ -2,117 +2,3 @@ Робота виконана на нативному JS з використанням зборщиків або на React. Інтерактивність працює відповідно до технічного завдання. Код відформатований та без коментарів. В репозиторії має бути описаний README.md. - -# React homework template - -Этот проект был создан при помощи -[Create React App](https://github.com/facebook/create-react-app). Для знакомства -и настройки дополнительных возможностей -[обратись к документации](https://facebook.github.io/create-react-app/docs/getting-started). - -## Создание репозитория по шаблону - -Используй этот репозиторий организации GoIT как шаблон для создания репозитория -своего проекта. Для этого нажми на кнопку `«Use this template»` и выбери опцию -`«Create a new repository»`, как показано на изображении. - -![Creating repo from a template step 1](./assets/template-step-1.png) - -На следующем шаге откроется страница создания нового репозитория. Заполни поле -его имени, убедись что репозиторий публичный, после чего нажми кнопку -`«Create repository from template»`. - -![Creating repo from a template step 2](./assets/template-step-2.png) - -После того как репозиторий будет создан, необходимо перейти в настройки -созданного репозитория на вкладку `Settings` > `Actions` > `General` как -показано на изображении. - -![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png) - -Проскролив страницу до самого конца, в секции `«Workflow permissions»` выбери -опцию `«Read and write permissions»` и поставь галочку в чекбоксе. Это -необходимо для автоматизации процесса деплоя проекта. - -![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png) - -Теперь у тебя есть личный репозиторий проекта, со структурой файлов и папок -репозитория-шаблона. Далее работай с ним как с любым другим личным репозиторием, -клонируй его себе на компьютер, пиши код, делай коммиты и отправляй их на -GitHub. - -## Подготовка к работе - -1. Убедись что на компьютере установлена LTS-версия Node.js. - [Скачай и установи](https://nodejs.org/en/) её если необходимо. -2. Установи базовые зависимости проекта командой `npm install`. -3. Запусти режим разработки, выполнив команду `npm start`. -4. Перейди в браузере по адресу [http://localhost:3000](http://localhost:3000). - Эта страница будет автоматически перезагружаться после сохранения изменений в - файлах проекта. - -## Деплой - -Продакшн версия проекта будет автоматически проходить линтинг, собираться и -деплоиться на GitHub Pages, в ветку `gh-pages`, каждый раз когда обновляется -ветка `main`. Например, после прямого пуша или принятого пул-реквеста. Для этого -необходимо в файле `package.json` отредактировать поле `homepage`, заменив -`your_username` и `your_repo_name` на свои, и отправить изменения на GitHub. - -```json -"homepage": "https://your_username.github.io/your_repo_name/" -``` - -Далее необходимо зайти в настройки GitHub-репозитория (`Settings` > `Pages`) и -выставить раздачу продакшн версии файлов из папки `/root` ветки `gh-pages`, если -это небыло сделано автоматически. - -![GitHub Pages settings](./assets/repo-settings.png) - -### Статус деплоя - -Статус деплоя крайнего коммита отображается иконкой возле его идентификатора. - -- **Желтый цвет** - выполняется сборка и деплой проекта. -- **Зеленый цвет** - деплой завершился успешно. -- **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка. - -Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в -выпадающем окне перейти по ссылке `Details`. - -![Deployment status](./assets/deploy-status.png) - -### Живая страница - -Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть -по адресу указанному в отредактированном свойстве `homepage`. Например, вот -ссылка на живую версию для этого репозитория -[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). - -Если открывается пустая страница, убедись что во вкладке `Console` нет ошибок -связанных с неправильными путями к CSS и JS файлам проекта (**404**). Скорее -всего у тебя неправильное значение свойства `homepage` в файле `package.json`. - -### Маршрутизация - -Если приложение использует библиотеку `react-router-dom` для маршрутизации, -необходимо дополнительно настроить компонент ``, передав в пропе -`basename` точное название твоего репозитория. Слеш в начале строки обязателен. - -```jsx - - - -``` - -## Как это работает - -![How it works](./assets/how-it-works.png) - -1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный - скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`. -2. Все файлы репозитория копируются на сервер, где проект инициализируется и - проходит линтинг и сборку перед деплоем. -3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта - отправляется в ветку `gh-pages`. В противном случае, в логе выполнения - скрипта будет указано в чем проблема. diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx index e4b844c..95191ea 100644 --- a/src/components/Button/Button.jsx +++ b/src/components/Button/Button.jsx @@ -4,7 +4,7 @@ import { ActiveBtn, DisabledBtn } from './Button.styled'; const Button = ({ isActive, onClick, isLoading }) => { if (isActive) { return ( - {isLoading ? '...' : 'Follow'} + {isLoading ? '...' : 'Follow'} ); } return ( diff --git a/src/components/Tweet/Tweet.jsx b/src/components/Tweet/Tweet.jsx index 1ce8d32..598ffb0 100644 --- a/src/components/Tweet/Tweet.jsx +++ b/src/components/Tweet/Tweet.jsx @@ -5,10 +5,10 @@ import { updateFollowers } from '../../utils/backend'; import { CardContainer, CardImage, Line, Logo } from './Tweet.styled'; import StatisticsList from 'components/StatisticsList/StatisticsList'; -const Tweet = ({ imageURL, folowers, tweets, id }) => { +const Tweet = ({ imageURL, followers, tweets, id }) => { const TOKEN = 'followingsList'; const [isLoading, setIsLoading] = useState(false); - const [currentFollowers, setCurrentFollowers] = useState(folowers); + const [currentFollowers, setCurrentFollowers] = useState(followers); const [isActive, setIsActive] = useState( JSON.parse(localStorage.getItem(TOKEN)) !== null && JSON.parse(localStorage.getItem(TOKEN)).find(user => user === id) @@ -49,7 +49,7 @@ const Tweet = ({ imageURL, folowers, tweets, id }) => { - +