import React , { useState , useEffect } from 'react' ; import styled from 'styled-components/macro' ; import GlobalTopNavbar from 'App/TopNavbar' ; import updateApolloCache from 'shared/utils/cache' ; import { Route , Switch , useRouteMatch , Redirect , useParams , useHistory } from 'react-router' ; import { useGetTeamQuery , useDeleteTeamMutation , GetProjectsDocument , GetProjectsQuery , } from 'shared/generated/graphql' ; import { usePopup , Popup } from 'shared/components/PopupMenu' ; import { History } from 'history' ; import produce from 'immer' ; import { TeamSettings , DeleteConfirm , DELETE_INFO } from 'shared/components/ProjectSettings' ; import { useCurrentUser } from 'App/context' ; import NOOP from 'shared/utils/noop' ; import Members from './Members' ; import Projects from './Projects' ; const OuterWrapper = styled . div `
  display: flex;
  justify-content: center;
` ; const Wrapper = styled . div `
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  max-width: 1400px;
  width: 100%;
` ; type TeamPopupProps = { history : History < any > ; name : string ; teamID : string ; } ; export const TeamPopup = ( { history , name , teamID } ) => { const { hidePopup , setTab } = usePopup ( ) ; const [ deleteTeam ] = useDeleteTeamMutation ( { update : ( client , deleteData ) => { updateApolloCache < GetProjectsQuery > ( client , GetProjectsDocument , cache => produce ( cache , draftCache => { draftCache . teams = cache . teams . filter ( ( team ) => team . id !== deleteData . data ?. deleteTeam . team . id ) ; draftCache . projects = cache . projects . filter ( ( project ) => project . team . id !== deleteData . data ?. deleteTeam . team . id ) ; } ) ) ; } , } ) ; return ( < > < Popup title = { null } tab = { 0 } > < TeamSettings onDeleteTeam = { ( ) => { setTab ( 1 , { width : 340 } ) ; } } /> < /Popup> < Popup title = { `Delete the "${ name }" team?` } tab = { 1 } onClose = { ( ) => hidePopup ( ) } > < DeleteConfirm description = { DELETE_INFO . DELETE_TEAMS . description } deletedItems = { DELETE_INFO . DELETE_TEAMS . deletedItems } onConfirmDelete = { ( ) => { if ( teamID ) { deleteTeam ( { variables : { teamID } } ) ; hidePopup ( ) ; history . push ( '/projects' ) ; } } } /> < /Popup> < />); } ; type TeamsRouteProps = { teamID : string ; } ; const Teams = ( ) => { const { teamID } = useParams < TeamsRouteProps > ( ) ; const history = useHistory ( ) ; const { loading , data } = useGetTeamQuery ( { variables : { teamID } , onCompleted : resp => { document . title = `${ resp . findTeam . name } | Taskcafé` ; } , } ) ; const { user } = useCurrentUser ( ) ; const [ currentTab , setCurrentTab ] = useState ( 0 ) ; const match = useRouteMatch ( ) ; if ( data && user ) { return ( < > < GlobalTopNavbar menuType = { [ { name : 'Projects' , link : `${ match . url }` } , { name : 'Members' , link : `${ match . url }/members` } , ] } currentTab = { currentTab } onSetTab = { tab => { setCurrentTab ( tab ) ; } } popupContent = { < TeamPopup history = { history } name = { data . findTeam . name } teamID = { teamID } / > } onSaveProjectName = { NOOP } projectID = { null } name = { data . findTeam . name } / > < OuterWrapper > < Wrapper > < Switch > < Route exact path = { match . path } > < Projects teamID = { teamID } /> < /Route> < Route path = { `${ match . path }/members` } > < Members teamID = { teamID } /> < /Route> < /Switch> < /Wrapper> < /OuterWrapper> < />); } return ( < GlobalTopNavbar menuType = { [ { name : 'Projects' , link : `${ match . url }` } , { name : 'Members' , link : `${ match . url }/members` } , ] } currentTab = { currentTab } onSetTab = { tab => { setCurrentTab ( tab ) ; } } onSaveProjectName = { NOOP } projectID = { null } name = { null } / > ) ; } ; export default Teams ;