index.js

import React, { useState, useEffect } from "react";

import { Plus } from "neetoicons";
import { Button, PageLoader, Dropdown, Checkbox } from "neetoui";
import { Header, Container } from "neetoui/layouts";
import { isNil, isEmpty, either } from "ramda";

import articlesApi from "apis/articles";
import categoriesApi from "apis/categories";

import Menu from "./Menu";
import Table from "./Table";

const Articles = () => {
  const [articles, setArticles] = useState([]);
  const [categories, setCategories] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [articleStatusCount, setArticleStatusCount] = useState([]);
  const [selectedColumns, setSelectedColumns] = useState({
    title: true,
    author: true,
    created_at: true,
    category: true,
    status: true,
  });

  const fetchArticles = async () => {
    logger.info("fetch articles called");
    try {
      const {
        data: { article_values, article_status_count },
      } = await articlesApi.list();
      setArticles(article_values);
      logger.info("inside try block", article_values);
      setArticleStatusCount(article_status_count);
      setLoading(false);
    } catch (error) {
      logger.error(error);
      setLoading(false);
    }
  };

  const fetchCategories = async () => {
    try {
      const {
        data: { category_with_article_count },
      } = await categoriesApi.list();
      setCategories(category_with_article_count);
      setLoading(false);
    } catch (error) {
      logger.error(error);
      setLoading(false);
    }
  };

  const destroyArticle = async slug => {
    try {
      await articlesApi.destroy(slug);
      await fetchArticles();
    } catch (error) {
      logger.error(error);
    }
  };

  useEffect(() => {
    fetchArticles();
    logger.info("Useeffect called");
    fetchCategories();
  }, []);

  if (loading) {
    return (
      <div className="h-screen w-screen">
        <PageLoader />
      </div>
    );
  }

  logger.info("Dashboard Articles : ",articles);

  if (either(isNil, isEmpty)(articles)) {
    return (
      <Container>
        <h1 className="text-center text-xl leading-5">You have no articles</h1>
      </Container>
    );
  }

  return (
    <div className="flex h-screen w-full">
      <Menu
        showMenu
        articleStatusCount={articleStatusCount}
        articles={articles}
        categories={categories}
        refetch={fetchCategories}
      />
      <Container>
        <Header
          actionBlock={
            <>
              <Dropdown
                buttonStyle="secondary"
                closeOnSelect={false}
                label="Columns"
              >
                {Object.keys(selectedColumns).map(column => (
                  <li key={column}>
                    <Checkbox
                      checked={selectedColumns[column] === true}
                      id={column}
                      key={column}
                      label={column.toString()}
                      onChange={() => {
                        setSelectedColumns(prevState => ({
                          ...prevState,
                          [column]: !prevState[column],
                        }));
                      }}
                    />
                  </li>
                ))}
              </Dropdown>
              <Button
                href="/articles/create"
                icon={Plus}
                label="Add new article"
                size="small"
              />
            </>
          }
          searchProps={{
            value: searchTerm,
            onChange: e => setSearchTerm(e.target.value),
          }}
        />
        <Table
          articles={articles}
          destroyArticle={destroyArticle}
          searchTerm={searchTerm}
          selectedColumns={selectedColumns}
        />
      </Container>
    </div>
  );
};

export default Articles;