added statistics and navigation layout

package.json

@@ -11,10 +11,11 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.3.6",
     "numeral": "^2.0.6",
-    "styled-components": "^6.0.7",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.13.8",
+    "styled-components": "^6.0.7",
     "web-vitals": "^2.1.3"
   },
   "scripts": {

src/components/App.css

@@ -0,0 +1,44 @@
+#root {
+    max-width: 1280px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.react:hover {
+    filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    a:nth-of-type(2) .logo {
+        animation: logo-spin infinite 20s linear;
+    }
+}
+
+.card {
+    padding: 2em;
+}
+
+.read-the-docs {
+    color: #888;
+}

src/components/App.jsx

@@ -1,11 +1,14 @@
 // import TweetsPage from 'pages/TweetsPage';
+import './App.css';
 import Tweet from './Tweet/Tweet';
 
-export const App = () => {
+const App = () => {
   return (
     <div>
       {/* <TweetsPage /> */}
       <Tweet />
     </div>
   );
 };
+
+export default App;

src/components/Layout/Layout.styled.js

@@ -0,0 +1,31 @@
+import { NavLink } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+export const AppNav = styled.nav`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #333;
+  color: #fff;
+  padding: 10px 20px;
+  width: 1280px;
+`;
+
+export const NavLinks = styled.ul`
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+
+export const NavItem = styled.li`
+  margin-right: 20px;
+`;
+
+export const NavLinkStyled = styled(NavLink)`
+  color: #fff;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+`;

src/components/StatisticsList/StatisticsList.jsx

@@ -0,0 +1,13 @@
+import { List, ListItem } from './StatisticsList.styled';
+import numeral from 'numeral';
+
+const StatisticsList = ({ tweets, followers }) => {
+  return (
+    <List>
+      <ListItem>{numeral(tweets).format('0, 0')} tweets</ListItem>
+      <ListItem>{numeral(followers).format('0, 0')} followers</ListItem>
+    </List>
+  );
+};
+
+export default StatisticsList;

src/components/StatisticsList/StatisticsList.styled.js

@@ -0,0 +1,25 @@
+import styled from "@emotion/styled";
+
+export const List = styled.ul`
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  top: 284px;
+  width: 100%;
+  gap: 16px;
+`;
+
+export const ListItem = styled.li`
+  font-family: "Montserrat", sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 24px;
+  text-transform: uppercase;
+  color: #ebd8ff;
+`;

src/components/Tweet/Tweet.jsx

@@ -1,32 +1,59 @@
 import { useState } from 'react';
 import Avatar from '../Avatar/Avatar';
 import Button from '../Button/Button';
+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 [isActive, setIsActive] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
+  const TOKEN = 'followingsList';
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentFollowers, setCurrentFollowers] = useState(folowers);
+  const [isActive, setIsActive] = useState(
+    JSON.parse(localStorage.getItem(TOKEN)) !== null &&
+      JSON.parse(localStorage.getItem(TOKEN)).find(user => user === id)
+      ? false
+      : true
+  );
+
+  const handleClick = async () => {
+    if (isActive) {
+      setIsLoading(true);
+      const storedData = JSON.parse(localStorage.getItem(TOKEN)) || [];
+      const updatedData = storedData.includes(id)
+        ? storedData.filter(user => user !== id)
+        : [...storedData, id];
+
+      localStorage.setItem(TOKEN, JSON.stringify(updatedData));
+      const { followers } = await updateFollowers(id, 'decrement');
+      setCurrentFollowers(followers);
+      setIsActive(false);
+      setIsLoading(false);
+    }
+    if (!isActive) {
+      setIsLoading(true);
+      const followingsList = JSON.parse(localStorage.getItem(TOKEN)) || [];
+      const updatedFollowingsList = followingsList.filter(user => user !== id);
 
-  const handleClick = () => {};
-  if (isActive) {
-    setIsLoading(true);
-    setIsActive(false);
-  }
-  // if (!isActive) {
-  //   setIsLoading(!isActive);
-  //   setIsActive(false);
-  // }
+      localStorage.setItem(TOKEN, JSON.stringify(updatedFollowingsList));
+      const { followers } = await updateFollowers(id, 'decrement');
+      setCurrentFollowers(followers);
+      setIsActive(!isActive);
+      setIsLoading(false);
+    }
+  };
   return (
     <>
       <CardContainer>
         <Logo />
         <CardImage />
         <Line />
         <Avatar src={imageURL} />
+        <StatisticsList folowers={currentFollowers} tweets={tweets} />
         <Button
           isActive={isActive}
-          isLoading={isLoading}
           onClick={handleClick}
+          isLoading={isLoading}
         />
       </CardContainer>
     </>