feat: Favorites (#1094)
* Adding the favorite button * favorites services and resolvers * favorites schema * favorite ability handler * favorite module export * front end UI * front end graphql additions * server ability handlers * server resolvers and services * css fix * Adding the favorite button * favorites services and resolvers * favorites schema * favorite ability handler * favorite module export * front end UI * front end graphql additions * server ability handlers * server resolvers and services * css fix * delete favorites handler and resolver * removed favorite from index list * chip avatar size props * index list additions * UI additions for favorites functionality * lint fixes * graphql codegen * UI fixes * favorite hook addition * moved to ~/modules * Favorite mapping to workspaceMember * graphql codegen * cosmetic changes * camel cased methods * graphql codegen
This commit is contained in:
Aditya Pimpalkar
@ -2,6 +2,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useTheme } from '@emotion/react';
|
||||
|
||||
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
|
||||
import { Favorites } from '@/favorites/components/Favorites';
|
||||
import { SettingsNavbar } from '@/settings/components/SettingsNavbar';
|
||||
import {
|
||||
IconBell,
|
||||
@ -56,6 +57,8 @@ export function AppNavbar() {
|
||||
active={currentPath === '/tasks'}
|
||||
icon={<IconCheckbox size={theme.icon.size.md} />}
|
||||
/>
|
||||
<NavTitle label="Favorite" />
|
||||
<Favorites />
|
||||
<NavTitle label="Workspace" />
|
||||
<NavItem
|
||||
label="Companies"
|
||||
|
||||
@ -640,6 +640,7 @@ export enum CommentableType {
|
||||
export type Company = {
|
||||
__typename?: 'Company';
|
||||
ActivityTarget?: Maybe<Array<ActivityTarget>>;
|
||||
Favorite?: Maybe<Array<Favorite>>;
|
||||
PipelineProgress?: Maybe<Array<PipelineProgress>>;
|
||||
_activityCount: Scalars['Int'];
|
||||
accountOwner?: Maybe<User>;
|
||||
@ -659,6 +660,7 @@ export type Company = {
|
||||
|
||||
export type CompanyCreateInput = {
|
||||
ActivityTarget?: InputMaybe<ActivityTargetCreateNestedManyWithoutCompanyInput>;
|
||||
Favorite?: InputMaybe<FavoriteCreateNestedManyWithoutCompanyInput>;
|
||||
PipelineProgress?: InputMaybe<PipelineProgressCreateNestedManyWithoutCompanyInput>;
|
||||
accountOwner?: InputMaybe<UserCreateNestedOneWithoutCompaniesInput>;
|
||||
address: Scalars['String'];
|
||||
@ -696,6 +698,7 @@ export type CompanyOrderByRelationAggregateInput = {
|
||||
|
||||
export type CompanyOrderByWithRelationInput = {
|
||||
ActivityTarget?: InputMaybe<ActivityTargetOrderByRelationAggregateInput>;
|
||||
Favorite?: InputMaybe<FavoriteOrderByRelationAggregateInput>;
|
||||
PipelineProgress?: InputMaybe<PipelineProgressOrderByRelationAggregateInput>;
|
||||
accountOwner?: InputMaybe<UserOrderByWithRelationInput>;
|
||||
accountOwnerId?: InputMaybe<SortOrder>;
|
||||
@ -731,6 +734,7 @@ export enum CompanyScalarFieldEnum {
|
||||
|
||||
export type CompanyUpdateInput = {
|
||||
ActivityTarget?: InputMaybe<ActivityTargetUpdateManyWithoutCompanyNestedInput>;
|
||||
Favorite?: InputMaybe<FavoriteUpdateManyWithoutCompanyNestedInput>;
|
||||
PipelineProgress?: InputMaybe<PipelineProgressUpdateManyWithoutCompanyNestedInput>;
|
||||
accountOwner?: InputMaybe<UserUpdateOneWithoutCompaniesNestedInput>;
|
||||
address?: InputMaybe<Scalars['String']>;
|
||||
@ -769,6 +773,7 @@ export type CompanyUpdateOneWithoutPipelineProgressNestedInput = {
|
||||
export type CompanyWhereInput = {
|
||||
AND?: InputMaybe<Array<CompanyWhereInput>>;
|
||||
ActivityTarget?: InputMaybe<ActivityTargetListRelationFilter>;
|
||||
Favorite?: InputMaybe<FavoriteListRelationFilter>;
|
||||
NOT?: InputMaybe<Array<CompanyWhereInput>>;
|
||||
OR?: InputMaybe<Array<CompanyWhereInput>>;
|
||||
PipelineProgress?: InputMaybe<PipelineProgressListRelationFilter>;
|
||||
@ -860,6 +865,71 @@ export type EnumViewTypeFilter = {
|
||||
notIn?: InputMaybe<Array<ViewType>>;
|
||||
};
|
||||
|
||||
export type Favorite = {
|
||||
__typename?: 'Favorite';
|
||||
company?: Maybe<Company>;
|
||||
companyId?: Maybe<Scalars['String']>;
|
||||
id: Scalars['ID'];
|
||||
person?: Maybe<Person>;
|
||||
personId?: Maybe<Scalars['String']>;
|
||||
workspaceId?: Maybe<Scalars['String']>;
|
||||
workspaceMember?: Maybe<WorkspaceMember>;
|
||||
workspaceMemberId?: Maybe<Scalars['String']>;
|
||||
};
|
||||
|
||||
export type FavoriteCreateNestedManyWithoutCompanyInput = {
|
||||
connect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
|
||||
};
|
||||
|
||||
export type FavoriteCreateNestedManyWithoutPersonInput = {
|
||||
connect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
|
||||
};
|
||||
|
||||
export type FavoriteListRelationFilter = {
|
||||
every?: InputMaybe<FavoriteWhereInput>;
|
||||
none?: InputMaybe<FavoriteWhereInput>;
|
||||
some?: InputMaybe<FavoriteWhereInput>;
|
||||
};
|
||||
|
||||
export type FavoriteMutationForCompanyArgs = {
|
||||
companyId: Scalars['String'];
|
||||
};
|
||||
|
||||
export type FavoriteMutationForPersonArgs = {
|
||||
personId: Scalars['String'];
|
||||
};
|
||||
|
||||
export type FavoriteOrderByRelationAggregateInput = {
|
||||
_count?: InputMaybe<SortOrder>;
|
||||
};
|
||||
|
||||
export type FavoriteUpdateManyWithoutCompanyNestedInput = {
|
||||
connect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
|
||||
disconnect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
|
||||
set?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
|
||||
};
|
||||
|
||||
export type FavoriteUpdateManyWithoutPersonNestedInput = {
|
||||
connect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
|
||||
disconnect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
|
||||
set?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
|
||||
};
|
||||
|
||||
export type FavoriteWhereInput = {
|
||||
AND?: InputMaybe<Array<FavoriteWhereInput>>;
|
||||
NOT?: InputMaybe<Array<FavoriteWhereInput>>;
|
||||
OR?: InputMaybe<Array<FavoriteWhereInput>>;
|
||||
companyId?: InputMaybe<StringNullableFilter>;
|
||||
id?: InputMaybe<StringFilter>;
|
||||
personId?: InputMaybe<StringNullableFilter>;
|
||||
workspaceId?: InputMaybe<StringNullableFilter>;
|
||||
workspaceMemberId?: InputMaybe<StringNullableFilter>;
|
||||
};
|
||||
|
||||
export type FavoriteWhereUniqueInput = {
|
||||
id?: InputMaybe<Scalars['String']>;
|
||||
};
|
||||
|
||||
export enum FileFolder {
|
||||
Attachment = 'Attachment',
|
||||
PersonPicture = 'PersonPicture',
|
||||
@ -915,6 +985,8 @@ export type Mutation = {
|
||||
allowImpersonation: WorkspaceMember;
|
||||
challenge: LoginToken;
|
||||
createEvent: Analytics;
|
||||
createFavoriteForCompany: Favorite;
|
||||
createFavoriteForPerson: Favorite;
|
||||
createManyViewField: AffectedRows;
|
||||
createManyViewSort: AffectedRows;
|
||||
createOneActivity: Activity;
|
||||
@ -924,6 +996,7 @@ export type Mutation = {
|
||||
createOnePipelineProgress: PipelineProgress;
|
||||
createOneViewField: ViewField;
|
||||
deleteCurrentWorkspace: Workspace;
|
||||
deleteFavorite: Favorite;
|
||||
deleteManyActivities: AffectedRows;
|
||||
deleteManyCompany: AffectedRows;
|
||||
deleteManyPerson: AffectedRows;
|
||||
@ -970,6 +1043,16 @@ export type MutationCreateEventArgs = {
|
||||
};
|
||||
|
||||
|
||||
export type MutationCreateFavoriteForCompanyArgs = {
|
||||
data: FavoriteMutationForCompanyArgs;
|
||||
};
|
||||
|
||||
|
||||
export type MutationCreateFavoriteForPersonArgs = {
|
||||
data: FavoriteMutationForPersonArgs;
|
||||
};
|
||||
|
||||
|
||||
export type MutationCreateManyViewFieldArgs = {
|
||||
data: Array<ViewFieldCreateManyInput>;
|
||||
skipDuplicates?: InputMaybe<Scalars['Boolean']>;
|
||||
@ -1012,6 +1095,11 @@ export type MutationCreateOneViewFieldArgs = {
|
||||
};
|
||||
|
||||
|
||||
export type MutationDeleteFavoriteArgs = {
|
||||
where: FavoriteWhereInput;
|
||||
};
|
||||
|
||||
|
||||
export type MutationDeleteManyActivitiesArgs = {
|
||||
where?: InputMaybe<ActivityWhereInput>;
|
||||
};
|
||||
@ -1279,6 +1367,7 @@ export type NestedStringNullableFilter = {
|
||||
export type Person = {
|
||||
__typename?: 'Person';
|
||||
ActivityTarget?: Maybe<Array<ActivityTarget>>;
|
||||
Favorite?: Maybe<Array<Favorite>>;
|
||||
PipelineProgress?: Maybe<Array<PipelineProgress>>;
|
||||
_activityCount: Scalars['Int'];
|
||||
activities: Array<Activity>;
|
||||
@ -1303,6 +1392,7 @@ export type Person = {
|
||||
|
||||
export type PersonCreateInput = {
|
||||
ActivityTarget?: InputMaybe<ActivityTargetCreateNestedManyWithoutPersonInput>;
|
||||
Favorite?: InputMaybe<FavoriteCreateNestedManyWithoutPersonInput>;
|
||||
PipelineProgress?: InputMaybe<PipelineProgressCreateNestedManyWithoutPersonInput>;
|
||||
avatarUrl?: InputMaybe<Scalars['String']>;
|
||||
city?: InputMaybe<Scalars['String']>;
|
||||
@ -1348,6 +1438,7 @@ export type PersonOrderByRelationAggregateInput = {
|
||||
|
||||
export type PersonOrderByWithRelationInput = {
|
||||
ActivityTarget?: InputMaybe<ActivityTargetOrderByRelationAggregateInput>;
|
||||
Favorite?: InputMaybe<FavoriteOrderByRelationAggregateInput>;
|
||||
PipelineProgress?: InputMaybe<PipelineProgressOrderByRelationAggregateInput>;
|
||||
avatarUrl?: InputMaybe<SortOrder>;
|
||||
city?: InputMaybe<SortOrder>;
|
||||
@ -1391,6 +1482,7 @@ export enum PersonScalarFieldEnum {
|
||||
|
||||
export type PersonUpdateInput = {
|
||||
ActivityTarget?: InputMaybe<ActivityTargetUpdateManyWithoutPersonNestedInput>;
|
||||
Favorite?: InputMaybe<FavoriteUpdateManyWithoutPersonNestedInput>;
|
||||
PipelineProgress?: InputMaybe<PipelineProgressUpdateManyWithoutPersonNestedInput>;
|
||||
avatarUrl?: InputMaybe<Scalars['String']>;
|
||||
city?: InputMaybe<Scalars['String']>;
|
||||
@ -1433,6 +1525,7 @@ export type PersonUpdateOneWithoutPipelineProgressNestedInput = {
|
||||
export type PersonWhereInput = {
|
||||
AND?: InputMaybe<Array<PersonWhereInput>>;
|
||||
ActivityTarget?: InputMaybe<ActivityTargetListRelationFilter>;
|
||||
Favorite?: InputMaybe<FavoriteListRelationFilter>;
|
||||
NOT?: InputMaybe<Array<PersonWhereInput>>;
|
||||
OR?: InputMaybe<Array<PersonWhereInput>>;
|
||||
PipelineProgress?: InputMaybe<PipelineProgressListRelationFilter>;
|
||||
@ -1806,6 +1899,7 @@ export type Query = {
|
||||
clientConfig: ClientConfig;
|
||||
currentUser: User;
|
||||
currentWorkspace: Workspace;
|
||||
findFavorites: Array<Favorite>;
|
||||
findManyActivities: Array<Activity>;
|
||||
findManyCompany: Array<Company>;
|
||||
findManyPerson: Array<Person>;
|
||||
@ -2507,6 +2601,7 @@ export type WorkspaceInviteHashValid = {
|
||||
|
||||
export type WorkspaceMember = {
|
||||
__typename?: 'WorkspaceMember';
|
||||
Favorite?: Maybe<Array<Favorite>>;
|
||||
allowImpersonation: Scalars['Boolean'];
|
||||
createdAt: Scalars['DateTime'];
|
||||
id: Scalars['ID'];
|
||||
@ -2517,6 +2612,7 @@ export type WorkspaceMember = {
|
||||
};
|
||||
|
||||
export type WorkspaceMemberOrderByWithRelationInput = {
|
||||
Favorite?: InputMaybe<FavoriteOrderByRelationAggregateInput>;
|
||||
allowImpersonation?: InputMaybe<SortOrder>;
|
||||
createdAt?: InputMaybe<SortOrder>;
|
||||
id?: InputMaybe<SortOrder>;
|
||||
@ -2543,6 +2639,7 @@ export type WorkspaceMemberUpdateManyWithoutWorkspaceNestedInput = {
|
||||
|
||||
export type WorkspaceMemberWhereInput = {
|
||||
AND?: InputMaybe<Array<WorkspaceMemberWhereInput>>;
|
||||
Favorite?: InputMaybe<FavoriteListRelationFilter>;
|
||||
NOT?: InputMaybe<Array<WorkspaceMemberWhereInput>>;
|
||||
OR?: InputMaybe<Array<WorkspaceMemberWhereInput>>;
|
||||
allowImpersonation?: InputMaybe<BoolFilter>;
|
||||
@ -2734,7 +2831,7 @@ export type GetCompanyQueryVariables = Exact<{
|
||||
}>;
|
||||
|
||||
|
||||
export type GetCompanyQuery = { __typename?: 'Query', findUniqueCompany: { __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, linkedinUrl?: string | null, employees?: number | null, _activityCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, avatarUrl?: string | null } | null } };
|
||||
export type GetCompanyQuery = { __typename?: 'Query', findUniqueCompany: { __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, linkedinUrl?: string | null, employees?: number | null, _activityCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, avatarUrl?: string | null } | null, Favorite?: Array<{ __typename?: 'Favorite', id: string, person?: { __typename?: 'Person', id: string } | null, company?: { __typename?: 'Company', id: string } | null }> | null } };
|
||||
|
||||
export type UpdateOneCompanyMutationVariables = Exact<{
|
||||
where: CompanyWhereUniqueInput;
|
||||
@ -2760,6 +2857,32 @@ export type DeleteManyCompaniesMutationVariables = Exact<{
|
||||
|
||||
export type DeleteManyCompaniesMutation = { __typename?: 'Mutation', deleteManyCompany: { __typename?: 'AffectedRows', count: number } };
|
||||
|
||||
export type GetFavoritesQueryVariables = Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
||||
export type GetFavoritesQuery = { __typename?: 'Query', findFavorites: Array<{ __typename?: 'Favorite', id: string, person?: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null } | null, company?: { __typename?: 'Company', id: string, name: string, domainName: string, accountOwner?: { __typename?: 'User', id: string, displayName: string, avatarUrl?: string | null } | null } | null }> };
|
||||
|
||||
export type InsertPersonFavoriteMutationVariables = Exact<{
|
||||
data: FavoriteMutationForPersonArgs;
|
||||
}>;
|
||||
|
||||
|
||||
export type InsertPersonFavoriteMutation = { __typename?: 'Mutation', createFavoriteForPerson: { __typename?: 'Favorite', id: string, person?: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string } | null } };
|
||||
|
||||
export type InsertCompanyFavoriteMutationVariables = Exact<{
|
||||
data: FavoriteMutationForCompanyArgs;
|
||||
}>;
|
||||
|
||||
|
||||
export type InsertCompanyFavoriteMutation = { __typename?: 'Mutation', createFavoriteForCompany: { __typename?: 'Favorite', id: string, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null } };
|
||||
|
||||
export type DeleteFavoriteMutationVariables = Exact<{
|
||||
where: FavoriteWhereInput;
|
||||
}>;
|
||||
|
||||
|
||||
export type DeleteFavoriteMutation = { __typename?: 'Mutation', deleteFavorite: { __typename?: 'Favorite', id: string } };
|
||||
|
||||
export type GetPeopleQueryVariables = Exact<{
|
||||
orderBy?: InputMaybe<Array<PersonOrderByWithRelationInput> | PersonOrderByWithRelationInput>;
|
||||
where?: InputMaybe<PersonWhereInput>;
|
||||
@ -2823,7 +2946,7 @@ export type GetPersonQueryVariables = Exact<{
|
||||
}>;
|
||||
|
||||
|
||||
export type GetPersonQuery = { __typename?: 'Query', findUniquePerson: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, email?: string | null, createdAt: string, city?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, xUrl?: string | null, avatarUrl?: string | null, phone?: string | null, _activityCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null } };
|
||||
export type GetPersonQuery = { __typename?: 'Query', findUniquePerson: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, email?: string | null, createdAt: string, city?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, xUrl?: string | null, avatarUrl?: string | null, phone?: string | null, _activityCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null, Favorite?: Array<{ __typename?: 'Favorite', id: string, person?: { __typename?: 'Person', id: string } | null, company?: { __typename?: 'Company', id: string } | null }> | null } };
|
||||
|
||||
export type UpdateOnePersonMutationVariables = Exact<{
|
||||
where: PersonWhereUniqueInput;
|
||||
@ -4097,6 +4220,15 @@ export const GetCompanyDocument = gql`
|
||||
displayName
|
||||
avatarUrl
|
||||
}
|
||||
Favorite {
|
||||
id
|
||||
person {
|
||||
id
|
||||
}
|
||||
company {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -4241,6 +4373,166 @@ export function useDeleteManyCompaniesMutation(baseOptions?: Apollo.MutationHook
|
||||
export type DeleteManyCompaniesMutationHookResult = ReturnType<typeof useDeleteManyCompaniesMutation>;
|
||||
export type DeleteManyCompaniesMutationResult = Apollo.MutationResult<DeleteManyCompaniesMutation>;
|
||||
export type DeleteManyCompaniesMutationOptions = Apollo.BaseMutationOptions<DeleteManyCompaniesMutation, DeleteManyCompaniesMutationVariables>;
|
||||
export const GetFavoritesDocument = gql`
|
||||
query GetFavorites {
|
||||
findFavorites {
|
||||
id
|
||||
person {
|
||||
id
|
||||
firstName
|
||||
lastName
|
||||
avatarUrl
|
||||
}
|
||||
company {
|
||||
id
|
||||
name
|
||||
domainName
|
||||
accountOwner {
|
||||
id
|
||||
displayName
|
||||
avatarUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* __useGetFavoritesQuery__
|
||||
*
|
||||
* To run a query within a React component, call `useGetFavoritesQuery` and pass it any options that fit your needs.
|
||||
* When your component renders, `useGetFavoritesQuery` 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 } = useGetFavoritesQuery({
|
||||
* variables: {
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useGetFavoritesQuery(baseOptions?: Apollo.QueryHookOptions<GetFavoritesQuery, GetFavoritesQueryVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return Apollo.useQuery<GetFavoritesQuery, GetFavoritesQueryVariables>(GetFavoritesDocument, options);
|
||||
}
|
||||
export function useGetFavoritesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetFavoritesQuery, GetFavoritesQueryVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return Apollo.useLazyQuery<GetFavoritesQuery, GetFavoritesQueryVariables>(GetFavoritesDocument, options);
|
||||
}
|
||||
export type GetFavoritesQueryHookResult = ReturnType<typeof useGetFavoritesQuery>;
|
||||
export type GetFavoritesLazyQueryHookResult = ReturnType<typeof useGetFavoritesLazyQuery>;
|
||||
export type GetFavoritesQueryResult = Apollo.QueryResult<GetFavoritesQuery, GetFavoritesQueryVariables>;
|
||||
export const InsertPersonFavoriteDocument = gql`
|
||||
mutation InsertPersonFavorite($data: FavoriteMutationForPersonArgs!) {
|
||||
createFavoriteForPerson(data: $data) {
|
||||
id
|
||||
person {
|
||||
id
|
||||
firstName
|
||||
lastName
|
||||
displayName
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
export type InsertPersonFavoriteMutationFn = Apollo.MutationFunction<InsertPersonFavoriteMutation, InsertPersonFavoriteMutationVariables>;
|
||||
|
||||
/**
|
||||
* __useInsertPersonFavoriteMutation__
|
||||
*
|
||||
* To run a mutation, you first call `useInsertPersonFavoriteMutation` within a React component and pass it any options that fit your needs.
|
||||
* When your component renders, `useInsertPersonFavoriteMutation` returns a tuple that includes:
|
||||
* - A mutate function that you can call at any time to execute the mutation
|
||||
* - An object with fields that represent the current status of the mutation's execution
|
||||
*
|
||||
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
|
||||
*
|
||||
* @example
|
||||
* const [insertPersonFavoriteMutation, { data, loading, error }] = useInsertPersonFavoriteMutation({
|
||||
* variables: {
|
||||
* data: // value for 'data'
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useInsertPersonFavoriteMutation(baseOptions?: Apollo.MutationHookOptions<InsertPersonFavoriteMutation, InsertPersonFavoriteMutationVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return Apollo.useMutation<InsertPersonFavoriteMutation, InsertPersonFavoriteMutationVariables>(InsertPersonFavoriteDocument, options);
|
||||
}
|
||||
export type InsertPersonFavoriteMutationHookResult = ReturnType<typeof useInsertPersonFavoriteMutation>;
|
||||
export type InsertPersonFavoriteMutationResult = Apollo.MutationResult<InsertPersonFavoriteMutation>;
|
||||
export type InsertPersonFavoriteMutationOptions = Apollo.BaseMutationOptions<InsertPersonFavoriteMutation, InsertPersonFavoriteMutationVariables>;
|
||||
export const InsertCompanyFavoriteDocument = gql`
|
||||
mutation InsertCompanyFavorite($data: FavoriteMutationForCompanyArgs!) {
|
||||
createFavoriteForCompany(data: $data) {
|
||||
id
|
||||
company {
|
||||
id
|
||||
name
|
||||
domainName
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
export type InsertCompanyFavoriteMutationFn = Apollo.MutationFunction<InsertCompanyFavoriteMutation, InsertCompanyFavoriteMutationVariables>;
|
||||
|
||||
/**
|
||||
* __useInsertCompanyFavoriteMutation__
|
||||
*
|
||||
* To run a mutation, you first call `useInsertCompanyFavoriteMutation` within a React component and pass it any options that fit your needs.
|
||||
* When your component renders, `useInsertCompanyFavoriteMutation` returns a tuple that includes:
|
||||
* - A mutate function that you can call at any time to execute the mutation
|
||||
* - An object with fields that represent the current status of the mutation's execution
|
||||
*
|
||||
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
|
||||
*
|
||||
* @example
|
||||
* const [insertCompanyFavoriteMutation, { data, loading, error }] = useInsertCompanyFavoriteMutation({
|
||||
* variables: {
|
||||
* data: // value for 'data'
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useInsertCompanyFavoriteMutation(baseOptions?: Apollo.MutationHookOptions<InsertCompanyFavoriteMutation, InsertCompanyFavoriteMutationVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return Apollo.useMutation<InsertCompanyFavoriteMutation, InsertCompanyFavoriteMutationVariables>(InsertCompanyFavoriteDocument, options);
|
||||
}
|
||||
export type InsertCompanyFavoriteMutationHookResult = ReturnType<typeof useInsertCompanyFavoriteMutation>;
|
||||
export type InsertCompanyFavoriteMutationResult = Apollo.MutationResult<InsertCompanyFavoriteMutation>;
|
||||
export type InsertCompanyFavoriteMutationOptions = Apollo.BaseMutationOptions<InsertCompanyFavoriteMutation, InsertCompanyFavoriteMutationVariables>;
|
||||
export const DeleteFavoriteDocument = gql`
|
||||
mutation DeleteFavorite($where: FavoriteWhereInput!) {
|
||||
deleteFavorite(where: $where) {
|
||||
id
|
||||
}
|
||||
}
|
||||
`;
|
||||
export type DeleteFavoriteMutationFn = Apollo.MutationFunction<DeleteFavoriteMutation, DeleteFavoriteMutationVariables>;
|
||||
|
||||
/**
|
||||
* __useDeleteFavoriteMutation__
|
||||
*
|
||||
* To run a mutation, you first call `useDeleteFavoriteMutation` within a React component and pass it any options that fit your needs.
|
||||
* When your component renders, `useDeleteFavoriteMutation` returns a tuple that includes:
|
||||
* - A mutate function that you can call at any time to execute the mutation
|
||||
* - An object with fields that represent the current status of the mutation's execution
|
||||
*
|
||||
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
|
||||
*
|
||||
* @example
|
||||
* const [deleteFavoriteMutation, { data, loading, error }] = useDeleteFavoriteMutation({
|
||||
* variables: {
|
||||
* where: // value for 'where'
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useDeleteFavoriteMutation(baseOptions?: Apollo.MutationHookOptions<DeleteFavoriteMutation, DeleteFavoriteMutationVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return Apollo.useMutation<DeleteFavoriteMutation, DeleteFavoriteMutationVariables>(DeleteFavoriteDocument, options);
|
||||
}
|
||||
export type DeleteFavoriteMutationHookResult = ReturnType<typeof useDeleteFavoriteMutation>;
|
||||
export type DeleteFavoriteMutationResult = Apollo.MutationResult<DeleteFavoriteMutation>;
|
||||
export type DeleteFavoriteMutationOptions = Apollo.BaseMutationOptions<DeleteFavoriteMutation, DeleteFavoriteMutationVariables>;
|
||||
export const GetPeopleDocument = gql`
|
||||
query GetPeople($orderBy: [PersonOrderByWithRelationInput!], $where: PersonWhereInput, $limit: Int) {
|
||||
people: findManyPerson(orderBy: $orderBy, where: $where, take: $limit) {
|
||||
@ -4575,6 +4867,15 @@ export const GetPersonDocument = gql`
|
||||
name
|
||||
domainName
|
||||
}
|
||||
Favorite {
|
||||
id
|
||||
person {
|
||||
id
|
||||
}
|
||||
company {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -19,6 +19,15 @@ export const GET_COMPANY = gql`
|
||||
displayName
|
||||
avatarUrl
|
||||
}
|
||||
Favorite {
|
||||
id
|
||||
person {
|
||||
id
|
||||
}
|
||||
company {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
63
front/src/modules/favorites/components/Favorites.tsx
Normal file
63
front/src/modules/favorites/components/Favorites.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import NavItem from '@/ui/navbar/components/NavItem';
|
||||
import { Avatar } from '@/users/components/Avatar';
|
||||
import { useGetFavoritesQuery } from '~/generated/graphql';
|
||||
import { getLogoUrlFromDomainName } from '~/utils';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export function Favorites() {
|
||||
const { data } = useGetFavoritesQuery();
|
||||
const favorites = data?.findFavorites;
|
||||
|
||||
if (!favorites) return <></>;
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
{favorites &&
|
||||
favorites.map(
|
||||
({ id, person, company }) =>
|
||||
(person && (
|
||||
<NavItem
|
||||
key={id}
|
||||
label={`${person.firstName} ${person.lastName}`}
|
||||
icon={
|
||||
<Avatar
|
||||
key={id}
|
||||
avatarUrl={person.avatarUrl ?? ''}
|
||||
type="rounded"
|
||||
placeholder={`${person.firstName} ${person.lastName}`}
|
||||
size="md"
|
||||
/>
|
||||
}
|
||||
to={`/person/${person.id}`}
|
||||
/>
|
||||
)) ||
|
||||
(company && (
|
||||
<NavItem
|
||||
key={id}
|
||||
label={company.name}
|
||||
icon={
|
||||
<Avatar
|
||||
key={id}
|
||||
avatarUrl={
|
||||
getLogoUrlFromDomainName(company.domainName) ?? ''
|
||||
}
|
||||
type="squared"
|
||||
placeholder={company.name}
|
||||
size="md"
|
||||
/>
|
||||
}
|
||||
to={`/companies/${company.id}`}
|
||||
/>
|
||||
)),
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
84
front/src/modules/favorites/hooks/useFavorites.ts
Normal file
84
front/src/modules/favorites/hooks/useFavorites.ts
Normal file
@ -0,0 +1,84 @@
|
||||
import { getOperationName } from '@apollo/client/utilities';
|
||||
|
||||
import { GET_COMPANY } from '@/companies/queries';
|
||||
import { GET_PERSON } from '@/people/queries/show';
|
||||
import {
|
||||
useDeleteFavoriteMutation,
|
||||
useInsertCompanyFavoriteMutation,
|
||||
useInsertPersonFavoriteMutation,
|
||||
} from '~/generated/graphql';
|
||||
|
||||
import { GET_FAVORITES } from '../queries/show';
|
||||
|
||||
export function useFavorites() {
|
||||
const [insertCompanyFavoriteMutation] = useInsertCompanyFavoriteMutation();
|
||||
const [insertPersonFavoriteMutation] = useInsertPersonFavoriteMutation();
|
||||
const [deleteFavoriteMutation] = useDeleteFavoriteMutation();
|
||||
|
||||
function insertCompanyFavorite(companyId: string) {
|
||||
insertCompanyFavoriteMutation({
|
||||
variables: {
|
||||
data: {
|
||||
companyId,
|
||||
},
|
||||
},
|
||||
refetchQueries: [
|
||||
getOperationName(GET_FAVORITES) ?? '',
|
||||
getOperationName(GET_COMPANY) ?? '',
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
function insertPersonFavorite(personId: string) {
|
||||
insertPersonFavoriteMutation({
|
||||
variables: {
|
||||
data: {
|
||||
personId,
|
||||
},
|
||||
},
|
||||
refetchQueries: [
|
||||
getOperationName(GET_FAVORITES) ?? '',
|
||||
getOperationName(GET_PERSON) ?? '',
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
function deleteCompanyFavorite(companyId: string) {
|
||||
deleteFavoriteMutation({
|
||||
variables: {
|
||||
where: {
|
||||
companyId: {
|
||||
equals: companyId,
|
||||
},
|
||||
},
|
||||
},
|
||||
refetchQueries: [
|
||||
getOperationName(GET_FAVORITES) ?? '',
|
||||
getOperationName(GET_COMPANY) ?? '',
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
function deletePersonFavorite(personId: string) {
|
||||
deleteFavoriteMutation({
|
||||
variables: {
|
||||
where: {
|
||||
personId: {
|
||||
equals: personId,
|
||||
},
|
||||
},
|
||||
},
|
||||
refetchQueries: [
|
||||
getOperationName(GET_FAVORITES) ?? '',
|
||||
getOperationName(GET_PERSON) ?? '',
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
insertCompanyFavorite,
|
||||
insertPersonFavorite,
|
||||
deleteCompanyFavorite,
|
||||
deletePersonFavorite,
|
||||
};
|
||||
}
|
||||
25
front/src/modules/favorites/queries/show.ts
Normal file
25
front/src/modules/favorites/queries/show.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { gql } from '@apollo/client';
|
||||
|
||||
export const GET_FAVORITES = gql`
|
||||
query GetFavorites {
|
||||
findFavorites {
|
||||
id
|
||||
person {
|
||||
id
|
||||
firstName
|
||||
lastName
|
||||
avatarUrl
|
||||
}
|
||||
company {
|
||||
id
|
||||
name
|
||||
domainName
|
||||
accountOwner {
|
||||
id
|
||||
displayName
|
||||
avatarUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
36
front/src/modules/favorites/queries/update.ts
Normal file
36
front/src/modules/favorites/queries/update.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import { gql } from '@apollo/client';
|
||||
|
||||
export const INSERT_PERSON_FAVORITE = gql`
|
||||
mutation InsertPersonFavorite($data: FavoriteMutationForPersonArgs!) {
|
||||
createFavoriteForPerson(data: $data) {
|
||||
id
|
||||
person {
|
||||
id
|
||||
firstName
|
||||
lastName
|
||||
displayName
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const INSERT_COMPANY_FAVORITE = gql`
|
||||
mutation InsertCompanyFavorite($data: FavoriteMutationForCompanyArgs!) {
|
||||
createFavoriteForCompany(data: $data) {
|
||||
id
|
||||
company {
|
||||
id
|
||||
name
|
||||
domainName
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const DELETE_FAVORITE = gql`
|
||||
mutation DeleteFavorite($where: FavoriteWhereInput!) {
|
||||
deleteFavorite(where: $where) {
|
||||
id
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -23,6 +23,15 @@ export const GET_PERSON = gql`
|
||||
name
|
||||
domainName
|
||||
}
|
||||
Favorite {
|
||||
id
|
||||
person {
|
||||
id
|
||||
}
|
||||
company {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -7,15 +7,18 @@ export type IconButtonSize = 'large' | 'medium' | 'small';
|
||||
|
||||
export type IconButtonFontColor = 'primary' | 'secondary' | 'tertiary';
|
||||
|
||||
export type IconButtonAccent = 'regular' | 'red';
|
||||
|
||||
export type ButtonProps = {
|
||||
icon?: React.ReactNode;
|
||||
variant?: IconButtonVariant;
|
||||
size?: IconButtonSize;
|
||||
textColor?: IconButtonFontColor;
|
||||
accent?: IconButtonAccent;
|
||||
} & React.ComponentProps<'button'>;
|
||||
|
||||
const StyledIconButton = styled.button<
|
||||
Pick<ButtonProps, 'variant' | 'size' | 'textColor'>
|
||||
Pick<ButtonProps, 'variant' | 'size' | 'textColor' | 'accent'>
|
||||
>`
|
||||
align-items: center;
|
||||
background: ${({ theme, variant }) => {
|
||||
@ -66,12 +69,14 @@ const StyledIconButton = styled.button<
|
||||
return 'none';
|
||||
}
|
||||
}};
|
||||
color: ${({ theme, disabled, textColor }) => {
|
||||
color: ${({ theme, disabled, textColor, accent }) => {
|
||||
if (disabled) {
|
||||
return theme.font.color.extraLight;
|
||||
}
|
||||
|
||||
return theme.font.color[textColor ?? 'secondary'];
|
||||
return accent
|
||||
? theme.color[accent]
|
||||
: theme.font.color[textColor ?? 'secondary'];
|
||||
}};
|
||||
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
|
||||
display: flex;
|
||||
@ -121,6 +126,7 @@ export function IconButton({
|
||||
size = 'medium',
|
||||
textColor = 'tertiary',
|
||||
disabled = false,
|
||||
accent = 'regular',
|
||||
...props
|
||||
}: ButtonProps) {
|
||||
return (
|
||||
@ -129,6 +135,7 @@ export function IconButton({
|
||||
size={size}
|
||||
disabled={disabled}
|
||||
textColor={textColor}
|
||||
accent={accent}
|
||||
{...props}
|
||||
>
|
||||
{icon}
|
||||
|
||||
@ -51,6 +51,7 @@ export { IconUserCircle } from '@tabler/icons-react';
|
||||
export { IconCalendar } from '@tabler/icons-react';
|
||||
export { IconPencil } from '@tabler/icons-react';
|
||||
export { IconCircleDot } from '@tabler/icons-react';
|
||||
export { IconHeart } from '@tabler/icons-react';
|
||||
export { IconBrandX } from '@tabler/icons-react';
|
||||
export { IconTag } from '@tabler/icons-react';
|
||||
export { IconHelpCircle } from '@tabler/icons-react';
|
||||
|
||||
@ -10,8 +10,10 @@ type OwnProps = {
|
||||
children: JSX.Element | JSX.Element[];
|
||||
title: string;
|
||||
hasBackButton?: boolean;
|
||||
isFavorite?: boolean;
|
||||
icon: ReactNode;
|
||||
onAddButtonClick?: () => void;
|
||||
onFavouriteButtonClick?: () => void;
|
||||
};
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
@ -24,8 +26,10 @@ export function WithTopBarContainer({
|
||||
children,
|
||||
title,
|
||||
hasBackButton,
|
||||
isFavorite,
|
||||
icon,
|
||||
onAddButtonClick,
|
||||
onFavouriteButtonClick,
|
||||
}: OwnProps) {
|
||||
return (
|
||||
<StyledContainer>
|
||||
@ -33,8 +37,10 @@ export function WithTopBarContainer({
|
||||
<PageBar
|
||||
title={title}
|
||||
hasBackButton={hasBackButton}
|
||||
isFavorite={isFavorite}
|
||||
icon={icon}
|
||||
onAddButtonClick={onAddButtonClick}
|
||||
onFavouriteButtonClick={onFavouriteButtonClick}
|
||||
/>
|
||||
<RightDrawerContainer topMargin={PAGE_BAR_MIN_HEIGHT + 16 + 16}>
|
||||
{children}
|
||||
|
||||
@ -4,7 +4,7 @@ import styled from '@emotion/styled';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { IconButton } from '@/ui/button/components/IconButton';
|
||||
import { IconChevronLeft, IconPlus } from '@/ui/icon/index';
|
||||
import { IconChevronLeft, IconHeart, IconPlus } from '@/ui/icon/index';
|
||||
import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
@ -58,18 +58,27 @@ const StyledTopBarIconTitleContainer = styled.div`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const ActionButtonsContainer = styled.div`
|
||||
display: inline-flex;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
type OwnProps = {
|
||||
title: string;
|
||||
hasBackButton?: boolean;
|
||||
isFavorite?: boolean;
|
||||
icon: ReactNode;
|
||||
onAddButtonClick?: () => void;
|
||||
onFavouriteButtonClick?: () => void;
|
||||
};
|
||||
|
||||
export function PageBar({
|
||||
title,
|
||||
hasBackButton,
|
||||
isFavorite,
|
||||
icon,
|
||||
onAddButtonClick,
|
||||
onFavouriteButtonClick,
|
||||
}: OwnProps) {
|
||||
const navigate = useNavigate();
|
||||
const navigateBack = useCallback(() => navigate(-1), [navigate]);
|
||||
@ -104,16 +113,28 @@ export function PageBar({
|
||||
</TitleContainer>
|
||||
</StyledTopBarIconTitleContainer>
|
||||
</StyledLeftContainer>
|
||||
{onAddButtonClick && (
|
||||
<IconButton
|
||||
icon={<IconPlus size={16} />}
|
||||
size="large"
|
||||
data-testid="add-button"
|
||||
textColor="secondary"
|
||||
onClick={onAddButtonClick}
|
||||
variant="border"
|
||||
/>
|
||||
)}
|
||||
<ActionButtonsContainer>
|
||||
{onFavouriteButtonClick && (
|
||||
<IconButton
|
||||
icon={<IconHeart size={16} />}
|
||||
size="large"
|
||||
data-testid="add-button"
|
||||
accent={isFavorite ? 'red' : 'regular'}
|
||||
onClick={onFavouriteButtonClick}
|
||||
variant="border"
|
||||
/>
|
||||
)}
|
||||
{onAddButtonClick && (
|
||||
<IconButton
|
||||
icon={<IconPlus size={16} />}
|
||||
size="large"
|
||||
data-testid="add-button"
|
||||
textColor="secondary"
|
||||
onClick={onAddButtonClick}
|
||||
variant="border"
|
||||
/>
|
||||
)}
|
||||
</ActionButtonsContainer>
|
||||
</TopBarContainer>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -9,6 +9,7 @@ import { CompanyCreatedAtEditableField } from '@/companies/editable-field/compon
|
||||
import { CompanyDomainNameEditableField } from '@/companies/editable-field/components/CompanyDomainNameEditableField';
|
||||
import { CompanyEmployeesEditableField } from '@/companies/editable-field/components/CompanyEmployeesEditableField';
|
||||
import { useCompanyQuery } from '@/companies/queries';
|
||||
import { useFavorites } from '@/favorites/hooks/useFavorites';
|
||||
import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
|
||||
import { IconBuildingSkyscraper } from '@/ui/icon';
|
||||
import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
|
||||
@ -23,19 +24,28 @@ import { ShowPageContainer } from '../../modules/ui/layout/components/ShowPageCo
|
||||
|
||||
export function CompanyShow() {
|
||||
const companyId = useParams().companyId ?? '';
|
||||
|
||||
const { data } = useCompanyQuery(companyId);
|
||||
const company = data?.findUniqueCompany;
|
||||
const { insertCompanyFavorite, deleteCompanyFavorite } = useFavorites();
|
||||
|
||||
const theme = useTheme();
|
||||
const { data } = useCompanyQuery(companyId);
|
||||
const company = data?.findUniqueCompany;
|
||||
const isFavorite =
|
||||
company?.Favorite && company?.Favorite?.length > 0 ? true : false;
|
||||
|
||||
if (!company) return <></>;
|
||||
|
||||
async function handleFavoriteButtonClick() {
|
||||
if (isFavorite) deleteCompanyFavorite(companyId);
|
||||
else insertCompanyFavorite(companyId);
|
||||
}
|
||||
|
||||
return (
|
||||
<WithTopBarContainer
|
||||
title={company?.name ?? ''}
|
||||
hasBackButton
|
||||
isFavorite={isFavorite}
|
||||
icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
|
||||
onFavouriteButtonClick={handleFavoriteButtonClick}
|
||||
>
|
||||
<ShowPageContainer>
|
||||
<ShowPageLeftContainer>
|
||||
|
||||
@ -3,6 +3,7 @@ import { getOperationName } from '@apollo/client/utilities';
|
||||
import { useTheme } from '@emotion/react';
|
||||
|
||||
import { Timeline } from '@/activities/timeline/components/Timeline';
|
||||
import { useFavorites } from '@/favorites/hooks/useFavorites';
|
||||
import { PersonPropertyBox } from '@/people/components/PersonPropertyBox';
|
||||
import { GET_PERSON, usePersonQuery } from '@/people/queries';
|
||||
import { IconUser } from '@/ui/icon';
|
||||
@ -20,9 +21,12 @@ import { ShowPageContainer } from '../../modules/ui/layout/components/ShowPageCo
|
||||
|
||||
export function PersonShow() {
|
||||
const personId = useParams().personId ?? '';
|
||||
const { insertPersonFavorite, deletePersonFavorite } = useFavorites();
|
||||
|
||||
const { data } = usePersonQuery(personId);
|
||||
const person = data?.findUniquePerson;
|
||||
const isFavorite =
|
||||
person?.Favorite && person?.Favorite?.length > 0 ? true : false;
|
||||
|
||||
const theme = useTheme();
|
||||
const [uploadPicture] = useUploadPersonPictureMutation();
|
||||
@ -40,11 +44,18 @@ export function PersonShow() {
|
||||
});
|
||||
}
|
||||
|
||||
async function handleFavoriteButtonClick() {
|
||||
if (isFavorite) deletePersonFavorite(personId);
|
||||
else insertPersonFavorite(personId);
|
||||
}
|
||||
|
||||
return (
|
||||
<WithTopBarContainer
|
||||
title={person?.firstName ?? ''}
|
||||
icon={<IconUser size={theme.icon.size.md} />}
|
||||
hasBackButton
|
||||
isFavorite={isFavorite}
|
||||
onFavouriteButtonClick={handleFavoriteButtonClick}
|
||||
>
|
||||
<ShowPageContainer>
|
||||
<ShowPageLeftContainer>
|
||||
|
||||
Reference in New Issue
Block a user