CircularProgress | Circular progress indicator for your macOS app | iOS library

export default function SpecificPostCommentsExtended({ article }) {
  const [prev, setPrev] = useState("");
  const [loaded, setLoaded] = useState(false);
  const [comments, setComments] = useState([]);
  function changePrevState(_id) {
    setPrev(_id);
    console.log(_id, "-is id");
    console.log(prev, "- prev");
  }
  const ifNoCom = async () => {
    setLoaded(true);
    setTimeout(function () {
      document
        .querySelector("#confirm")
        .addEventListener("click", async () => {
          const data = await axios({
            url: vars.BACKENDURL + "/comment",
            withCredentials: true,
            method: "POST",
            data: {
              article: article,
              comment: {
                content: document.querySelector("#commentcontent").value,
                prevId: prev === "" ? null : prev,
              },
            },
          });
          setLoaded(true);
        });
    }, 30);
    return;
  };
  const ifCom = async () => {
    let i = 0;
    await article.commentsArr.forEach(async (c) => {
      const { data } = await axios({
        url: vars.BACKENDURL + "/getcomment",
        withCredentials: true,
        method: "POST",
        data: { comment: { _id: c } },
      });
      if (!comments.includes({ ...data })) {
        setComments((current) => [...current, { ...data }]);
      }
      i++;
      if (i === article.commentsArr.length - 1) {
        setLoaded(true);
        document
          .querySelector("#confirm")
          .addEventListener("click", async () => {
            console.log("It's prev - ", prev, "!lalalal");
            const data = await axios({
              url: vars.BACKENDURL + "/comment",
              withCredentials: true,
              method: "POST",
              data: {
                article: article,
                comment: {
                  content: document.querySelector("#commentcontent").value,
                  prevId: prev === "" ? null : prev,
                },
              },
            });
          });
      }
    });
  };
  const getComments = async () => {
    setComments([]);
    setLoaded(false);
    if (article.commentsArr.length === 0) {
      ifNoCom();
    } else {
      ifCom();
    }
  };

  useEffect(() => {
    getComments();
  }, []);
  return (
    <>
      
        
        
          mypage| log out
        
      
      
        
        
          {loaded === false ? (
            
          ) : (
            <>
              
                
                  {article.group.toLowerCase()}
                  
                    previous
                    next
                    list
                  
                

                
                  
                    
                      {article.title}
                      {article.writer}
                      {article.date}
                    
                    
                       {
                          window.location = `/${article._id}/edit`;
                        }}
                      >
                        edit
                      
                      |
                       {
                          if (
                            !window.confirm(
                              "Are you sure you want to delete this post?",
                            )
                          ) {
                            return;
                          }
                          const { data } = await axios({
                            url: vars.BACKENDURL + `/deletepost`,
                            withCredentials: true,
                            method: "DELETE",
                            data: {
                              post: {
                                id: article._id,
                              },
                            },
                          });
                          alert(data);
                        }}
                      >
                        delete
                      
                    
                  
                  
                    Contents
                    
{article.content}
                  
                
              
              
                
                  inappropriate language
                  misinformation
                
                
                  
                     {
                        window.location = "/specificpost/" + article._id;
                      }}
                    >
                       Comments{" "}
                      {article.comments}
                    

                     {
                        const { data } = await axios({
                          url: vars.BACKENDURL + "/like",
                          method: "POST",
                          withCredentials: true,
                          data: {
                            post: article,
                          },
                        });
                        alert(data);
                      }}
                    >
                       Likes{" "}
                      {article.likes}
                    
                  
                  
                    Like
                    |
                    Report
                  
                
                
                  {comments.map((c, i) => {
                    console.log("C comment id", c.comment._id);
                    const _id = c.comment._id;
                    return (
                      <>
                        
                          {c.comment.author}
                          {c.comment.content}
                          
                            {c.comment.date}
                             {
                                changePrevState(_id);
                              }}
                            >
                              reply
                            
                          
                        
                        {c.subcomments.map((sc, j) => {
                          return (
                            
                              {sc.author}
                              
                                @{sc.author}, 
 {sc.content}
                              
                              
                                {sc.date}
                              
                            
                          );
                        })}
                      
                    );
                  })}
                  
                  Post
                
              
            
          )}
        
      
    
  );
}