learnhouse/front/pages/org/[orgslug]/collections/index.tsx

import Layout from "../../../../components/UI/Layout";
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
import styled from "styled-components";
import { Title } from "../../../../components/UI/Elements/Styles/Title";
import { deleteCollection, getOrgCollections } from "../../../../services/collections";
import { getOrganizationContextInfo } from "../../../../services/orgs";

function Collections() {
  const router = useRouter();
  const { orgslug } = router.query;

  const [isLoading, setIsLoading] = React.useState(true);
  const [collections, setCollections] = React.useState([]);

  async function fetchCollections() {
    setIsLoading(true);
    const org = await getOrganizationContextInfo(orgslug);
    const collections = await getOrgCollections(org.org_id);
    setCollections(collections);
    setIsLoading(false);
  }

  async function deleteCollectionAndFetch(collectionId: number) {
    setIsLoading(true);
    await deleteCollection(collectionId);
    await fetchCollections();
    setIsLoading(false);
  }

  React.useEffect(() => {
    fetchCollections();
  }, []);

  return (
    <Layout>
      <Title>
        {orgslug} Collections :{" "}
        <Link href={"/org/" + orgslug + "/collections/new"}>
          <button>+</button>
        </Link>{" "}
      </Title>
      {isLoading ? (
        <div>Loading...</div>
      ) : (
        <div>
          {collections.map((collection: any) => (
            <CollectionItem key={collection.collection_id}>
              <Link href={"/org/" + orgslug + "/collections/" + collection.collection_id}>{collection.name}</Link>
              <button onClick={() => deleteCollectionAndFetch(collection.collection_id)}>Delete</button>
            </CollectionItem>
          ))}
        </div>
      )}
    </Layout>
  );
}

const CollectionItem = styled.div`
  display: flex;
  flex-direction: column;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03);
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  &:hover {
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
  }
`;

export default Collections;