richie-education 2.25.0-b2.dev146 → 2.25.0-b2.dev148

package/js/hooks/useLearnerCoursesSearch/index.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Enrollment, CredentialOrder, OrderState, ProductType } from 'types/Joanie';
+import { Maybe, Nullable } from 'types/utils';
+import { useOrdersEnrollments } from 'pages/DashboardCourses/useOrdersEnrollments';
+
+const useLearnerCoursesSearch = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [count, setCount] = useState<Maybe<number>>();
+  const [orderAndEnrollmentList, setOrderAndEnrollmentList] = useState<
+    (CredentialOrder | Enrollment)[]
+  >([]);
+  const [isNewSearchLoading, setIsNewSearchLoading] = useState(false);
+  const query = searchParams.get('query') || undefined;
+  const {
+    data,
+    isLoading,
+    next,
+    hasMore,
+    count: currentCount,
+    error,
+  } = useOrdersEnrollments({
+    query,
+    orderFilters: {
+      product_type: [ProductType.CREDENTIAL],
+      state_exclude: [OrderState.CANCELED],
+    },
+  });
+
+  useEffect(() => {
+    if (!data.length && isLoading) {
+      setIsNewSearchLoading(true);
+    }
+
+    if (isLoading) {
+      return;
+    }
+
+    if (isNewSearchLoading) {
+      setIsNewSearchLoading(false);
+    }
+
+    if (isNewSearchLoading || data.length > orderAndEnrollmentList?.length) {
+      setOrderAndEnrollmentList(data as (CredentialOrder | Enrollment)[]);
+      setCount(currentCount);
+    }
+  }, [data.length, isLoading, isNewSearchLoading, query]);
+
+  const submitSearch = (newQuery: Nullable<string>) => {
+    if (newQuery === null) {
+      searchParams.delete('query');
+    } else {
+      searchParams.set('query', newQuery);
+    }
+
+    setSearchParams(searchParams);
+    if (!newQuery) {
+      setCount(undefined);
+    }
+  };
+
+  return {
+    query,
+    submitSearch,
+    data: orderAndEnrollmentList,
+    isNewSearchLoading,
+    isLoadingMore: isLoading && !isNewSearchLoading,
+    next,
+    hasMore,
+    count,
+    error,
+  };
+};
+export default useLearnerCoursesSearch;

package/js/hooks/useOrders.ts

@@ -22,6 +22,7 @@ export type OrderResourcesQuery = PaginatedResourceQuery & {
   state_exclude?: OrderState[];
   product_type?: ProductType[];
   product_type_exclude?: ProductType[];
+  query?: string;
 };
 
 const messages = defineMessages({

package/js/pages/DashboardCourses/_styles.scss

@@ -13,7 +13,6 @@
 .dashboard__courses {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
 
   &__list {
     gap: 1rem;

package/js/pages/DashboardCourses/index.spec.tsx

@@ -119,10 +119,12 @@ describe('<DashboardCourses/>', () => {
     expect(await screen.queryByRole('button', { name: 'Load more' })).not.toBeInTheDocument();
     await expectNoBannerInfo('You have no enrollments nor orders yet');
 
-    ordersDeferred.resolve({ results: [], next: null, previous: null, count: 0 });
-    enrollmentsDeferred.resolve({ results: [], next: null, previous: null, count: 0 });
+    act(() => {
+      ordersDeferred.resolve({ results: [], next: null, previous: null, count: 0 });
+      enrollmentsDeferred.resolve({ results: [], next: null, previous: null, count: 0 });
+    });
 
-    await expectNoSpinner('Loading orders and enrollments...');
+    // await expectNoSpinner('Loading orders and enrollments...');
     await expectBannerInfo('You have no enrollments nor orders yet.');
     expect(screen.queryByRole('button', { name: 'Load more' })).not.toBeInTheDocument();
   });

package/js/pages/DashboardCourses/index.tsx

@@ -1,17 +1,16 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useRef } from 'react';
 import { Button } from '@openfun/cunningham-react';
-import {
-  isCredentialOrder,
-  isEnrollment,
-  useOrdersEnrollments,
-} from 'pages/DashboardCourses/useOrdersEnrollments';
+import classNames from 'classnames';
+import { isCredentialOrder, isEnrollment } from 'pages/DashboardCourses/useOrdersEnrollments';
 import { Spinner } from 'components/Spinner';
 import { DashboardItemEnrollment } from 'widgets/Dashboard/components/DashboardItem/Enrollment/DashboardItemEnrollment';
 import { DashboardItemOrder } from 'widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder';
 import Banner, { BannerType } from 'components/Banner';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
-import { OrderState, ProductType } from 'types/Joanie';
+import SearchBar from 'widgets/Dashboard/components/SearchBar';
+import SearchResultsCount from 'widgets/Dashboard/components/SearchResultsCount';
+import useLearnerCoursesSearch from 'hooks/useLearnerCoursesSearch';
 
 const messages = defineMessages({
   loading: {
@@ -33,9 +32,17 @@ const messages = defineMessages({
 
 export const DashboardCourses = () => {
   const intl = useIntl();
-  const { next, data, hasMore, error, isLoading, count } = useOrdersEnrollments({
-    orderFilters: { product_type: [ProductType.CREDENTIAL], state_exclude: [OrderState.CANCELED] },
-  });
+  const {
+    data,
+    query,
+    isLoadingMore,
+    isNewSearchLoading,
+    next,
+    hasMore,
+    submitSearch,
+    count,
+    error,
+  } = useLearnerCoursesSearch();
 
   const loadMoreButtonRef = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
   useIntersectionObserver({
@@ -50,12 +57,20 @@ export const DashboardCourses = () => {
         <Banner message={error} type={BannerType.ERROR} />
       ) : (
         <>
-          {count === 0 && (
+          <SearchBar.Container>
+            <SearchBar onSubmit={submitSearch} />
+            <SearchResultsCount nbResults={count} />
+          </SearchBar.Container>
+          {count === 0 && !query && (
             <div className="dashboard__courses__empty">
               <Banner message={intl.formatMessage(messages.emptyList)} />
             </div>
           )}
-          <div className="dashboard__courses__list">
+          <div
+            className={classNames('dashboard__courses__list', {
+              'dashboard-course-list--fade': isNewSearchLoading,
+            })}
+          >
             {data.map((datum) => (
               <div
                 key={datum.id}
@@ -67,7 +82,7 @@ export const DashboardCourses = () => {
               </div>
             ))}
           </div>
-          {isLoading && (
+          {(isLoadingMore || isNewSearchLoading) && (
             <Spinner aria-labelledby="loading-orders-enrollments">
               <span id="loading-orders-enrollments">
                 <FormattedMessage {...messages.loading} />
@@ -77,7 +92,7 @@ export const DashboardCourses = () => {
           {hasMore && (
             <Button
               onClick={() => next()}
-              disabled={isLoading}
+              disabled={isLoadingMore}
               ref={loadMoreButtonRef}
               color="tertiary"
             >

package/js/pages/DashboardCourses/useOrdersEnrollments.tsx

@@ -1,11 +1,6 @@
 import { defineMessages } from 'react-intl';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
-import {
-  Enrollment,
-  PaginatedResourceQuery,
-  CredentialOrder,
-  CertificateOrder,
-} from 'types/Joanie';
+import { Enrollment, CredentialOrder, CertificateOrder, EnrollmentsQuery } from 'types/Joanie';
 import useUnionResource, { ResourceUnionPaginationProps } from 'hooks/useUnionResource';
 import { PER_PAGE } from 'settings';
 import { OrderResourcesQuery } from 'hooks/useOrders';
@@ -41,29 +36,32 @@ const messages = defineMessages({
 
 interface UseOrdersEnrollmentsProps extends ResourceUnionPaginationProps {
   orderFilters?: OrderResourcesQuery;
+  query?: string;
 }
 
 export const useOrdersEnrollments = ({
   perPage = PER_PAGE.useOrdersEnrollments,
+  query,
   orderFilters = {},
 }: UseOrdersEnrollmentsProps = {}) => {
   const api = useJoanieApi();
   return useUnionResource<
     CredentialOrder | CertificateOrder,
     Enrollment,
-    PaginatedResourceQuery,
-    { was_created_by_order: boolean } & PaginatedResourceQuery
+    OrderResourcesQuery,
+    EnrollmentsQuery
   >({
     queryAConfig: {
       queryKey: ['user', 'orders'],
       fn: api.user.orders.get,
-      filters: orderFilters,
+      filters: { ...orderFilters, query },
     },
     queryBConfig: {
       queryKey: ['user', 'enrollments'],
       fn: api.user.enrollments.get,
       filters: {
         was_created_by_order: false,
+        query,
       },
     },
     perPage,

package/js/pages/TeacherDashboardCoursesLoader/index.tsx

@@ -42,8 +42,10 @@ export const TeacherDashboardCoursesLoader = () => {
           </h1>
         </div>
 
-        <SearchBar onSubmit={submitSearch} />
-        <SearchResultsCount nbResults={count} />
+        <SearchBar.Container>
+          <SearchBar onSubmit={submitSearch} />
+          <SearchResultsCount nbResults={count} />
+        </SearchBar.Container>
       </div>
       <div className="teacher-courses-page">
         <TeacherDashboardCourseList

package/js/types/Joanie.ts

@@ -460,6 +460,7 @@ export interface PaginatedResourceQuery extends ResourcesQuery {
 export interface EnrollmentsQuery extends PaginatedResourceQuery {
   course_run_id?: CourseRun['id'];
   was_created_by_order?: boolean;
+  query?: string;
 }
 
 interface EnrollmentCreationPayload {

package/js/widgets/Dashboard/components/SearchBar/_styles.scss

@@ -1,12 +1,18 @@
 .dashboard-search-bar {
+  $spacing: rem-calc(5px);
+
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: rem-calc(8px);
-  margin-bottom: rem-calc(5px);
+  margin-bottom: $spacing;
 
   // TODO(rlecellier): cunningham should allow className on container
   .c__field {
     flex: 1 1 auto;
   }
+
+  &__container {
+    padding-bottom: $spacing;
+  }
 }

package/js/widgets/Dashboard/components/SearchBar/index.tsx

@@ -1,5 +1,5 @@
 import { Button, Input } from '@openfun/cunningham-react';
-import { MouseEvent, useRef, useState } from 'react';
+import { MouseEvent, PropsWithChildren, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useSearchParams } from 'react-router-dom';
 import { Nullable } from 'types/utils';
@@ -81,4 +81,8 @@ const SearchBar = ({ onSubmit }: SearchBarProps) => {
   );
 };
 
+SearchBar.Container = ({ children }: PropsWithChildren) => {
+  return <div className="dashboard-search-bar__container">{children}</div>;
+};
+
 export default SearchBar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.25.0-b2.dev146",
+  "version": "2.25.0-b2.dev148",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {