✨ Dont show inactive users in register view

frontend/src/features/Register.tsx

@@ -1,21 +1,25 @@
 import React from "react";
 
-import { Product, useAllProductsQuery } from "../types";
+import { Product, User } from "../types";
+import { useRegister } from "./useRegister";
 
 export const Register: React.FC = () => {
-  const { data, error, loading } = useAllProductsQuery({ variables: { active: true } });
-  if (error) {
-    console.log("🔥", error);
-    return null;
-  }
+  const { users, products, loading, showAll, setShowAll } = useRegister();
   if (loading) {
     return <div>...</div>;
   }
   return (
     <div>
-      {data?.allProducts.map((product: Product) => {
-        return <div key={product.id}>{product.name}</div>;
-      })}{" "}
+      <section>
+        {users.map((user: User) => {
+          return <div key={user.id}>{user.firstName}</div>;
+        })}
+      </section>
+      <section>
+        {products.map((product: Product) => {
+          return <div key={product.id}>{product.name}</div>;
+        })}
+      </section>
     </div>
   );
 };

frontend/src/features/allUsers.graphql

@@ -0,0 +1,13 @@
+query allUsers {
+  allUsers {
+    id
+    firstName
+    lastName
+    profile {
+      id
+      balance
+      image
+      lastPurchaseDate
+    }
+  }
+}

frontend/src/features/useRegister.ts

@@ -0,0 +1,23 @@
+import { parseISO, subDays } from "date-fns";
+import { useState } from "react";
+
+import { useAllProductsQuery, useAllUsersQuery, User } from "../types";
+
+const activeLimitDays = 365 / 2;
+
+export const useRegister = () => {
+  const [showAll, setShowAll] = useState(false);
+  const { data, loading } = useAllProductsQuery({ variables: { active: true } });
+  const { data: usersData, loading: usersLoading } = useAllUsersQuery();
+
+  const allUsers = usersData?.allUsers || [];
+  const users = showAll
+    ? allUsers
+    : allUsers.filter((user: User) => {
+        const balance = user.profile?.balance || 0;
+        const active = parseISO(user.profile?.lastPurchaseDate) >= subDays(new Date(), activeLimitDays);
+        return balance >= 15 && active;
+      });
+
+  return { loading: loading || usersLoading, users, products: data?.allProducts || [], showAll, setShowAll };
+};

frontend/src/types.ts

@@ -1,10 +1,10 @@
-import { gql } from "@apollo/client";
-import * as Apollo from "@apollo/client";
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
 export type Maybe<T> = T | null;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
 export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
-const defaultOptions = {};
+const defaultOptions =  {}
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
   ID: string;
@@ -12,49 +12,73 @@ export type Scalars = {
   Boolean: boolean;
   Int: number;
   Float: number;
+  /** Date with time (isoformat) */
+  DateTime: any;
 };
 
 export type Product = {
-  __typename?: "Product";
-  id: Scalars["ID"];
-  name: Scalars["String"];
-  salePriceExt: Scalars["Float"];
-  salePriceInt: Scalars["Float"];
+  __typename?: 'Product';
+  id: Scalars['ID'];
+  name: Scalars['String'];
+  salePriceExt: Scalars['Float'];
+  salePriceInt: Scalars['Float'];
 };
 
 export type ProductFilter = {
-  active?: Maybe<Scalars["Boolean"]>;
-  id?: Maybe<Scalars["ID"]>;
+  active?: Maybe<Scalars['Boolean']>;
+  id?: Maybe<Scalars['ID']>;
 };
 
 export type Query = {
-  __typename?: "Query";
+  __typename?: 'Query';
   allProducts: Array<Product>;
+  allUsers: Array<User>;
 };
 
+
 export type QueryAllProductsArgs = {
   filters?: Maybe<ProductFilter>;
 };
 
-export type AllProductsQueryVariables = Exact<{
-  active: Scalars["Boolean"];
-}>;
-
-export type AllProductsQuery = {
-  __typename?: "Query";
-  allProducts: Array<{ __typename?: "Product"; id: string; name: string; salePriceExt: number; salePriceInt: number }>;
+export type User = {
+  __typename?: 'User';
+  firstName: Scalars['String'];
+  id: Scalars['ID'];
+  lastName: Scalars['String'];
+  profile?: Maybe<UserProfile>;
 };
 
+export type UserProfile = {
+  __typename?: 'UserProfile';
+  balance: Scalars['Float'];
+  id: Scalars['ID'];
+  image: Scalars['String'];
+  lastPurchaseDate: Scalars['DateTime'];
+};
+
+export type AllProductsQueryVariables = Exact<{
+  active: Scalars['Boolean'];
+}>;
+
+
+export type AllProductsQuery = { __typename?: 'Query', allProducts: Array<{ __typename?: 'Product', id: string, name: string, salePriceExt: number, salePriceInt: number }> };
+
+export type AllUsersQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type AllUsersQuery = { __typename?: 'Query', allUsers: Array<{ __typename?: 'User', id: string, firstName: string, lastName: string, profile?: { __typename?: 'UserProfile', id: string, balance: number, image: string, lastPurchaseDate: any } | null | undefined }> };
+
+
 export const AllProductsDocument = gql`
-  query allProducts($active: Boolean!) {
-    allProducts(filters: { active: $active }) {
-      id
-      name
-      salePriceExt
-      salePriceInt
-    }
+    query allProducts($active: Boolean!) {
+  allProducts(filters: {active: $active}) {
+    id
+    name
+    salePriceExt
+    salePriceInt
   }
-`;
+}
+    `;
 
 /**
  * __useAllProductsQuery__
@@ -73,15 +97,55 @@ export const AllProductsDocument = gql`
  * });
  */
 export function useAllProductsQuery(baseOptions: Apollo.QueryHookOptions<AllProductsQuery, AllProductsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions };
-  return Apollo.useQuery<AllProductsQuery, AllProductsQueryVariables>(AllProductsDocument, options);
-}
-export function useAllProductsLazyQuery(
-  baseOptions?: Apollo.LazyQueryHookOptions<AllProductsQuery, AllProductsQueryVariables>
-) {
-  const options = { ...defaultOptions, ...baseOptions };
-  return Apollo.useLazyQuery<AllProductsQuery, AllProductsQueryVariables>(AllProductsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<AllProductsQuery, AllProductsQueryVariables>(AllProductsDocument, options);
+      }
+export function useAllProductsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AllProductsQuery, AllProductsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<AllProductsQuery, AllProductsQueryVariables>(AllProductsDocument, options);
+        }
 export type AllProductsQueryHookResult = ReturnType<typeof useAllProductsQuery>;
 export type AllProductsLazyQueryHookResult = ReturnType<typeof useAllProductsLazyQuery>;
 export type AllProductsQueryResult = Apollo.QueryResult<AllProductsQuery, AllProductsQueryVariables>;
+export const AllUsersDocument = gql`
+    query allUsers {
+  allUsers {
+    id
+    firstName
+    lastName
+    profile {
+      id
+      balance
+      image
+      lastPurchaseDate
+    }
+  }
+}
+    `;
+
+/**
+ * __useAllUsersQuery__
+ *
+ * To run a query within a React component, call `useAllUsersQuery` and pass it any options that fit your needs.
+ * When your component renders, `useAllUsersQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useAllUsersQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useAllUsersQuery(baseOptions?: Apollo.QueryHookOptions<AllUsersQuery, AllUsersQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<AllUsersQuery, AllUsersQueryVariables>(AllUsersDocument, options);
+      }
+export function useAllUsersLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AllUsersQuery, AllUsersQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<AllUsersQuery, AllUsersQueryVariables>(AllUsersDocument, options);
+        }
+export type AllUsersQueryHookResult = ReturnType<typeof useAllUsersQuery>;
+export type AllUsersLazyQueryHookResult = ReturnType<typeof useAllUsersLazyQuery>;
+export type AllUsersQueryResult = Apollo.QueryResult<AllUsersQuery, AllUsersQueryVariables>;