text: import React, { useState, useContext } from "react";
  import { getFirebase } from "../../firebase/firebase";
  import AuthContext from "../../context/AuthContext";
  import styled from "styled-components";
  import store from "store";
  import CheckIcon from "../../assets/icons/check.svg";
  
  const Follow = ({ tag }) => {
    const firebase = getFirebase();
    const FieldValue = firebase.firestore.FieldValue;
    const user = useContext(AuthContext);
    const [followed, setFollowed] = useState(store.get("followingTag::" + tag));
  
    const toggleFollowTag = () => {
      if (!user) {
        alert("You must be logged in to follow");
        return;
      }
      if (!followed) {
        setFollowed(!followed);
        store.set("followingTag::" + tag, true);
  
        firebase
          .firestore()
          .doc(`/users/${user.uid}`)
          .update({
            followingTags: FieldValue.arrayUnion(tag.toLowerCase())
          })
          .then(res => console.log("Successfully followed tag"));
      } else {
        setFollowed(!followed);
        store.remove("followingTags::" + tag);
        firebase
          .firestore()
          .doc(`/users/${user.uid}`)
          .update({
            followingTags: FieldValue.arrayRemove(tag.toLowerCase())
          })
          .then(res => console.log("Successfully unfollowed tag"));
      }
    };
  
    return (
      <FollowContainer
        className={followed ? "followed" : null}
        onClick={() => toggleFollowTag()}
      >
        <CheckIcon /> {followed ? "Followed" : "Follow"}
      </FollowContainer>
    );
  };
  
  export default Follow;
  
  const FollowContainer = styled.div`
    cursor: pointer;
    display: flex;
    align-items: center;
    border: 1px solid var(--bg-rev);
    padding: 5px 10px;
    border-radius: 99px;
    font-size: 0.9rem;
    line-height: 0.9rem;
  
    &.followed {
      background: var(--bg-rev);
      color: var(--text-rev);
      svg {
        path {
          fill: var(--text-rev);
        }
      }
    }
  
    svg {
      width: 18px;
      height: 18px;
      margin-right: 10px;
      path {
        fill: var(--bg-rev);
      }
    }
  `;
  