✨(app-impress) create feature pads-panel

Create a new feature pads-panel for the app impress.
It will be used to display the pads in the app.

src/frontend/apps/impress/src/features/pads/index.ts

@@ -0,0 +1,3 @@
+export * from './pad';
+export * from './pads-create';
+export * from './pads-panel';

src/frontend/apps/impress/src/features/pads/pads-panel/__tests__/PanelTeams.test.tsx

@@ -0,0 +1,174 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import fetchMock from 'fetch-mock';
+
+import { Panel } from '@/features/teams';
+import { AppWrapper } from '@/tests/utils';
+
+import { TeamList } from '../components/PadList';
+
+window.HTMLElement.prototype.scroll = function () {};
+
+jest.mock('next/router', () => ({
+  ...jest.requireActual('next/router'),
+  useRouter: () => ({
+    query: {},
+  }),
+}));
+
+describe('PanelTeams', () => {
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  it('renders with no team to display', async () => {
+    fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, {
+      count: 0,
+      results: [],
+    });
+
+    render(<TeamList />, { wrapper: AppWrapper });
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+
+    expect(
+      await screen.findByText(
+        'Create your first team by clicking on the "Create a new team" button.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('renders an empty team', async () => {
+    fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, {
+      count: 1,
+      results: [
+        {
+          id: '1',
+          name: 'Team 1',
+          accesses: [],
+        },
+      ],
+    });
+
+    render(<TeamList />, { wrapper: AppWrapper });
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+
+    expect(
+      await screen.findByLabelText('Empty teams icon'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders a team with only 1 member', async () => {
+    fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, {
+      count: 1,
+      results: [
+        {
+          id: '1',
+          name: 'Team 1',
+          accesses: [
+            {
+              id: '1',
+              role: 'owner',
+            },
+          ],
+        },
+      ],
+    });
+
+    render(<TeamList />, { wrapper: AppWrapper });
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+
+    expect(
+      await screen.findByLabelText('Empty teams icon'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders a non-empty team', async () => {
+    fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, {
+      count: 1,
+      results: [
+        {
+          id: '1',
+          name: 'Team 1',
+          accesses: [
+            {
+              id: '1',
+              role: 'admin',
+            },
+            {
+              id: '2',
+              role: 'member',
+            },
+          ],
+        },
+      ],
+    });
+
+    render(<TeamList />, { wrapper: AppWrapper });
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+
+    expect(await screen.findByLabelText('Teams icon')).toBeInTheDocument();
+  });
+
+  it('renders the error', async () => {
+    fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, {
+      status: 500,
+    });
+
+    render(<TeamList />, { wrapper: AppWrapper });
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+
+    expect(
+      await screen.findByText(
+        'Something bad happens, please refresh the page.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('renders with team panel open', async () => {
+    fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, {
+      count: 1,
+      results: [],
+    });
+
+    render(<Panel />, { wrapper: AppWrapper });
+
+    expect(
+      screen.getByRole('button', { name: 'Close the teams panel' }),
+    ).toBeVisible();
+
+    expect(await screen.findByText('Recents')).toBeVisible();
+  });
+
+  it('closes and opens the team panel', async () => {
+    fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, {
+      count: 1,
+      results: [],
+    });
+
+    render(<Panel />, { wrapper: AppWrapper });
+
+    expect(await screen.findByText('Recents')).toBeVisible();
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: 'Close the teams panel',
+      }),
+    );
+
+    expect(await screen.findByText('Recents')).not.toBeVisible();
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: 'Open the teams panel',
+      }),
+    );
+
+    expect(await screen.findByText('Recents')).toBeVisible();
+  });
+});

src/frontend/apps/impress/src/features/pads/pads-panel/api/index.ts

@@ -0,0 +1 @@
+export * from './usePads';

src/frontend/apps/impress/src/features/pads/pads-panel/api/usePads.tsx

@@ -0,0 +1,70 @@
+import {
+  DefinedInitialDataInfiniteOptions,
+  InfiniteData,
+  QueryKey,
+  useInfiniteQuery,
+} from '@tanstack/react-query';
+
+import { APIError, APIList, errorCauses, fetchAPI } from '@/api';
+import { Pad } from '@/features/pads';
+
+export enum PadsOrdering {
+  BY_CREATED_ON = 'created_at',
+  BY_CREATED_ON_DESC = '-created_at',
+}
+
+export type PadsParams = {
+  ordering: PadsOrdering;
+};
+type PadsAPIParams = PadsParams & {
+  page: number;
+};
+
+type PadsResponse = APIList<Pad>;
+
+export const getPads = async ({
+  ordering,
+  page,
+}: PadsAPIParams): Promise<PadsResponse> => {
+  const orderingQuery = ordering ? `&ordering=${ordering}` : '';
+  const response = await fetchAPI(`pads/?page=${page}${orderingQuery}`);
+
+  if (!response.ok) {
+    throw new APIError('Failed to get the teams', await errorCauses(response));
+  }
+
+  return response.json() as Promise<PadsResponse>;
+};
+
+export const KEY_LIST_PAD = 'pads';
+
+export function usePads(
+  param: PadsParams,
+  queryConfig?: DefinedInitialDataInfiniteOptions<
+    PadsResponse,
+    APIError,
+    InfiniteData<PadsResponse>,
+    QueryKey,
+    number
+  >,
+) {
+  return useInfiniteQuery<
+    PadsResponse,
+    APIError,
+    InfiniteData<PadsResponse>,
+    QueryKey,
+    number
+  >({
+    initialPageParam: 1,
+    queryKey: [KEY_LIST_PAD, param],
+    queryFn: ({ pageParam }) =>
+      getPads({
+        ...param,
+        page: pageParam,
+      }),
+    getNextPageParam(lastPage, allPages) {
+      return lastPage.next ? allPages.length + 1 : undefined;
+    },
+    ...queryConfig,
+  });
+}

src/frontend/apps/impress/src/features/pads/pads-panel/assets/icon-add.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M20.75 0.75H3.25C1.8625 0.75 0.75 1.875 0.75 3.25V20.75C0.75 22.125 1.8625 23.25 3.25 23.25H20.75C22.125 23.25 23.25 22.125 23.25 20.75V3.25C23.25 1.875 22.125 0.75 20.75 0.75ZM17 13.25H13.25V17C13.25 17.6875 12.6875 18.25 12 18.25C11.3125 18.25 10.75 17.6875 10.75 17V13.25H7C6.3125 13.25 5.75 12.6875 5.75 12C5.75 11.3125 6.3125 10.75 7 10.75H10.75V7C10.75 6.3125 11.3125 5.75 12 5.75C12.6875 5.75 13.25 6.3125 13.25 7V10.75H17C17.6875 10.75 18.25 11.3125 18.25 12C18.25 12.6875 17.6875 13.25 17 13.25Z"
+    fill="currentColor"
+  />
+</svg>

src/frontend/apps/impress/src/features/pads/pads-panel/assets/icon-none.svg

@@ -0,0 +1,13 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_508_5524)">
+    <path
+      d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM4 12C4 7.58 7.58 4 12 4C13.85 4 15.55 4.63 16.9 5.69L5.69 16.9C4.63 15.55 4 13.85 4 12ZM12 20C10.15 20 8.45 19.37 7.1 18.31L18.31 7.1C19.37 8.45 20 10.15 20 12C20 16.42 16.42 20 12 20Z"
+      fill="currentColor"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_508_5524">
+      <rect width="24" height="24" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

src/frontend/apps/impress/src/features/pads/pads-panel/assets/icon-open-close.svg

@@ -0,0 +1,14 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle
+    cx="12"
+    cy="12"
+    r="11.5"
+    transform="rotate(-180 12 12)"
+    fill="white"
+    stroke="currentColor"
+  />
+  <path
+    d="M14.1683 16.232C14.4803 15.92 14.4803 15.416 14.1683 15.104L11.0643 12L14.1683 8.896C14.4803 8.584 14.4803 8.08 14.1683 7.768C13.8563 7.456 13.3523 7.456 13.0403 7.768L9.36834 11.44C9.05634 11.752 9.05634 12.256 9.36834 12.568L13.0403 16.24C13.3443 16.544 13.8563 16.544 14.1683 16.232Z"
+    fill="currentColor"
+  />
+</svg>

src/frontend/apps/impress/src/features/pads/pads-panel/assets/icon-sort.svg

@@ -0,0 +1,13 @@
+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_178_17837)">
+    <path
+      d="M11.25 3.75L6.25 8.7375H10V17.5H12.5V8.7375H16.25L11.25 3.75ZM20 21.2625V12.5H17.5V21.2625H13.75L18.75 26.25L23.75 21.2625H20Z"
+      fill="currentColor"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_178_17837">
+      <rect width="30" height="30" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

src/frontend/apps/impress/src/features/pads/pads-panel/components/PadItem.tsx

@@ -0,0 +1,102 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import IconGroup from '@/assets/icons/icon-group.svg';
+import { Box, StyledLink, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { Pad } from '@/features/pads';
+
+import IconNone from '../assets/icon-none.svg';
+
+interface PadItemProps {
+  pad: Pad;
+}
+
+export const PadItem = ({ pad }: PadItemProps) => {
+  const { t } = useTranslation();
+  const { colorsTokens } = useCunninghamTheme();
+  const {
+    query: { id },
+  } = useRouter();
+
+  // There is at least 1 owner in the team
+  const hasMembers = pad.accesses.length > 1;
+  const isActive = pad.id === id;
+
+  const commonProps = {
+    className: 'p-t',
+    width: 52,
+    style: {
+      borderRadius: '10px',
+      flexShrink: 0,
+      background: '#fff',
+    },
+  };
+
+  const activeStyle = `
+    border-right: 4px solid ${colorsTokens()['primary-600']};
+    background: ${colorsTokens()['primary-400']};
+    span{
+      color: ${colorsTokens()['primary-text']};
+    }
+  `;
+
+  const hoverStyle = `
+    &:hover{
+      border-right: 4px solid ${colorsTokens()['primary-400']};
+      background: ${colorsTokens()['primary-300']};
+      
+      span{
+        color: ${colorsTokens()['primary-text']};
+      }
+    }
+  `;
+
+  return (
+    <Box
+      className="m-0"
+      as="li"
+      $css={`
+        transition: all 0.2s ease-in; 
+        border-right: 4px solid transparent;
+        ${isActive ? activeStyle : hoverStyle}
+      `}
+    >
+      <StyledLink className="p-s pt-t pb-t" href={`/pads/${pad.id}`}>
+        <Box $align="center" $direction="row" $gap="0.5rem">
+          {hasMembers ? (
+            <IconGroup
+              aria-label={t(`Teams icon`)}
+              color={colorsTokens()['primary-500']}
+              {...commonProps}
+              style={{
+                ...commonProps.style,
+                border: `1px solid ${colorsTokens()['primary-300']}`,
+              }}
+            />
+          ) : (
+            <IconNone
+              aria-label={t(`Empty teams icon`)}
+              color={colorsTokens()['greyscale-500']}
+              {...commonProps}
+              style={{
+                ...commonProps.style,
+                border: `1px solid ${colorsTokens()['greyscale-300']}`,
+              }}
+            />
+          )}
+          <Text
+            $weight="bold"
+            $color={!hasMembers ? colorsTokens()['greyscale-600'] : undefined}
+            $css={`
+              min-width: 14rem;
+            `}
+          >
+            {pad.name}
+          </Text>
+        </Box>
+      </StyledLink>
+    </Box>
+  );
+};

src/frontend/apps/impress/src/features/pads/pads-panel/components/PadList.tsx

@@ -0,0 +1,95 @@
+import { Loader } from '@openfun/cunningham-react';
+import React, { useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, Text } from '@/components';
+import { InfiniteScroll } from '@/components/InfiniteScroll';
+import { Pad } from '@/features/pads';
+
+import { usePads } from '../api';
+import { usePadStore } from '../store';
+
+import { PadItem } from './PadItem';
+
+interface PanelTeamsStateProps {
+  isLoading: boolean;
+  isError: boolean;
+  pads?: Pad[];
+}
+
+const PadListState = ({ isLoading, isError, pads }: PanelTeamsStateProps) => {
+  const { t } = useTranslation();
+
+  if (isError) {
+    return (
+      <Box $justify="center" className="mb-b">
+        <Text $theme="danger" $align="center" $textAlign="center">
+          {t('Something bad happens, please refresh the page.')}
+        </Text>
+      </Box>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Box $align="center" className="m-l">
+        <Loader />
+      </Box>
+    );
+  }
+
+  if (!pads?.length) {
+    return (
+      <Box $justify="center" className="m-s">
+        <Text as="p" className="mb-0 mt-0" $theme="greyscale" $variation="500">
+          {t('0 group to display.')}
+        </Text>
+        <Text as="p" $theme="greyscale" $variation="500">
+          {t(
+            'Create your first pad by clicking on the "Create a new pad" button.',
+          )}
+        </Text>
+      </Box>
+    );
+  }
+
+  return pads.map((pad) => <PadItem pad={pad} key={pad.id} />);
+};
+
+export const PadList = () => {
+  const ordering = usePadStore((state) => state.ordering);
+  const {
+    data,
+    isError,
+    isLoading,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = usePads({
+    ordering,
+  });
+  const containerRef = useRef<HTMLDivElement>(null);
+  const pads = useMemo(() => {
+    return data?.pages.reduce((acc, page) => {
+      return acc.concat(page.results);
+    }, [] as Pad[]);
+  }, [data?.pages]);
+
+  return (
+    <Box $css="overflow-y: auto; overflow-x: hidden;" ref={containerRef}>
+      <InfiniteScroll
+        hasMore={hasNextPage}
+        isLoading={isFetchingNextPage}
+        next={() => {
+          void fetchNextPage();
+        }}
+        scrollContainer={containerRef.current}
+        as="ul"
+        className="p-0 mt-0"
+        role="listbox"
+      >
+        <PadListState isLoading={isLoading} isError={isError} pads={pads} />
+      </InfiniteScroll>
+    </Box>
+  );
+};

src/frontend/apps/impress/src/features/pads/pads-panel/components/Panel.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, BoxButton, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+import IconOpenClose from '../assets/icon-open-close.svg';
+
+import { PadList } from './PadList';
+import { PanelActions } from './PanelActions';
+
+export const Panel = () => {
+  const { t } = useTranslation();
+  const { colorsTokens } = useCunninghamTheme();
+
+  const [isOpen, setIsOpen] = useState(true);
+
+  const closedOverridingStyles = !isOpen && {
+    $width: '0',
+    $maxWidth: '0',
+    $minWidth: '0',
+  };
+
+  const transition = 'all 0.5s ease-in-out';
+
+  return (
+    <Box
+      $width="100%"
+      $maxWidth="20rem"
+      $minWidth="14rem"
+      $css={`
+        position: relative;
+        border-right: 1px solid ${colorsTokens()['primary-300']};
+        transition: ${transition};
+      `}
+      $height="inherit"
+      aria-label="Teams panel"
+      {...closedOverridingStyles}
+    >
+      <BoxButton
+        aria-label={
+          isOpen ? t('Close the teams panel') : t('Open the teams panel')
+        }
+        $color={colorsTokens()['primary-600']}
+        $css={`
+          position: absolute;
+          right: -1.2rem;
+          top: 1.03rem;
+          transform: rotate(${isOpen ? '0' : '180'}deg);
+          transition: ${transition};
+        `}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <IconOpenClose width={24} height={24} />
+      </BoxButton>
+      <Box
+        $css={`
+          overflow: hidden;
+          opacity: ${isOpen ? '1' : '0'};
+          transition: ${transition};
+        `}
+      >
+        <Box
+          className="pr-l pl-s pt-s pb-s"
+          $direction="row"
+          $align="center"
+          $justify="space-between"
+          $css={`
+            border-bottom: 1px solid ${colorsTokens()['primary-300']};
+          `}
+        >
+          <Text $weight="bold" $size="1.25rem">
+            {t('Recents')}
+          </Text>
+          <PanelActions />
+        </Box>
+        <PadList />
+      </Box>
+    </Box>
+  );
+};

src/frontend/apps/impress/src/features/pads/pads-panel/components/PanelActions.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, BoxButton, StyledLink } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+import { PadsOrdering } from '../api';
+import IconAdd from '../assets/icon-add.svg';
+import IconSort from '../assets/icon-sort.svg';
+import { usePadStore } from '../store';
+
+export const PanelActions = () => {
+  const { t } = useTranslation();
+  const { changeOrdering, ordering } = usePadStore();
+  const { colorsTokens } = useCunninghamTheme();
+
+  const isSortAsc = ordering === PadsOrdering.BY_CREATED_ON;
+
+  return (
+    <Box
+      $direction="row"
+      $gap="1rem"
+      $css={`
+        & button {
+          padding: 0;
+
+          svg {
+            padding: 0.1rem;
+          }
+        }
+      `}
+    >
+      <BoxButton
+        aria-label={
+          isSortAsc
+            ? t('Sort the pads by creation date descendent')
+            : t('Sort the pads by creation date ascendent')
+        }
+        onClick={changeOrdering}
+        $radius="100%"
+        $background={isSortAsc ? colorsTokens()['primary-200'] : 'transparent'}
+        $color={colorsTokens()['primary-600']}
+      >
+        <IconSort width={30} height={30} aria-label={t('Sort pads icon')} />
+      </BoxButton>
+      <StyledLink href="/pads/create">
+        <BoxButton
+          aria-label={t('Add a pad')}
+          $color={colorsTokens()['primary-600']}
+        >
+          <IconAdd width={30} height={30} aria-label={t('Add pad icon')} />
+        </BoxButton>
+      </StyledLink>
+    </Box>
+  );
+};

src/frontend/apps/impress/src/features/pads/pads-panel/components/index.ts

@@ -0,0 +1 @@
+export * from './Panel';

src/frontend/apps/impress/src/features/pads/pads-panel/index.ts

@@ -0,0 +1,2 @@
+export * from './api';
+export * from './components';

src/frontend/apps/impress/src/features/pads/pads-panel/store/index.ts

@@ -0,0 +1 @@
+export * from './usePadStore';

src/frontend/apps/impress/src/features/pads/pads-panel/store/usePadStore.tsx

@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+
+import { PadsOrdering } from '../api/usePads';
+
+interface PadStore {
+  ordering: PadsOrdering;
+  changeOrdering: () => void;
+}
+
+export const usePadStore = create<PadStore>((set) => ({
+  ordering: PadsOrdering.BY_CREATED_ON_DESC,
+  changeOrdering: () =>
+    set(({ ordering }) => ({
+      ordering:
+        ordering === PadsOrdering.BY_CREATED_ON
+          ? PadsOrdering.BY_CREATED_ON_DESC
+          : PadsOrdering.BY_CREATED_ON,
+    })),
+}));

src/frontend/apps/impress/src/layouts/PadLayout.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 
 import { Box } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { Panel } from '@/features/pads-panel';
+import { Panel } from '@/features/pads';
 
 import { MainLayout } from './MainLayout';
 

src/frontend/apps/impress/src/pages/index.tsx

@@ -1,16 +1,16 @@
 import type { ReactElement } from 'react';
 
-import { TeamLayout } from '@/features/teams/';
+import { PadLayout } from '@/layouts';
 import { NextPageWithLayout } from '@/types/next';
 
-import Teams from './teams/';
+import Pads from './pads/';
 
 const Page: NextPageWithLayout = () => {
-  return <Teams />;
+  return <Pads />;
 };
 
 Page.getLayout = function getLayout(page: ReactElement) {
-  return <TeamLayout>{page}</TeamLayout>;
+  return <PadLayout>{page}</PadLayout>;
 };
 
 export default Page;