From c8f0b8bbfa722026fb2ef00cd5f8ccdc46c79c24 Mon Sep 17 00:00:00 2001 From: sarahkeh <161879347+sarahkeh@users.noreply.github.com> Date: Tue, 14 Jan 2025 17:28:14 -0800 Subject: [PATCH 1/2] drawer rail half of update --- src/app/components/drawer/DrawerNavigation.js | 74 ++++++++++++------- .../drawer/DrawerNavigationComponent.js | 3 + 2 files changed, 52 insertions(+), 25 deletions(-) diff --git a/src/app/components/drawer/DrawerNavigation.js b/src/app/components/drawer/DrawerNavigation.js index 605de3d339..51b4e79ec5 100644 --- a/src/app/components/drawer/DrawerNavigation.js +++ b/src/app/components/drawer/DrawerNavigation.js @@ -1,9 +1,12 @@ +/* eslint-disable relay/unused-fields */ import React from 'react'; import Relay from 'react-relay/classic'; +import { QueryRenderer, graphql } from 'react-relay/compat'; import DrawerRail from './DrawerRail'; import DrawerNavigationComponent from './DrawerNavigationComponent'; import FindPublicTeamRoute from '../../relay/FindPublicTeamRoute'; import teamPublicFragment from '../../relay/teamPublicFragment'; +import ErrorBoundary from '../error/ErrorBoundary'; const DrawerNavigationContainer = Relay.createContainer(DrawerNavigationComponent, { fragments: { @@ -11,19 +14,13 @@ const DrawerNavigationContainer = Relay.createContainer(DrawerNavigationComponen }, }); -const DrawerRailContainer = Relay.createContainer(DrawerRail, { - fragments: { - team: () => teamPublicFragment, - }, -}); - const getBooleanPref = (key, fallback) => { const inStore = window.storage.getValue(key); if (inStore === null) return fallback; return (inStore === 'true'); // we are testing against the string value of 'true' because `localStorage` only stores string values, and casts `true` as `'true'` }; -const DrawerNavigation = (props) => { +const DrawerNavigation = (parentProps) => { const [drawerOpen, setDrawerOpen] = React.useState(getBooleanPref('drawer.isOpen', true)); const [drawerType, setDrawerType] = React.useState('tipline'); @@ -33,34 +30,61 @@ const DrawerNavigation = (props) => { } }, [drawerType]); - if (props.teamSlug) { - const { teamSlug } = props; + if (parentProps.teamSlug) { + const { teamSlug } = parentProps; const route = new FindPublicTeamRoute({ teamSlug }); + console.log(teamSlug); //eslint-disable-line + return ( <> - () - } - route={route} - /> + + { + if (!error && props) { + return ( + + ); + } + return null; + }} + variables={{ + teamSlug, + }} + /> + () } @@ -70,7 +94,7 @@ const DrawerNavigation = (props) => { ); } - return <>; + return <>; }; export default DrawerNavigation; diff --git a/src/app/components/drawer/DrawerNavigationComponent.js b/src/app/components/drawer/DrawerNavigationComponent.js index 0f60a0b3f1..82a06fd277 100644 --- a/src/app/components/drawer/DrawerNavigationComponent.js +++ b/src/app/components/drawer/DrawerNavigationComponent.js @@ -45,6 +45,7 @@ class DrawerNavigationComponent extends Component { } subscribe() { + console.log(this.props); //eslint-disable-line const { clientSessionId, pusher, team } = this.props; if (pusher && team) { pusher.subscribe(team.pusher_channel).bind('media_updated', 'DrawerNavigationComponent', (data, run) => { @@ -75,6 +76,8 @@ class DrawerNavigationComponent extends Component { currentUserIsMember, drawerOpen, drawerType, team, } = this.props; + console.log(this.props) //eslint-disable-line + // This component now renders based on teamPublicFragment // and decides whether to include which has its own team route/relay // From 5420a9b272515141069b48df25cbb808971ebaff Mon Sep 17 00:00:00 2001 From: sarahkeh <161879347+sarahkeh@users.noreply.github.com> Date: Wed, 15 Jan 2025 17:11:34 -0800 Subject: [PATCH 2/2] removed unused files, deleted DrawerNavigationComponent since it was no longer needed --- src/app/components/drawer/DrawerNavigation.js | 70 ++++------- .../drawer/DrawerNavigationComponent.js | 114 ------------------ .../drawer/DrawerNavigationComponent.test.js | 76 ------------ src/app/components/drawer/DrawerRail.js | 11 +- src/app/relay/FindPublicTeamRoute.js | 13 -- src/app/relay/teamPublicFragment.js | 18 --- 6 files changed, 34 insertions(+), 268 deletions(-) delete mode 100644 src/app/components/drawer/DrawerNavigationComponent.js delete mode 100644 src/app/components/drawer/DrawerNavigationComponent.test.js delete mode 100644 src/app/relay/FindPublicTeamRoute.js delete mode 100644 src/app/relay/teamPublicFragment.js diff --git a/src/app/components/drawer/DrawerNavigation.js b/src/app/components/drawer/DrawerNavigation.js index 51b4e79ec5..f43085e087 100644 --- a/src/app/components/drawer/DrawerNavigation.js +++ b/src/app/components/drawer/DrawerNavigation.js @@ -1,18 +1,11 @@ -/* eslint-disable relay/unused-fields */ import React from 'react'; import Relay from 'react-relay/classic'; import { QueryRenderer, graphql } from 'react-relay/compat'; +import Drawer from '@material-ui/core/Drawer'; import DrawerRail from './DrawerRail'; -import DrawerNavigationComponent from './DrawerNavigationComponent'; -import FindPublicTeamRoute from '../../relay/FindPublicTeamRoute'; -import teamPublicFragment from '../../relay/teamPublicFragment'; import ErrorBoundary from '../error/ErrorBoundary'; - -const DrawerNavigationContainer = Relay.createContainer(DrawerNavigationComponent, { - fragments: { - team: () => teamPublicFragment, - }, -}); +import DrawerContent from './index.js'; +import styles from './Drawer.module.css'; const getBooleanPref = (key, fallback) => { const inStore = window.storage.getValue(key); @@ -33,10 +26,6 @@ const DrawerNavigation = (parentProps) => { if (parentProps.teamSlug) { const { teamSlug } = parentProps; - const route = new FindPublicTeamRoute({ teamSlug }); - - console.log(teamSlug); //eslint-disable-line - return ( <> @@ -45,30 +34,33 @@ const DrawerNavigation = (parentProps) => { query={graphql` query DrawerNavigationQuery($teamSlug: String!) { find_public_team(slug: $teamSlug) { - id, - name, - avatar, - dbid, - private, - slug, - team_graphql_id, - trash_count, - spam_count, - pusher_channel, + ...DrawerRail_team } } `} render={({ error, props }) => { if (!error && props) { return ( - + <> + + + {parentProps.currentUserIsMember ? ( + + ) : null } + + ); } return null; @@ -78,23 +70,11 @@ const DrawerNavigation = (parentProps) => { }} /> - () - } - route={route} - /> ); } - return <>; + return <>; }; export default DrawerNavigation; diff --git a/src/app/components/drawer/DrawerNavigationComponent.js b/src/app/components/drawer/DrawerNavigationComponent.js deleted file mode 100644 index 82a06fd277..0000000000 --- a/src/app/components/drawer/DrawerNavigationComponent.js +++ /dev/null @@ -1,114 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import Drawer from '@material-ui/core/Drawer'; -import { withPusher, pusherShape } from '../../pusher'; -import CheckContext from '../../CheckContext'; -import DrawerContent from './index'; -import styles from './Drawer.module.css'; - -// TODO Fix a11y issues -/* eslint jsx-a11y/click-events-have-key-events: 0 */ -class DrawerNavigationComponent extends Component { - componentDidMount() { - this.subscribe(); - this.setContextTeam(); - } - - componentWillUpdate(nextProps) { - if (this.props.team && this.props.team?.dbid !== nextProps.team?.dbid) { - this.unsubscribe(); - } - } - - componentDidUpdate(prevProps) { - this.setContextTeam(); - if (this.props.team && this.props.team?.dbid !== prevProps.team?.dbid) { - this.subscribe(); - } - } - - componentWillUnmount() { - this.unsubscribe(); - } - - getContext() { - return new CheckContext(this).getContextStore(); - } - - setContextTeam() { - const context = new CheckContext(this); - const { team } = this.props; - if (team) { - team.id = team.team_graphql_id; - context.setContextStore({ team }); - } - } - - subscribe() { - console.log(this.props); //eslint-disable-line - const { clientSessionId, pusher, team } = this.props; - if (pusher && team) { - pusher.subscribe(team.pusher_channel).bind('media_updated', 'DrawerNavigationComponent', (data, run) => { - if (clientSessionId !== data.actor_session_id) { - if (run) { - this.props.relay.forceFetch(); - return true; - } - return { - id: `drawer-navigation-component-${team.dbid}`, - callback: this.props.relay.forceFetch, - }; - } - return false; - }); - } - } - - unsubscribe() { - const { pusher, team } = this.props; - if (pusher && team) { - pusher.unsubscribe(team.pusher_channel, 'media_updated', 'DrawerNavigationComponent'); - } - } - - render() { - const { - currentUserIsMember, drawerOpen, drawerType, team, - } = this.props; - - console.log(this.props) //eslint-disable-line - - // This component now renders based on teamPublicFragment - // and decides whether to include which has its own team route/relay - // - // See DrawerNavigation - // - // — @chris with @alex 2017-10-3 - - return ( - - - {!!team && (currentUserIsMember || !team.private) ? ( - - ) : null } - - - ); - } -} - -DrawerNavigationComponent.propTypes = { - clientSessionId: PropTypes.string.isRequired, - pusher: pusherShape.isRequired, -}; - -DrawerNavigationComponent.contextTypes = { - store: PropTypes.object, -}; - -export default withPusher(DrawerNavigationComponent); diff --git a/src/app/components/drawer/DrawerNavigationComponent.test.js b/src/app/components/drawer/DrawerNavigationComponent.test.js deleted file mode 100644 index dce70e7d7c..0000000000 --- a/src/app/components/drawer/DrawerNavigationComponent.test.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import DrawerNavigationComponent from './DrawerNavigationComponent'; -import { mountWithIntl, getStore } from '../../../../test/unit/helpers/intl-test'; -import DrawerProjects from '.'; - - -describe('', () => { - const currentUser = { - teams: '{"alex":{"id":1,"name":"alex","role":"owner","status":"member"},"new-team":{"id":2,"name":"new team","role":"owner","status":"member"},"team-gets-appended-to-user-with-role":{"id":4,"name":"team gets appended to user with role","role":"owner","status":"member"},"brand-new-team":{"id":5,"name":"brand new team","role":"owner","status":"member"}}', - }; - - const privateTeam = { - name: 'team', - avatar: 'http://localhost:3000/images/team.png', - dbid: 1, - private: true, - slug: 'team', - }; - - const publicTeam = { - name: 'team', - avatar: 'http://localhost:3000/images/team.png', - dbid: 1, - private: false, - slug: 'team', - }; - - it('renders with projects in team context if user is logged in and a member', () => { - global.window = Object.create(window); - Object.defineProperty(window, 'location', { - value: { - pathname: '/team/members/', - }, - }); - const params = { team: 'team' }; - getStore().currentUser = currentUser; - getStore().team = privateTeam; - getStore().dispatch = () => {}; - const pusher = { subscribe: jest.fn(() => ({ bind: jest.fn() })), unsubscribe: jest.fn() }; - const header = mountWithIntl(); - expect(header.find(DrawerProjects)).toHaveLength(1); - }); - - it('renders with projects in team context if user is not logged in and it is a public team', () => { - global.window = Object.create(window); - Object.defineProperty(window, 'location', { - value: { - pathname: '/team/members/', - }, - }); - const params = { team: 'team' }; - const pusher = { subscribe: jest.fn(() => ({ bind: jest.fn() })), unsubscribe: jest.fn() }; - getStore().currentUser = undefined; - getStore().team = publicTeam; - getStore().dispatch = () => {}; - const header = mountWithIntl(); - - expect(header.find(DrawerProjects)).toHaveLength(1); - }); -}); diff --git a/src/app/components/drawer/DrawerRail.js b/src/app/components/drawer/DrawerRail.js index 6c8bb87725..f6d705ab59 100644 --- a/src/app/components/drawer/DrawerRail.js +++ b/src/app/components/drawer/DrawerRail.js @@ -2,6 +2,7 @@ import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router'; import { injectIntl, defineMessages } from 'react-intl'; +import { createFragmentContainer, graphql } from 'react-relay/compat'; import cx from 'classnames/bind'; import Tooltip from '../cds/alerts-and-prompts/Tooltip'; import TeamAvatar from '../team/TeamAvatar'; @@ -147,7 +148,7 @@ const DrawerRail = ({
- + @@ -303,4 +304,10 @@ DrawerRail.propTypes = { onDrawerTypeChange: PropTypes.func.isRequired, }; -export default injectIntl(DrawerRail); +export default createFragmentContainer(injectIntl(DrawerRail), graphql` + fragment DrawerRail_team on PublicTeam { + slug + private + avatar + } +`); diff --git a/src/app/relay/FindPublicTeamRoute.js b/src/app/relay/FindPublicTeamRoute.js deleted file mode 100644 index 789a5856df..0000000000 --- a/src/app/relay/FindPublicTeamRoute.js +++ /dev/null @@ -1,13 +0,0 @@ -import Relay from 'react-relay/classic'; - -class FindPublicTeamRoute extends Relay.Route { - static queries = { - team: () => Relay.QL`query FindPublicTeam { find_public_team(slug: $teamSlug) }`, - }; - static paramDefinitions = { - teamSlug: { required: true }, - }; - static routeName = 'FindPublicTeamRoute'; -} - -export default FindPublicTeamRoute; diff --git a/src/app/relay/teamPublicFragment.js b/src/app/relay/teamPublicFragment.js deleted file mode 100644 index 33a7156d7f..0000000000 --- a/src/app/relay/teamPublicFragment.js +++ /dev/null @@ -1,18 +0,0 @@ -import Relay from 'react-relay/classic'; - -const teamPublicFragment = Relay.QL` - fragment on PublicTeam { - id, - name, - avatar, - dbid, - private, - slug, - team_graphql_id, - trash_count, - spam_count, - pusher_channel, - } -`; - -export default teamPublicFragment;