index.js

/*
 *
 * Plugin Awesome Help -> HomePage
 *
 */
import React, { memo, useState, useEffect } from 'react';
import { useHistory } from "react-router-dom";
import pluginId from "../../pluginId";
//I18n
import { useIntl } from 'react-intl';
import getTrad from '../../utils/getTrad';
//Some components
import {
  LoadingIndicatorPage,
} from '@strapi/helper-plugin';
//Layout
import { ContentLayout, HeaderLayout, Layout } from '@strapi/design-system/Layout';
//Strapi Design-System components
import { Main } from '@strapi/design-system/Main';
import { Button } from "@strapi/design-system/Button";
import { IconButton } from "@strapi/design-system/IconButton";
import Play from "@strapi/icons/Play";
import Cog from "@strapi/icons/Cog";
import Pencil from "@strapi/icons/Pencil";
import { Table, Thead, Tbody, Tr, Td, Th } from "@strapi/design-system/Table";
import { Typography } from "@strapi/design-system/Typography";


const HomePage = (props) => {
  const [isLoading, setIsLoading] = useState(false);
  const [isAnalysisRunning, setIsAnalysisRunning] = useState(false);
  const [results, setResults] = useState([]);
  const { formatMessage } = useIntl();
  const { push } = useHistory();

  const handleSubmit = async () => {
    setIsAnalysisRunning(true);
    setIsLoading(true);
    setTimeout(() => {
      setIsAnalysisRunning(false);
      setIsLoading(false);
      setResults([{
        id: 1,
        contentType: "Article",
        fieldName: "name",
        help: ""
      },
      {
        id: 2,
        contentType: "Article",
        fieldName: "description",
        help: ""
      },
      {
        id: 3,
        contentType: "Restaurant",
        fieldName: "name",
        help: ""
      },
      {
        id: 4,
        contentType: "Restaurant",
        fieldName: "description",
        help: ""
      }]);
    }, 1000);
  };
  const configure = () => {
    push(`/settings/${pluginId}/`);
  };
  const handleEdit = () => { }

  const HelpTable = () => {
    const COL_COUNT = 3;
    return (
      <Table colCount={COL_COUNT} rowCount={results.length}>
        <Thead>
          <Tr>
            <Th>
              <Typography variant="sigma">
                {formatMessage({ id: getTrad("plugin.help.table.contentType") })}
              </Typography>
            </Th>
            <Th>
              <Typography variant="sigma">
                {formatMessage({ id: getTrad("plugin.help.table.fieldName") })}
              </Typography>
            </Th>
            <Th>
              <Typography variant="sigma">
                {formatMessage({ id: getTrad("plugin.help.table.help") })}
              </Typography>
            </Th>
          </Tr>
        </Thead>
        <Tbody>
          {results.map((result, index) => {
            return (
              <Tr key={`contentpage-${index}`}>
                <Td>
                  <Typography
                    textColor="neutral800"
                    fontWeight="inherited"
                  >
                    {result.contentType}
                  </Typography>
                </Td>
                <Td style={{ whiteSpace: "break-spaces" }}>
                  <Typography
                    textColor="neutral800"
                    fontWeight="inherited"
                  >
                    {result.fieldName}
                  </Typography>
                </Td>
                <Td>
                  <Typography
                    textColor="neutral800"
                    fontWeight="inherited"
                  >
                    {result.help}
                  </Typography>
                </Td>
                <Td>
                  <IconButton
                    label="Edit"
                    icon={<Pencil />}
                    onClick={() =>
                      handleEdit(
                        result.id
                      )
                    }
                  />
                </Td>
              </Tr>
            );
          })}
        </Tbody>
      </Table>
    );
  };

  return <Main labelledBy="title" aria-busy={isLoading}>
    <HeaderLayout
      id="title"
      title={formatMessage({ id: getTrad("plugin.homepage.title") })}
      subtitle={formatMessage({ id: getTrad("plugin.homepage.subtitle") })}
      primaryAction={
        <Button
          onClick={handleSubmit}
          startIcon={<Play />}
          size="L"
          disabled={isLoading || isAnalysisRunning}
          loading={isAnalysisRunning}
        >
          {formatMessage({
            id: getTrad(
              isAnalysisRunning
                ? "plugin.help.analysisPending"
                : "plugin.help.runAnalysis"
            ),
          })}
        </Button>
      }
      secondaryAction={
        <Button variant="tertiary" onClick={configure} startIcon={<Cog />}>
          {formatMessage({ id: getTrad("plugin.help.settings") })}
        </Button>
      }
    >
    </HeaderLayout>
    <ContentLayout>
      {isLoading ? (
        <LoadingIndicatorPage />
      ) : (
        <Layout>
          <HelpTable></HelpTable>
        </Layout>
      )}
    </ContentLayout>
  </Main>
};

export default memo(HomePage);