found mistake in users object

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` для маршрутизации,
-необходимо дополнительно настроить компонент `<BrowserRouter>`, передав в пропе
-`basename` точное название твоего репозитория. Слеш в начале строки обязателен.
-
-```jsx
-<BrowserRouter basename="/your_repo_name">
-  <App />
-</BrowserRouter>
-```
-
-## Как это работает
-
-![How it works](./assets/how-it-works.png)
-
-1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный
-   скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`.
-2. Все файлы репозитория копируются на сервер, где проект инициализируется и
-   проходит линтинг и сборку перед деплоем.
-3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта
-   отправляется в ветку `gh-pages`. В противном случае, в логе выполнения
-   скрипта будет указано в чем проблема.

src/components/Button/Button.jsx

@@ -4,7 +4,7 @@ import { ActiveBtn, DisabledBtn } from './Button.styled';
 const Button = ({ isActive, onClick, isLoading }) => {
   if (isActive) {
     return (
-      <ActiveBtn onClick={onClick}> {isLoading ? '...' : 'Follow'}</ActiveBtn>
+      <ActiveBtn onClick={onClick}> {isLoading ? '...' : 'Follow'} </ActiveBtn>
     );
   }
   return (

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 }) => {
         <CardImage />
         <Line />
         <Avatar src={imageURL} />
-        <StatisticsList folowers={currentFollowers} tweets={tweets} />
+        <StatisticsList followers={currentFollowers} tweets={tweets} />
         <Button
           isActive={isActive}
           onClick={handleClick}

src/components/UserList/UserList.jsx

@@ -1,18 +1,18 @@
-import Tweet from 'components/Tweet/Tweet';
+import Tweet from '../Tweet/Tweet';
 import { GridContainer } from './UserList.syled';
 
 const UserList = ({ users }) => {
   return (
     <>
       <GridContainer>
-        {users.map(({ avatar, folowers, tweets, id }) => {
+        {users.map(({ avatar, followers, tweets, id }) => {
           return (
             <Tweet
               imageURL={avatar}
-              folowers={folowers}
+              followers={followers}
               tweets={tweets}
-              id={id}
               key={id}
+              id={id}
             />
           );
         })}

src/index.css

@@ -34,4 +34,31 @@ body {
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
 }

src/pages/TweetsPage.jsx

@@ -1,6 +1,8 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import UserList from 'components/UserList/UserList';
-import { useEffect, useMemo, useState } from 'react';
-import { getUsers } from 'utils/backend';
+import MainButton from 'components/MainButton/MainButton';
+import { getUsers } from '../utils/backend';
 import { LoadBtn } from './TweetsPage.styled';
 import { RingLoader } from 'react-spinners';
 
@@ -32,11 +34,12 @@ const TweetsPage = () => {
   const handlePage = () => {
     setPage(prev => prev + 1);
   };
-  //   const location = useLocation();
-  //   const backLinkHref = useRef(location.state?.from ?? `/`);
+  const location = useLocation();
+  const backLinkHref = useRef(location.state?.from ?? `/`);
 
   return (
     <>
+      <MainButton to={backLinkHref.current} />
       <UserList users={users} />
       {newPages && users.length !== 0 && (
         <LoadBtn onClick={handlePage}>

src/utils/backend.js

@@ -3,7 +3,7 @@ import axios from "axios";
 const BASE_URL = "http://64243f43d6152a4d480a4f40.mockapi.io";
 
 export const getUsers = async (page) => {
-    const response = await axios.get(`${BASE_URL}/users?page=${page}&limit=3`);
+     const response = await axios.get(`${BASE_URL}/users?page=${page}&limit=3`);
     return response.data;
 }