Yadciel/taskcafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add notification UI

Browse Source 
showPopup was also refactored to be better
This commit is contained in:
Jordan Knott
2020-08-12 20:54:14 -05:00
parent feea209507
commit 0caa803d27
34 changed files with 2516 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/App/TopNavbar.tsx
View File

@ -7,7 +7,7 @@ import { useHistory } from 'react-router';
import { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
import {
RoleCode,
useMeQuery,
useTopNavbarQuery,
useDeleteProjectMutation,
useGetProjectsQuery,
GetProjectsDocument,
@ -19,6 +19,7 @@ import { Link } from 'react-router-dom';
import MiniProfile from 'shared/components/MiniProfile';
import cache from 'App/cache';
import NOOP from 'shared/utils/noop';
import NotificationPopup, { NotificationItem } from 'shared/components/NotifcationPopup';
const TeamContainer = styled.div`
display: flex;
@ -197,7 +198,7 @@ export const ProjectPopup: React.FC<ProjectPopupProps> = ({ history, name, proje
<Popup title={null} tab={0}>
<ProjectSettings
onDeleteProject={() => {
setTab(1, 300);
setTab(1, { width: 300 });
}}
/>
</Popup>
@ -250,7 +251,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
onRemoveFromBoard,
}) => {
const { user, setUserRoles, setUser } = useCurrentUser();
const { data } = useMeQuery({
const { loading, data } = useTopNavbarQuery({
onCompleted: response => {
if (user && user.roles) {
setUserRoles({
@ -300,13 +301,31 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
}}
/>
</Popup>,
195,
{ width: 195 },
);
};
const onOpenSettings = ($target: React.RefObject<HTMLElement>) => {
if (popupContent) {
showPopup($target, popupContent, 185);
showPopup($target, popupContent, { width: 185 });
}
};
const onNotificationClick = ($target: React.RefObject<HTMLElement>) => {
if (data) {
showPopup(
$target,
<NotificationPopup>
{data.notifications.map(notification => (
<NotificationItem
title={notification.entity.name}
description={`${notification.actor.name} added you as a meber to the task "${notification.entity.name}"`}
createdAt={notification.createdAt}
/>
))}
</NotificationPopup>,
{ width: 415, borders: false, diamondColor: '#7367f0' },
);
}
};
@ -366,7 +385,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
onInviteUser={onInviteUser}
onChangeRole={onChangeRole}
onChangeProjectOwner={onChangeProjectOwner}
onNotificationClick={NOOP}
onNotificationClick={onNotificationClick}
onSetTab={onSetTab}
onRemoveFromBoard={onRemoveFromBoard}
onDashboardClick={() => {

46
frontend/src/App/index.tsx
View File

@ -3,6 +3,7 @@ import jwtDecode from 'jwt-decode';
import { createBrowserHistory } from 'history';
import { Router } from 'react-router';
import { PopupProvider } from 'shared/components/PopupMenu';
import { ToastContainer } from 'react-toastify';
import { setAccessToken } from 'shared/utils/accessToken';
import styled, { ThemeProvider } from 'styled-components';
import NormalizeStyles from './NormalizeStyles';
@ -11,6 +12,39 @@ import theme from './ThemeStyles';
import Routes from './Routes';
import { UserContext, CurrentUserRaw, CurrentUserRoles, PermissionLevel, PermissionObjectType } from './context';
import 'react-toastify/dist/ReactToastify.css';
const StyledContainer = styled(ToastContainer).attrs({
// custom props
})`
.Toastify__toast-container {
}
.Toastify__toast {
padding: 5px;
margin-left: 5px;
margin-right: 5px;
border-radius: 10px;
background: #7367f0;
color: #fff;
}
.Toastify__toast--error {
background: rgba(${props => props.theme.colors.danger});
}
.Toastify__toast--warning {
background: rgba(${props => props.theme.colors.warning});
}
.Toastify__toast--success {
background: rgba(${props => props.theme.colors.success});
}
.Toastify__toast-body {
}
.Toastify__progress-bar {
}
.Toastify__close-button {
display: none;
}
`;
const history = createBrowserHistory();
type RefreshTokenResponse = {
accessToken: string;
@ -72,6 +106,18 @@ const App = () => {
)}
</PopupProvider>
</Router>
<StyledContainer
position="bottom-right"
autoClose={5000}
hideProgressBar
newestOnTop
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
limit={5}
/>
</ThemeProvider>
</UserContext.Provider>
</>

8
frontend/src/Profile/index.tsx
View File

@ -7,6 +7,13 @@ import { useMeQuery, useClearProfileAvatarMutation, useUpdateUserPasswordMutatio
import axios from 'axios';
import { useCurrentUser } from 'App/context';
import NOOP from 'shared/utils/noop';
import { toast } from 'react-toastify';
const MainContent = styled.div`
padding: 0 0 50px 80px;
height: 100%;
background: #262c49;
`;
const Projects = () => {
const $fileUpload = useRef<HTMLInputElement>(null);
@ -59,6 +66,7 @@ const Projects = () => {
}}
onResetPassword={(password, done) => {
updateUserPassword({ variables: { userID: user.id, password } });
toast('Password was changed!');
done();
}}
onProfileAvatarRemove={() => {

6
frontend/src/Projects/Project/Board/index.tsx
View File

@ -460,7 +460,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
}}
/>
</Popup>,
185,
{ width: 185 },
);
}}
>
@ -479,7 +479,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
}}
/>
</Popup>,
185,
{ width: 185 },
);
}}
>
@ -499,7 +499,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
labels={labelsRef}
members={membersRef}
/>,
200,
{ width: 200 },
);
}}
>

5
frontend/src/Projects/Project/Details/index.tsx
View File

@ -290,10 +290,10 @@ const Details: React.FC<DetailsProps> = ({
},
});
if (loading) {
return <div>loading</div>;
return null;
}
if (!data) {
return <div>loading</div>;
return null;
}
return (
<>
@ -501,6 +501,7 @@ const Details: React.FC<DetailsProps> = ({
onCancel={NOOP}
/>
</Popup>,
{ showDiamond: false, targetPadding: '0' },
);
}}
/>

2
frontend/src/Teams/index.tsx
View File

@ -57,7 +57,7 @@ export const TeamPopup: React.FC<TeamPopupProps> = ({ history, name, teamID }) =
<Popup title={null} tab={0}>
<TeamSettings
onDeleteTeam={() => {
setTab(1, 340);
setTab(1, { width: 340 });
}}
/>
</Popup>

111
frontend/src/shared/components/NotifcationPopup/index.tsx Normal file
View File

@ -0,0 +1,111 @@
import React from 'react';
import styled from 'styled-components';
import TimeAgo from 'react-timeago';
import { Popup } from 'shared/components/PopupMenu';
const ItemWrapper = styled.div`
cursor: pointer;
border-bottom: 1px solid #414561;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
justify-content: space-between;
display: flex;
&:hover {
background: #10163a;
}
`;
const ItemWrapperContent = styled.div`
display: flex;
align-items: flex-start;
`;
const ItemIconContainer = styled.span`
position: relative;
display: inline-flex;
align-items: center;
`;
const ItemTextContainer = styled.div`
margin-left: 0.5rem;
margin-right: 0.5rem;
`;
const ItemTextTitle = styled.span`
font-weight: 500;
display: block;
color: rgba(${props => props.theme.colors.primary});
font-size: 14px;
`;
const ItemTextDesc = styled.span`
font-size: 12px;
`;
const ItemTimeAgo = styled.span`
margin-top: 0.25rem;
white-space: nowrap;
font-size: 11px;
`;
type NotificationItemProps = {
title: string;
description: string;
createdAt: string;
};
export const NotificationItem: React.FC<NotificationItemProps> = ({ title, description, createdAt }) => {
return (
<ItemWrapper>
<ItemWrapperContent>
<ItemIconContainer />
<ItemTextContainer>
<ItemTextTitle>{title}</ItemTextTitle>
<ItemTextDesc>{description}</ItemTextDesc>
</ItemTextContainer>
</ItemWrapperContent>
<TimeAgo date={createdAt} component={ItemTimeAgo} />
</ItemWrapper>
);
};
const NotificationHeader = styled.div`
padding: 0.75rem;
text-align: center;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background: rgba(${props => props.theme.colors.primary});
`;
const NotificationHeaderTitle = styled.span`
font-size: 14px;
color: rgba(${props => props.theme.colors.text.secondary});
`;
const NotificationFooter = styled.div`
cursor: pointer;
padding: 0.5rem;
text-align: center;
color: rgba(${props => props.theme.colors.primary});
&:hover {
background: #10163a;
}
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
`;
const NotificationPopup: React.FC = ({ children }) => {
return (
<Popup title={null} tab={0} borders={false} padding={false}>
<NotificationHeader>
<NotificationHeaderTitle>Notifications</NotificationHeaderTitle>
</NotificationHeader>
<ul>{children}</ul>
<NotificationFooter>View All</NotificationFooter>
</Popup>
);
};
export default NotificationPopup;

33
frontend/src/shared/components/PopupMenu/Styles.ts
View File

@ -5,6 +5,7 @@ import ControlledInput from 'shared/components/ControlledInput';
export const Container = styled.div<{
invertY: boolean;
invert: boolean;
targetPadding: string;
top: number;
left: number;
ref: any;
@ -15,7 +16,7 @@ export const Container = styled.div<{
display: block;
position: absolute;
width: ${props => props.width}px;
padding-top: 10px;
padding-top: ${props => props.targetPadding};
height: auto;
z-index: 40000;
${props =>
@ -28,14 +29,18 @@ export const Container = styled.div<{
css`
top: auto;
padding-top: 0;
padding-bottom: 10px;
padding-bottom: ${props.targetPadding};
bottom: ${props.top}px;
`}
`;
export const Wrapper = styled.div`
padding: 5px;
padding-top: 8px;
export const Wrapper = styled.div<{ padding: boolean; borders: boolean }>`
${props =>
props.padding &&
css`
padding: 5px;
padding-top: 8px;
`}
border-radius: 5px;
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.1);
position: relative;
@ -43,8 +48,12 @@ export const Wrapper = styled.div`
color: #c2c6dc;
background: #262c49;
border: 1px solid rgba(0, 0, 0, 0.1);
border-color: #414561;
${props =>
props.borders &&
css`
border: 1px solid rgba(0, 0, 0, 0.1);
border-color: #414561;
`}
`;
export const Header = styled.div`
@ -326,7 +335,7 @@ export const PreviousButton = styled.div`
cursor: pointer;
`;
export const ContainerDiamond = styled.div<{ invert: boolean; invertY: boolean }>`
export const ContainerDiamond = styled.div<{ borders: boolean; color: string; invert: boolean; invertY: boolean }>`
${props => (props.invert ? 'right: 10px; ' : 'left: 15px;')}
position: absolute;
width: 10px;
@ -347,6 +356,10 @@ export const ContainerDiamond = styled.div<{ invert: boolean; invertY: boolean }
transform: rotate(45deg) translate(-7px);
z-index: 10;
background: #262c49;
border-color: #414561;
background: ${props => props.color};
${props =>
props.borders &&
css`
border-color: #414561;
`}
`;

132
frontend/src/shared/components/PopupMenu/index.tsx
View File

@ -15,9 +15,37 @@ import {
Wrapper,
} from './Styles';
function getPopupOptions(options?: PopupOptions) {
const popupOptions = {
borders: true,
diamondColor: '#262c49',
targetPadding: '10px',
showDiamond: true,
width: 316,
};
if (options) {
if (options.borders) {
popupOptions.borders = options.borders;
}
if (options.width) {
popupOptions.width = options.width;
}
if (options.targetPadding) {
popupOptions.targetPadding = options.targetPadding;
}
if (typeof options.showDiamond !== 'undefined' && options.showDiamond !== null) {
popupOptions.showDiamond = options.showDiamond;
}
if (options.diamondColor) {
popupOptions.diamondColor = options.diamondColor;
}
}
return popupOptions;
}
type PopupContextState = {
show: (target: RefObject<HTMLElement>, content: JSX.Element, width?: string | number) => void;
setTab: (newTab: number, width?: number | string) => void;
show: (target: RefObject<HTMLElement>, content: JSX.Element, options?: PopupOptions) => void;
setTab: (newTab: number, options?: PopupOptions) => void;
getCurrentTab: () => number;
hide: () => void;
};
@ -26,23 +54,44 @@ type PopupProps = {
title: string | null;
onClose?: () => void;
tab: number;
padding?: boolean;
borders?: boolean;
diamondColor?: string;
};
type PopupContainerProps = {
top: number;
left: number;
invert: boolean;
targetPadding: string;
invertY: boolean;
onClose: () => void;
width?: string | number;
};
const PopupContainer: React.FC<PopupContainerProps> = ({ width, top, left, onClose, children, invert, invertY }) => {
const PopupContainer: React.FC<PopupContainerProps> = ({
width,
top,
left,
onClose,
children,
invert,
invertY,
targetPadding,
}) => {
const $containerRef = useRef<HTMLDivElement>(null);
const [currentTop, setCurrentTop] = useState(top);
useOnOutsideClick($containerRef, true, onClose, null);
return (
<Container width={width ?? 316} left={left} top={currentTop} ref={$containerRef} invert={invert} invertY={invertY}>
<Container
targetPadding={targetPadding}
width={width ?? 316}
left={left}
top={currentTop}
ref={$containerRef}
invert={invert}
invertY={invertY}
>
{children}
</Container>
);
@ -73,13 +122,28 @@ type PopupState = {
currentTab: number;
previousTab: number;
content: JSX.Element | null;
width?: string | number;
options: PopupOptionsInternal | null;
};
const { Provider, Consumer } = PopupContext;
const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
type PopupOptionsInternal = {
width: number;
borders: boolean;
targetPadding: string;
diamondColor: string;
showDiamond: boolean;
};
type PopupOptions = {
targetPadding?: string | null;
showDiamond?: boolean | null;
width?: number | null;
borders?: boolean | null;
diamondColor?: string | null;
};
const defaultState = {
isOpen: false,
left: 0,
@ -89,11 +153,12 @@ const defaultState = {
currentTab: 0,
previousTab: 0,
content: null,
options: null,
};
export const PopupProvider: React.FC = ({ children }) => {
const [currentState, setState] = useState<PopupState>(defaultState);
const show = (target: RefObject<HTMLElement>, content: JSX.Element, width?: number | string) => {
const show = (target: RefObject<HTMLElement>, content: JSX.Element, options?: PopupOptions) => {
if (target && target.current) {
const bounds = target.current.getBoundingClientRect();
let top = bounds.top + bounds.height;
@ -102,6 +167,7 @@ export const PopupProvider: React.FC = ({ children }) => {
top = window.innerHeight - bounds.top;
invertY = true;
}
const popupOptions = getPopupOptions(options);
if (bounds.left + 304 + 30 > window.innerWidth) {
setState({
isOpen: true,
@ -112,7 +178,7 @@ export const PopupProvider: React.FC = ({ children }) => {
currentTab: 0,
previousTab: 0,
content,
width: width ?? 316,
options: popupOptions,
});
} else {
setState({
@ -124,7 +190,7 @@ export const PopupProvider: React.FC = ({ children }) => {
currentTab: 0,
previousTab: 0,
content,
width: width ?? 316,
options: popupOptions,
});
}
}
@ -139,20 +205,21 @@ export const PopupProvider: React.FC = ({ children }) => {
currentTab: 0,
previousTab: 0,
content: null,
options: null,
});
};
const portalTarget = canUseDOM ? document.body : null; // appease flow
const setTab = (newTab: number, width?: number | string) => {
const newWidth = width ?? currentState.width;
setState((prevState: PopupState) => {
return {
...prevState,
previousTab: currentState.currentTab,
currentTab: newTab,
width: newWidth,
};
});
const setTab = (newTab: number, options?: PopupOptions) => {
setState((prevState: PopupState) =>
produce(prevState, draftState => {
draftState.previousTab = currentState.currentTab;
draftState.currentTab = newTab;
if (options) {
draftState.options = getPopupOptions(options);
}
}),
);
};
const getCurrentTab = () => {
@ -163,17 +230,26 @@ export const PopupProvider: React.FC = ({ children }) => {
<Provider value={{ hide, show, setTab, getCurrentTab }}>
{portalTarget &&
currentState.isOpen &&
currentState.options &&
createPortal(
<PopupContainer
invertY={currentState.invertY}
invert={currentState.invert}
top={currentState.top}
targetPadding={currentState.options.targetPadding}
left={currentState.left}
onClose={() => setState(defaultState)}
width={currentState.width ?? 316}
width={currentState.options.width}
>
{currentState.content}
<ContainerDiamond invertY={currentState.invertY} invert={currentState.invert} />
{currentState.options.showDiamond && (
<ContainerDiamond
color={currentState.options.diamondColor}
borders={currentState.options.borders}
invertY={currentState.invertY}
invert={currentState.invert}
/>
)}
</PopupContainer>,
portalTarget,
)}
@ -197,8 +273,16 @@ const PopupMenu: React.FC<Props> = ({ width, title, top, left, onClose, noHeader
useOnOutsideClick($containerRef, true, onClose, null);
return (
<Container invertY={false} width={width ?? 316} invert={false} left={left} top={top} ref={$containerRef}>
<Wrapper>
<Container
targetPadding="10px"
invertY={false}
width={width ?? 316}
invert={false}
left={left}
top={top}
ref={$containerRef}
>
<Wrapper padding borders>
{onPrevious && (
<PreviousButton onClick={onPrevious}>
<AngleLeft color="#c2c6dc" />
@ -222,7 +306,7 @@ const PopupMenu: React.FC<Props> = ({ width, title, top, left, onClose, noHeader
);
};
export const Popup: React.FC<PopupProps> = ({ title, onClose, tab, children }) => {
export const Popup: React.FC<PopupProps> = ({ borders = true, padding = true, title, onClose, tab, children }) => {
const { getCurrentTab, setTab } = usePopup();
if (getCurrentTab() !== tab) {
return null;
@ -230,7 +314,7 @@ export const Popup: React.FC<PopupProps> = ({ title, onClose, tab, children }) =
return (
<>
<Wrapper>
<Wrapper borders={borders} padding={padding}>
{tab > 0 && (
<PreviousButton
onClick={() => {

8
frontend/src/shared/components/TopNavbar/Styles.ts
View File

@ -5,6 +5,7 @@ import Button from 'shared/components/Button';
import { Taskcafe } from 'shared/icons';
import { NavLink, Link } from 'react-router-dom';
import TaskAssignee from 'shared/components/TaskAssignee';
import { useRef } from 'react';
export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>`
z-index: ${props => props.zIndex};
@ -65,7 +66,7 @@ export const ProfileNameWrapper = styled.div`
line-height: 1.25;
`;
export const IconContainer = styled.div<{ disabled?: boolean }>`
export const IconContainerWrapper = styled.div<{ disabled?: boolean }>`
margin-right: 20px;
cursor: pointer;
${props =>
@ -86,7 +87,10 @@ export const ProfileNameSecondary = styled.small`
color: #c2c6dc;
`;
export const ProfileIcon = styled.div<{ bgColor: string | null; backgroundURL: string | null }>`
export const ProfileIcon = styled.div<{
bgColor: string | null;
backgroundURL: string | null;
}>`
width: 40px;
height: 40px;
border-radius: 9999px;

40
frontend/src/shared/components/TopNavbar/index.tsx
View File

@ -1,19 +1,17 @@
import React, { useRef, useState, useEffect } from 'react';
import { Home, Star, Bell, AngleDown, BarChart, CheckCircle } from 'shared/icons';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import ProfileIcon from 'shared/components/ProfileIcon';
import TaskAssignee from 'shared/components/TaskAssignee';
import { usePopup, Popup } from 'shared/components/PopupMenu';
import { usePopup } from 'shared/components/PopupMenu';
import { RoleCode } from 'shared/generated/graphql';
import MiniProfile from 'shared/components/MiniProfile';
import NOOP from 'shared/utils/noop';
import {
TaskcafeLogo,
TaskcafeTitle,
ProjectFinder,
LogoContainer,
NavSeparator,
IconContainer,
IconContainerWrapper,
ProjectNameTextarea,
InviteButton,
GlobalActions,
@ -33,6 +31,28 @@ import {
ProjectMembers,
} from './Styles';
type IconContainerProps = {
disabled?: boolean;
onClick?: ($target: React.RefObject<HTMLElement>) => void;
};
const IconContainer: React.FC<IconContainerProps> = ({ onClick, disabled = false, children }) => {
const $container = useRef<HTMLDivElement>(null);
return (
<IconContainerWrapper
ref={$container}
disabled={disabled}
onClick={() => {
if (onClick) {
onClick($container);
}
}}
>
{children}
</IconContainerWrapper>
);
};
const HomeDashboard = styled(Home)``;
type ProjectHeadingProps = {
@ -145,7 +165,7 @@ type NavBarProps = {
onFavorite?: () => void;
onProfileClick: ($target: React.RefObject<HTMLElement>) => void;
onSaveName?: (name: string) => void;
onNotificationClick: () => void;
onNotificationClick: ($target: React.RefObject<HTMLElement>) => void;
canEditProjectName?: boolean;
canInviteUser?: boolean;
onInviteUser?: ($target: React.RefObject<HTMLElement>) => void;
@ -257,16 +277,16 @@ const NavBar: React.FC<NavBarProps> = ({
<ProjectFinder onClick={onOpenProjectFinder} variant="gradient">
Projects
</ProjectFinder>
<IconContainer onClick={onDashboardClick}>
<IconContainer onClick={() => onDashboardClick()}>
<HomeDashboard width={20} height={20} />
</IconContainer>
<IconContainer disabled>
<IconContainer disabled onClick={NOOP}>
<CheckCircle width={20} height={20} />
</IconContainer>
<IconContainer onClick={onNotificationClick}>
<IconContainer disabled onClick={onNotificationClick}>
<Bell color="#c2c6dc" size={20} />
</IconContainer>
<IconContainer disabled>
<IconContainer disabled onClick={NOOP}>
<BarChart width={20} height={20} />
</IconContainer>

165
frontend/src/shared/generated/graphql.tsx
View File

@ -213,22 +213,18 @@ export enum ObjectType {
export type Query = {
__typename?: 'Query';
organizations: Array<Organization>;
users: Array<UserAccount>;
findUser: UserAccount;
findProject: Project;
findTask: Task;
projects: Array<Project>;
findTeam: Team;
teams: Array<Team>;
findUser: UserAccount;
labelColors: Array<LabelColor>;
taskGroups: Array<TaskGroup>;
me: MePayload;
};
export type QueryFindUserArgs = {
input: FindUser;
notifications: Array<Notification>;
organizations: Array<Organization>;
projects: Array<Project>;
taskGroups: Array<TaskGroup>;
teams: Array<Team>;
users: Array<UserAccount>;
};
@ -242,13 +238,18 @@ export type QueryFindTaskArgs = {
};
export type QueryProjectsArgs = {
input?: Maybe<ProjectsFilter>;
export type QueryFindTeamArgs = {
input: FindTeam;
};
export type QueryFindTeamArgs = {
input: FindTeam;
export type QueryFindUserArgs = {
input: FindUser;
};
export type QueryProjectsArgs = {
input?: Maybe<ProjectsFilter>;
};
export type Mutation = {
@ -577,6 +578,42 @@ export type FindTeam = {
teamID: Scalars['UUID'];
};
export enum EntityType {
Task = 'TASK'
}
export enum ActorType {
User = 'USER'
}
export enum ActionType {
TaskMemberAdded = 'TASK_MEMBER_ADDED'
}
export type NotificationActor = {
__typename?: 'NotificationActor';
id: Scalars['UUID'];
type: ActorType;
name: Scalars['String'];
};
export type NotificationEntity = {
__typename?: 'NotificationEntity';
id: Scalars['UUID'];
type: EntityType;
name: Scalars['String'];
};
export type Notification = {
__typename?: 'Notification';
id: Scalars['ID'];
entity: NotificationEntity;
actionType: ActionType;
actor: NotificationActor;
read: Scalars['Boolean'];
createdAt: Scalars['Time'];
};
export type NewProject = {
userID: Scalars['UUID'];
teamID: Scalars['UUID'];
@ -1755,6 +1792,40 @@ export type ToggleTaskLabelMutation = (
) }
);
export type TopNavbarQueryVariables = {};
export type TopNavbarQuery = (
{ __typename?: 'Query' }
& { notifications: Array<(
{ __typename?: 'Notification' }
& Pick<Notification, 'createdAt' | 'read' | 'id' | 'actionType'>
& { entity: (
{ __typename?: 'NotificationEntity' }
& Pick<NotificationEntity, 'id' | 'type' | 'name'>
), actor: (
{ __typename?: 'NotificationActor' }
& Pick<NotificationActor, 'id' | 'type' | 'name'>
) }
)>, me: (
{ __typename?: 'MePayload' }
& { user: (
{ __typename?: 'UserAccount' }
& Pick<UserAccount, 'id' | 'fullName'>
& { profileIcon: (
{ __typename?: 'ProfileIcon' }
& Pick<ProfileIcon, 'initials' | 'bgColor' | 'url'>
) }
), teamRoles: Array<(
{ __typename?: 'TeamRole' }
& Pick<TeamRole, 'teamID' | 'roleCode'>
)>, projectRoles: Array<(
{ __typename?: 'ProjectRole' }
& Pick<ProjectRole, 'projectID' | 'roleCode'>
)> }
) }
);
export type UnassignTaskMutationVariables = {
taskID: Scalars['UUID'];
userID: Scalars['UUID'];
@ -3613,6 +3684,70 @@ export function useToggleTaskLabelMutation(baseOptions?: ApolloReactHooks.Mutati
export type ToggleTaskLabelMutationHookResult = ReturnType<typeof useToggleTaskLabelMutation>;
export type ToggleTaskLabelMutationResult = ApolloReactCommon.MutationResult<ToggleTaskLabelMutation>;
export type ToggleTaskLabelMutationOptions = ApolloReactCommon.BaseMutationOptions<ToggleTaskLabelMutation, ToggleTaskLabelMutationVariables>;
export const TopNavbarDocument = gql`
query topNavbar {
notifications {
createdAt
read
id
entity {
id
type
name
}
actor {
id
type
name
}
actionType
}
me {
user {
id
fullName
profileIcon {
initials
bgColor
url
}
}
teamRoles {
teamID
roleCode
}
projectRoles {
projectID
roleCode
}
}
}
`;
/**
* __useTopNavbarQuery__
*
* To run a query within a React component, call `useTopNavbarQuery` and pass it any options that fit your needs.
* When your component renders, `useTopNavbarQuery` 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 } = useTopNavbarQuery({
* variables: {
* },
* });
*/
export function useTopNavbarQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<TopNavbarQuery, TopNavbarQueryVariables>) {
return ApolloReactHooks.useQuery<TopNavbarQuery, TopNavbarQueryVariables>(TopNavbarDocument, baseOptions);
}
export function useTopNavbarLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<TopNavbarQuery, TopNavbarQueryVariables>) {
return ApolloReactHooks.useLazyQuery<TopNavbarQuery, TopNavbarQueryVariables>(TopNavbarDocument, baseOptions);
}
export type TopNavbarQueryHookResult = ReturnType<typeof useTopNavbarQuery>;
export type TopNavbarLazyQueryHookResult = ReturnType<typeof useTopNavbarLazyQuery>;
export type TopNavbarQueryResult = ApolloReactCommon.QueryResult<TopNavbarQuery, TopNavbarQueryVariables>;
export const UnassignTaskDocument = gql`
mutation unassignTask($taskID: UUID!, $userID: UUID!) {
unassignTask(input: {taskID: $taskID, userID: $userID}) {

43
frontend/src/shared/graphql/topNavbar.ts Normal file
View File

@ -0,0 +1,43 @@
import gql from 'graphql-tag';
export const TOP_NAVBAR_QUERY = gql`
query topNavbar {
notifications {
createdAt
read
id
entity {
id
type
name
}
actor {
id
type
name
}
actionType
}
me {
user {
id
fullName
profileIcon {
initials
bgColor
url
}
}
teamRoles {
teamID
roleCode
}
projectRoles {
projectID
roleCode
}
}
}
`;
export default TOP_NAVBAR_QUERY;