From 03c1c9dd3798decd1376e2a4b7fc5b0ac046b74c Mon Sep 17 00:00:00 2001 From: TerrellLinnell Date: Wed, 30 Oct 2019 18:54:32 -0600 Subject: [PATCH 1/5] fix: Fix various bugs and cleanup console This branch has spiraled, it is no longer only a cleanup branch, this commit houses all the code related to finishing up pre launch. This fixes all the hooks issues along with various console cleanup and minor other bugs --- src/apps/admin/components/affiliation.edit.js | 4 +- .../afffiliation.create/graphql/mutations.js | 11 + .../afffiliation.create/graphql/queries.js | 43 ++++ .../features/afffiliation.create/index.js | 52 ++++- .../components/categories/index.js | 2 +- .../company.create/graphql/mutations.js | 12 +- .../company.create/graphql/queries.js | 31 +++ .../admin/features/company.create/index.js | 48 +++- .../components/content/index.js | 9 - .../components/content/primary.js | 16 +- .../components/content/secondary.js | 27 +-- .../components/controls/delete.js | 71 +++--- .../components/controls/edit.js | 62 +++--- .../components/controls/index.js | 27 +-- .../profile.affiliations/controller.js | 35 ++- .../profile.affiliations/graphql/queries.js | 1 + .../helpers/renderAffiliation.js | 27 +-- .../features/profile.affiliations/index.js | 15 +- .../components/content/index.js | 6 +- .../components/content/secondary.js | 1 - .../components/controls/delete.js | 89 ++++++-- .../components/controls/edit.js | 40 ++-- .../components/controls/index.js | 24 +- .../features/profile.companies/controller.js | 11 +- .../helpers/renderCompany.js | 43 ++-- .../admin/features/profile.companies/index.js | 29 ++- src/apps/admin/routes/profile/index.js | 4 +- src/helpers/truncateText.js | 210 ++++++++++-------- src/store/auth-context.js | 1 + src/templates/company.js | 3 +- 30 files changed, 596 insertions(+), 358 deletions(-) diff --git a/src/apps/admin/components/affiliation.edit.js b/src/apps/admin/components/affiliation.edit.js index 3d51a21..4e65f80 100644 --- a/src/apps/admin/components/affiliation.edit.js +++ b/src/apps/admin/components/affiliation.edit.js @@ -24,7 +24,7 @@ function EditAffiliation({ React.useEffect(() => { const conformedOrgs = organizations.map(org => ({ value: org.id, - label: org.name[0].payload, + label: org.name && org.name[0].payload, })); setOrganizationValuePairs(conformedOrgs); }, [organizations]); @@ -95,7 +95,7 @@ function EditAffiliation({ toggleEditing(false)} + onClose={toggleEditing} onCancel={() => {}} onConfirm={submitForm} open={isEditing} diff --git a/src/apps/admin/features/afffiliation.create/graphql/mutations.js b/src/apps/admin/features/afffiliation.create/graphql/mutations.js index c3892b5..d2a81b6 100644 --- a/src/apps/admin/features/afffiliation.create/graphql/mutations.js +++ b/src/apps/admin/features/afffiliation.create/graphql/mutations.js @@ -11,13 +11,20 @@ export const CREATE_AFFILIATION_MUTATION = gql` throughDate title updatedAt + createdAt organization { id name { + id payload fromDate throughDate } + description + logo { + id + payload + } } person { __typename @@ -33,9 +40,12 @@ export const CREATE_AFFILIATION_MUTATION = gql` organization { id name { + id payload } + description logo { + id payload } } @@ -43,6 +53,7 @@ export const CREATE_AFFILIATION_MUTATION = gql` } metadata { + id isDraft isPublic isRejected diff --git a/src/apps/admin/features/afffiliation.create/graphql/queries.js b/src/apps/admin/features/afffiliation.create/graphql/queries.js index b22e0bb..7b2a6c4 100644 --- a/src/apps/admin/features/afffiliation.create/graphql/queries.js +++ b/src/apps/admin/features/afffiliation.create/graphql/queries.js @@ -8,3 +8,46 @@ export const GET_COMPANY_TARGET_MARKETS = gql` } } `; + +export const GET_PERSON_AFFILIATIONS_QUERY = gql` + query GetPersonAffiliationsQuery( + $where: PersonOrganizationAffiliationWhereInput + $orderBy: PersonOrganizationAffiliationOrderByInput + ) { + personOrganizationAffiliations(where: $where, orderBy: $orderBy) { + __typename + id + createdAt + fromDate + throughDate + title + role + description + organization { + __typename + id + name { + __typename + id + payload + } + description + logo { + __typename + id + payload + } + } + metadata { + __typename + id + isDraft + isPublic + isRejected + isUnverified + isApproved + isPendingReview + } + } + } +`; diff --git a/src/apps/admin/features/afffiliation.create/index.js b/src/apps/admin/features/afffiliation.create/index.js index ab80847..8dbd0e7 100644 --- a/src/apps/admin/features/afffiliation.create/index.js +++ b/src/apps/admin/features/afffiliation.create/index.js @@ -4,8 +4,10 @@ import { Formik } from 'formik'; import CodeXTextField from '../../components/codex.textinput'; import styled from 'styled-components'; import { useMutation } from 'react-apollo-hooks'; -import { CREATE_AFFILIATION_MUTATION } from './graphql/mutations'; -import { StaticQuery, graphql } from 'gatsby'; +import { + CREATE_AFFILIATION_MUTATION, + GET_PERSON_AFFILIATIONS_QUERY, +} from './graphql'; import Confirm from '../../../../atoms/confirm'; import { checkCanFormSubmit, validationSchema } from './helpers'; @@ -18,7 +20,51 @@ function EditAffiliation({ user, ...props }) { - const createAffiliation = useMutation(CREATE_AFFILIATION_MUTATION); + const createAffiliation = useMutation(CREATE_AFFILIATION_MUTATION, { + update( + client, + { + data: { createAffiliation }, + } + ) { + if (client.data.data.ROOT_QUERY.personOrganizationAffiliations) { + try { + const { + personOrganizationAffiliations: affiliations, + } = client.readQuery({ + query: GET_PERSON_AFFILIATIONS_QUERY, + + variables: { + where: { + person: { + id: user.person.id, + }, + }, + orderBy: 'fromDate_DESC', + }, + }); + + const updatedData = affiliations.concat([createAffiliation]); + + client.writeQuery({ + query: GET_PERSON_AFFILIATIONS_QUERY, + data: { + personOrganizationAffiliations: updatedData, + }, + }); + } catch (error) { + console.log( + `ERROR updating cache for CREATE_AFFILIATION_MUTATION in affiliation.create/index.js ${error}` + ); + return error; + } + } else { + console.log( + 'personOrganizationAffiliations query has not been called yet, not updating the cache' + ); + } + }, + }); async function handleSubmit( { fromDate, throughDate, role, description, title, organization }, diff --git a/src/apps/admin/features/company.create/components/categories/index.js b/src/apps/admin/features/company.create/components/categories/index.js index f956fe6..44373e4 100644 --- a/src/apps/admin/features/company.create/components/categories/index.js +++ b/src/apps/admin/features/company.create/components/categories/index.js @@ -182,7 +182,7 @@ function IntegrationDownshift(props) { const Categories = props => { const ORGANIZATION_CATEGORIES = gql` - { + query GetOrganizationCategories { organizationCategories { id payload diff --git a/src/apps/admin/features/company.create/graphql/mutations.js b/src/apps/admin/features/company.create/graphql/mutations.js index eb967dd..b40d818 100644 --- a/src/apps/admin/features/company.create/graphql/mutations.js +++ b/src/apps/admin/features/company.create/graphql/mutations.js @@ -3,9 +3,15 @@ import gql from 'graphql-tag'; export const CREATE_COMPANY_MUTATION = gql` mutation CreateCompany($data: OrganizationCreateInput!) { createOrganization(data: $data) { - __typename id + logo { + id + payload + fromDate + throughDate + } name { + id payload fromDate throughDate @@ -13,17 +19,14 @@ export const CREATE_COMPANY_MUTATION = gql` description yearFounded location { - __typename id formatted_address geometry } affiliation { - __typename id fromDate person { - __typename id } } @@ -34,6 +37,7 @@ export const CREATE_COMPANY_MUTATION = gql` } } metadata { + id isDraft isPublic isRejected diff --git a/src/apps/admin/features/company.create/graphql/queries.js b/src/apps/admin/features/company.create/graphql/queries.js index b22e0bb..1646176 100644 --- a/src/apps/admin/features/company.create/graphql/queries.js +++ b/src/apps/admin/features/company.create/graphql/queries.js @@ -8,3 +8,34 @@ export const GET_COMPANY_TARGET_MARKETS = gql` } } `; + +export const GET_USER_ADMIN_COMPANIES = gql` + query GetUserAdminCompanies($where: PartyAccountWhereUniqueInput!) { + partyAccount(where: $where) { + id + admin { + id + yearFounded + description + name { + id + payload + } + logo { + id + payload + } + description + metadata { + id + isDraft + isPublic + isRejected + isUnverified + isApproved + isPendingReview + } + } + } + } +`; diff --git a/src/apps/admin/features/company.create/index.js b/src/apps/admin/features/company.create/index.js index 640bc8b..dcd4916 100644 --- a/src/apps/admin/features/company.create/index.js +++ b/src/apps/admin/features/company.create/index.js @@ -1,7 +1,11 @@ import React from 'react'; import { useQuery, useMutation } from 'react-apollo-hooks'; import { Formik, Field, Form } from 'formik'; -import { CREATE_COMPANY_MUTATION, GET_COMPANY_TARGET_MARKETS } from './graphql'; +import { + CREATE_COMPANY_MUTATION, + GET_COMPANY_TARGET_MARKETS, + GET_USER_ADMIN_COMPANIES, +} from './graphql'; import Button from '@material-ui/core/Button'; import CircularProgress from '@material-ui/core/CircularProgress'; import styled from 'styled-components'; @@ -38,12 +42,50 @@ export function CreateCompany({ handleCompanyCreate, handleClose, classes, + user, ...props }) { - const mutation = useMutation(CREATE_COMPANY_MUTATION); + console.log('props', props); + const mutation = useMutation(CREATE_COMPANY_MUTATION, { + update( + client, + { + data: { createOrganization }, + } + ) { + try { + const { partyAccount } = client.readQuery({ + query: GET_USER_ADMIN_COMPANIES, + + variables: { + where: { id: user.id }, + orderBy: 'fromDate_DESC', + }, + }); + + const updatedData = partyAccount.admin.concat([createOrganization]); + + client.writeQuery({ + query: GET_USER_ADMIN_COMPANIES, + data: { + partyAccount: { + id: user.id, + admin: updatedData, + __typename: createOrganization['__typename'], + }, + }, + }); + } catch (error) { + console.log( + `ERROR updating cache for CREATE_COMPANY_MUTATION in company.create/index.js ${error}` + ); + return error; + } + }, + }); const createCompany = handleCreateCompany({ mutation, - user: props.user, + user: user, handleClose, }); diff --git a/src/apps/admin/features/profile.affiliations/components/content/index.js b/src/apps/admin/features/profile.affiliations/components/content/index.js index 6225ef3..fb2301c 100644 --- a/src/apps/admin/features/profile.affiliations/components/content/index.js +++ b/src/apps/admin/features/profile.affiliations/components/content/index.js @@ -1,17 +1,8 @@ import React from 'react'; -import { makeStyles } from '@material-ui/styles'; import renderPrimaryContent from './primary'; import renderSecondaryContent from './secondary'; -import styled from 'styled-components'; - -const useStyles = makeStyles(() => ({ - listItem: { - minWidth: '300px', - }, -})); export function AffiliationContent({ affiliation, ...props }) { - const classes = useStyles(); return (
{renderPrimaryContent({ affiliation })}
diff --git a/src/apps/admin/features/profile.affiliations/components/content/primary.js b/src/apps/admin/features/profile.affiliations/components/content/primary.js index ab9f68c..6274986 100644 --- a/src/apps/admin/features/profile.affiliations/components/content/primary.js +++ b/src/apps/admin/features/profile.affiliations/components/content/primary.js @@ -1,18 +1,11 @@ import React from 'react'; import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/styles'; import Link from '@material-ui/core/Link'; import { navigate } from 'gatsby'; import slugify from 'slugify'; - -const useStyles = makeStyles(theme => ({ - companyName: { - fontWeight: 500, - }, -})); +import styled from 'styled-components'; function renderAffiliationPrimaryContent({ affiliation }) { - const classes = useStyles(); return ( @@ -22,11 +15,14 @@ function renderAffiliationPrimaryContent({ affiliation }) { } target="_blank" > - + {affiliation.organization.name[0].payload} - + ); } +const CompanyName = styled(Typography)` + font-weight: 500; +`; export default renderAffiliationPrimaryContent; diff --git a/src/apps/admin/features/profile.affiliations/components/content/secondary.js b/src/apps/admin/features/profile.affiliations/components/content/secondary.js index 884fdb5..41ce393 100644 --- a/src/apps/admin/features/profile.affiliations/components/content/secondary.js +++ b/src/apps/admin/features/profile.affiliations/components/content/secondary.js @@ -1,29 +1,22 @@ import React from 'react'; import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/styles'; +import styled from 'styled-components'; + import { formatDateString } from '../../helpers'; -const useStyles = makeStyles(theme => ({ - subtitle1: { - fontSize: '12px', - }, -})); function renderAffiliationSecondaryContent({ affiliation }) { - const classes = useStyles(); return ( <> - {`${affiliation.title}`} - {`${formatDateString(affiliation.fromDate)} to ${formatDateString( - affiliation.throughDate - )} `} + {`${affiliation.title}`} + {`${formatDateString( + affiliation.fromDate + )} to ${formatDateString(affiliation.throughDate)} `} ); } +const StyledSubtitle1 = styled(Typography)` + font-size: 12px; +`; + export default renderAffiliationSecondaryContent; diff --git a/src/apps/admin/features/profile.affiliations/components/controls/delete.js b/src/apps/admin/features/profile.affiliations/components/controls/delete.js index cac513e..2ec8b17 100644 --- a/src/apps/admin/features/profile.affiliations/components/controls/delete.js +++ b/src/apps/admin/features/profile.affiliations/components/controls/delete.js @@ -1,48 +1,49 @@ -import React from 'react'; +import React, { Component } from 'react'; import IconButton from '@material-ui/core/IconButton'; import DeleteIcon from '@material-ui/icons/Delete'; import { useMutation } from 'react-apollo-hooks'; -import { makeStyles } from '@material-ui/styles'; +import { withTheme } from '@material-ui/styles'; import Confirm from '../../../../../../atoms/confirm'; import { DELETE_AFFILIATION_MUTATION } from '../../graphql'; -const useStyles = makeStyles(theme => ({ - icon: { - margin: theme.spacing(0.5), - }, -})); -export function DeleteAffiliationControl({ affiliation, refetch, ...props }) { - const [isDeleting, toggleDelete] = React.useState(false); - const classes = useStyles(); +class DeleteAffiliationControl extends Component { + constructor(props) { + super(props); + this.state = { + isDeleting: false, + }; + } - return ( - <> - toggleDelete(!isDeleting)} - className={classes.icon} - > - - - - - ); + toggleDelete = () => { + this.setState(prevState => ({ isDeleting: !prevState.isDeleting })); + }; + + render() { + const { affiliation, refetch, theme } = this.props; + const { isDeleting } = this.state; + return ( + <> + + + + + + ); + } } -function DeleteAffiliation({ - isDeleting, - toggleDelete, - affiliation, - refetch, - ...props -}) { +function DeleteAffiliation({ isDeleting, affiliation, refetch, ...props }) { const deleteAffiliation = useMutation(DELETE_AFFILIATION_MUTATION, { variables: { where: { id: affiliation.id }, @@ -65,3 +66,5 @@ function DeleteAffiliation({ ); } + +export default withTheme(DeleteAffiliationControl); diff --git a/src/apps/admin/features/profile.affiliations/components/controls/edit.js b/src/apps/admin/features/profile.affiliations/components/controls/edit.js index 7f4cfba..97bd3c9 100644 --- a/src/apps/admin/features/profile.affiliations/components/controls/edit.js +++ b/src/apps/admin/features/profile.affiliations/components/controls/edit.js @@ -1,33 +1,41 @@ -import React from 'react'; -import { makeStyles } from '@material-ui/styles'; +import React, { Component } from 'react'; +import { withTheme } from '@material-ui/styles'; import IconButton from '@material-ui/core/IconButton'; import EditIcon from '@material-ui/icons/Edit'; import EditAffiliation from '../../../../components/affiliation.edit'; -const useStyles = makeStyles(theme => ({ - icon: { - margin: theme.spacing(0.5), - }, -})); +class EditAffiliationControl extends Component { + constructor(props) { + super(props); + this.state = { + isEditing: false, + }; + } -export function EditAffiliationControl({ affiliation, ...props }) { - const [isEditing, toggleEditing] = React.useState(false); - const classes = useStyles(); - return ( - <> - toggleEditing(!isEditing)} - className={classes.icon} - > - - - - - ); + toggleEditing = () => { + this.setState(prevstate => ({ isEditing: !prevstate.isEditing })); + }; + + render() { + const { affiliation, theme } = this.props; + const { isEditing } = this.state; + return ( + <> + + + + + + ); + } } + +export default withTheme(EditAffiliationControl); diff --git a/src/apps/admin/features/profile.affiliations/components/controls/index.js b/src/apps/admin/features/profile.affiliations/components/controls/index.js index f1edc0b..4e2a48f 100644 --- a/src/apps/admin/features/profile.affiliations/components/controls/index.js +++ b/src/apps/admin/features/profile.affiliations/components/controls/index.js @@ -1,26 +1,23 @@ import React from 'react'; -import { makeStyles } from '@material-ui/styles'; +import styled from 'styled-components'; -import { EditAffiliationControl } from './edit'; -import { DeleteAffiliationControl } from './delete'; - -const useStyles = makeStyles(theme => ({ - listItem: { - display: 'flex', - justifyContent: 'flex-end', - alignSelf: 'flex-start', - flexGrow: 1, - }, -})); +import EditAffiliationControl from './edit'; +import DeleteAffiliationControl from './delete'; export function AfilliationControls({ affiliation, refetch, ...props }) { - const classes = useStyles(); return ( -
+ -
+ ); } +const StyledListItem = styled.div` + display: flex; + justify-content: flex-end; + align-self: flex-start; + flex-grow: 1; +`; + export default AfilliationControls; diff --git a/src/apps/admin/features/profile.affiliations/controller.js b/src/apps/admin/features/profile.affiliations/controller.js index fd14ff9..108ba3c 100644 --- a/src/apps/admin/features/profile.affiliations/controller.js +++ b/src/apps/admin/features/profile.affiliations/controller.js @@ -1,24 +1,13 @@ -import React, { useState } from 'react'; -import { makeStyles } from '@material-ui/styles'; +import React from 'react'; import List from '@material-ui/core/List'; import ExpansionPanel from '@material-ui/core/ExpansionPanel'; import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'; import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import styled from 'styled-components'; import { renderAffiliation } from './helpers'; -const useStyles = makeStyles(theme => ({ - root: { - width: '100%', - backgroundColor: 'white', - }, - expansionPanel: { - boxShadow: 'none', - width: '100%', - }, -})); - export default function AffiliationsListController({ affiliations, first, @@ -27,8 +16,6 @@ export default function AffiliationsListController({ refetch, ...props }) { - const classes = useStyles(); - if (affiliations) { return ( <> @@ -45,18 +32,28 @@ export default function AffiliationsListController({ hasDivider: false, })} {rest && rest.length > 0 ? ( - + } /> - + {rest.map(affiliation => renderAffiliation({ affiliation, refetch }) )} - + - + ) : null} ); } } + +const StyledList = styled(List)` + width: 100%; + backgroundcolor: white; +`; + +const StyledExpansionPanel = styled(ExpansionPanel)` + box-shadow: none; + width: 100%; +`; diff --git a/src/apps/admin/features/profile.affiliations/graphql/queries.js b/src/apps/admin/features/profile.affiliations/graphql/queries.js index b351ec5..43b4ca4 100644 --- a/src/apps/admin/features/profile.affiliations/graphql/queries.js +++ b/src/apps/admin/features/profile.affiliations/graphql/queries.js @@ -31,6 +31,7 @@ export const GET_PERSON_AFFILIATIONS_QUERY = gql` } metadata { __typename + id isDraft isPublic isRejected diff --git a/src/apps/admin/features/profile.affiliations/helpers/renderAffiliation.js b/src/apps/admin/features/profile.affiliations/helpers/renderAffiliation.js index 22c36e2..9ec6b6b 100644 --- a/src/apps/admin/features/profile.affiliations/helpers/renderAffiliation.js +++ b/src/apps/admin/features/profile.affiliations/helpers/renderAffiliation.js @@ -1,40 +1,31 @@ import React from 'react'; -import { makeStyles } from '@material-ui/styles'; import Divider from '@material-ui/core/Divider'; import styled from 'styled-components'; import AffiliationControls from '../components/controls'; import { AffiliationAvatar, AffiliationContent } from '../components'; -const useStyles = makeStyles({ - divider: { - color: 'black', - }, - wrapper: { - display: 'flex', - alignItems: 'center', - }, -}); - export function renderAffiliation({ affiliation, refetch, hasDivider = true }) { - const classes = useStyles(); if (affiliation.organization !== null) { return ( -
+ - {hasDivider && ( - - )} -
+ {hasDivider && } + ); } return null; } -const AvatarAndContentContainer = styled.div` +const StyledDivider = styled(Divider)` + display: flex; + align-items: center; +`; + +const StyledWrapper = styled.div` display: flex; align-items: center; `; diff --git a/src/apps/admin/features/profile.affiliations/index.js b/src/apps/admin/features/profile.affiliations/index.js index 474babe..b04328f 100644 --- a/src/apps/admin/features/profile.affiliations/index.js +++ b/src/apps/admin/features/profile.affiliations/index.js @@ -55,14 +55,13 @@ export default function ProfileAffiliations({ person, style, ...props }) { const newAffiliations = []; - affiliations.map(affiliation => { - if (affiliation.organization !== null) { - newAffiliations.push(affiliation); - } - }); - console.log('DATA', data); - - console.log('newAffiliations', newAffiliations); + if (affiliations) { + affiliations.map(affiliation => { + if (affiliation.organization !== null) { + newAffiliations.push(affiliation); + } + }); + } const [first, second, ...rest] = newAffiliations; diff --git a/src/apps/admin/features/profile.companies/components/content/index.js b/src/apps/admin/features/profile.companies/components/content/index.js index 19a25b7..df5f00f 100644 --- a/src/apps/admin/features/profile.companies/components/content/index.js +++ b/src/apps/admin/features/profile.companies/components/content/index.js @@ -2,7 +2,7 @@ import React from 'react'; import renderPrimaryContent from './primary'; import renderSecondaryContent from './secondary'; import styled from 'styled-components'; -import truncateText from '../../../../../../helpers/truncateText'; +import TruncateText from '../../../../../../helpers/truncateText'; export function CompanyContent({ company, ...props }) { return ( @@ -13,7 +13,9 @@ export function CompanyContent({ company, ...props }) { {renderSecondaryContent({ company })} - {company.description && truncateText(company.description, 125)} + {company.description && ( + + )} diff --git a/src/apps/admin/features/profile.companies/components/content/secondary.js b/src/apps/admin/features/profile.companies/components/content/secondary.js index 67a2021..9dbd0ed 100644 --- a/src/apps/admin/features/profile.companies/components/content/secondary.js +++ b/src/apps/admin/features/profile.companies/components/content/secondary.js @@ -1,6 +1,5 @@ import React from 'react'; import { formatDateString } from '../../helpers'; -import truncateText from '../../../../../../helpers/truncateText'; function renderCompanySecondaryContent({ company }) { return ( diff --git a/src/apps/admin/features/profile.companies/components/controls/delete.js b/src/apps/admin/features/profile.companies/components/controls/delete.js index cb8c15e..d18426f 100644 --- a/src/apps/admin/features/profile.companies/components/controls/delete.js +++ b/src/apps/admin/features/profile.companies/components/controls/delete.js @@ -3,35 +3,82 @@ import IconButton from '@material-ui/core/IconButton'; import DeleteIcon from '@material-ui/icons/Delete'; import Confirm from '../../../../../../atoms/confirm'; import { useMutation } from 'react-apollo-hooks'; -import { DELETE_COMPANY_MUTATION } from '../../graphql'; +import { + DELETE_COMPANY_MUTATION, + GET_USER_ADMIN_COMPANIES, +} from '../../graphql'; -export function DeleteCompanyControl({ company, ...props }) { - const [isDeleting, toggleDelete] = React.useState(false); - return ( - <> - toggleDelete(!isDeleting)}> - - - - - ); +export class DeleteCompanyControl extends React.Component { + constructor(props) { + super(props); + this.state = { isDeleting: false }; + } + + toggleDelete = value => { + this.setState({ isDeleting: value }); + }; + + render() { + const { company, user, ...props } = this.props; + return ( + <> + this.toggleDelete(!this.state.isDeleting)}> + + + + + ); + } } -function DeleteCompany({ isDeleting, toggleDelete, company, ...props }) { - const deleteCompany = useMutation(DELETE_COMPANY_MUTATION); +function DeleteCompany({ isDeleting, toggleDelete, company, user, ...props }) { + const deleteCompany = useMutation(DELETE_COMPANY_MUTATION, { + variables: { where: { id: company.id } }, + update(client) { + try { + const { partyAccount } = client.readQuery({ + query: GET_USER_ADMIN_COMPANIES, - // console.log('deleteCompany', deleteCompany); + variables: { + where: { id: user.id }, + orderBy: 'fromDate_DESC', + }, + }); + + const updatedData = partyAccount.admin.filter( + item => item.id !== company.id + ); + + client.writeQuery({ + query: GET_USER_ADMIN_COMPANIES, + data: { + partyAccount: { + id: user.id, + admin: updatedData, + __typename: partyAccount['__typename'], + }, + }, + }); + } catch (error) { + console.log( + `ERROR during cache update for DELETE_COMPANY_MUTATION in profile.companies/components/controls/delete.js ${error}` + ); + return error; + } + }, + }); return ( - deleteCompany({ variables: { where: { id: company.id } } }) - } + onConfirm={() => { + deleteCompany(); + }} onClose={() => toggleDelete(false)} onCancel={() => {}} > diff --git a/src/apps/admin/features/profile.companies/components/controls/edit.js b/src/apps/admin/features/profile.companies/components/controls/edit.js index 3c21075..e09425f 100644 --- a/src/apps/admin/features/profile.companies/components/controls/edit.js +++ b/src/apps/admin/features/profile.companies/components/controls/edit.js @@ -3,18 +3,30 @@ import IconButton from '@material-ui/core/IconButton'; import EditIcon from '@material-ui/icons/Edit'; import EditCompany from '../../../../components/company.edit'; -export function EditCompanyControl({ company, ...props }) { - const [isEditing, toggleEditing] = React.useState(false); - return ( - <> - toggleEditing(!isEditing)}> - - - - - ); +export class EditCompanyControl extends React.Component { + constructor(props) { + super(props); + this.state = { isEditing: false }; + } + + toggleEditing = value => { + this.setState({ isEditing: value }); + }; + + render() { + const { company, ...props } = this.props; + + return ( + <> + this.toggleEditing(!this.state.isEditing)}> + + + + + ); + } } diff --git a/src/apps/admin/features/profile.companies/components/controls/index.js b/src/apps/admin/features/profile.companies/components/controls/index.js index 7f10bfd..42f3441 100644 --- a/src/apps/admin/features/profile.companies/components/controls/index.js +++ b/src/apps/admin/features/profile.companies/components/controls/index.js @@ -6,25 +6,23 @@ import IconButton from '@material-ui/core/IconButton'; import EditIcon from '@material-ui/icons/Edit'; import EditCompany from '../../../../components/company.edit'; import { makeStyles } from '@material-ui/styles'; +import styled from 'styled-components'; import { EditCompanyControl } from './edit'; import { DeleteCompanyControl } from './delete'; -const useStyles = makeStyles(theme => ({ - listItem: { - alignSelf: 'flex-start', - minWidth: 103, - }, -})); - -export function AfilliationControls({ company, ...props }) { - const classes = useStyles(); +export function AfilliationControls({ company, refetch, user, ...props }) { return ( -
- - -
+ + + + ); } +const AffiliationControlsContainer = styled.div` + align-self: flex-start; + min-width: 103px; +`; + export default AfilliationControls; diff --git a/src/apps/admin/features/profile.companies/controller.js b/src/apps/admin/features/profile.companies/controller.js index d43e9a4..2674261 100644 --- a/src/apps/admin/features/profile.companies/controller.js +++ b/src/apps/admin/features/profile.companies/controller.js @@ -19,22 +19,21 @@ const useStyles = makeStyles(theme => ({ }, })); -export default function CompaniesListController({ companies, ...props }) { +export default function CompaniesListController({ companies, user, ...props }) { const classes = useStyles(); + const [first, second, ...rest] = companies; return ( <> - {first && renderCompany({ company: first, hasDivider: false })} - {second && renderCompany({ company: second, hasDivider: false })} + {first && renderCompany({ company: first, user, hasDivider: false })} + {second && renderCompany({ company: second, user, hasDivider: false })} {rest && rest.length > 0 ? ( } /> - {rest.map(company => { - renderCompany({ company }); - })} + {rest.map(company => renderCompany({ company, user }))} diff --git a/src/apps/admin/features/profile.companies/helpers/renderCompany.js b/src/apps/admin/features/profile.companies/helpers/renderCompany.js index c51726e..06b1219 100644 --- a/src/apps/admin/features/profile.companies/helpers/renderCompany.js +++ b/src/apps/admin/features/profile.companies/helpers/renderCompany.js @@ -1,42 +1,29 @@ import React from 'react'; -import { makeStyles } from '@material-ui/styles'; import ListItem from '@material-ui/core/ListItem'; import Divider from '@material-ui/core/Divider'; -import styled from 'styled-components'; import CompanyControls from '../components/controls'; import { CompanyAvatar, CompanyContent } from '../components'; -import truncateText from '../../../../../helpers/truncateText'; - -const useStyles = makeStyles({ - divider: { - color: 'black', - }, - listItem: { - diplay: 'flex', - justifyContent: 'space-between', - padding: 0, - }, -}); +import TruncateText from '../../../../../helpers/truncateText'; +import styled from 'styled-components'; -export function renderCompany({ company, hasDivider = true }) { - const classes = useStyles(); +export function renderCompany({ company, user, hasDivider = true }) { return ( <> - + - - + + - {company.description && truncateText(company.description, 125)} + {company.description && ( + + )} - {hasDivider && ( - - )} + {hasDivider && } ); } @@ -55,3 +42,13 @@ const CompanyDescription = styled.p` display: block; } `; + +const StyledDivider = styled(Divider)({ + color: 'black', +}); + +const StyledListItem = styled(ListItem)({ + diplay: 'flex', + justifyContent: 'space-between', + padding: 0, +}); diff --git a/src/apps/admin/features/profile.companies/index.js b/src/apps/admin/features/profile.companies/index.js index a0c4e08..6fce0fa 100644 --- a/src/apps/admin/features/profile.companies/index.js +++ b/src/apps/admin/features/profile.companies/index.js @@ -32,7 +32,6 @@ const useStyles = makeStyles(theme => ({ export default function ProfileCompanies({ user, ...props }) { const classes = useStyles(); - const { open } = useContext(CreateCompanyModalContext); const { loading, error, data, refetch } = useQuery(GET_USER_ADMIN_COMPANIES, { variables: { @@ -42,15 +41,15 @@ export default function ProfileCompanies({ user, ...props }) { }); useEffect(() => { - console.log('gotta refetch', open); refetch(); - }, [open]); + }, []); if (loading) { return null; } const { partyAccount } = data; + return (
@@ -71,15 +70,21 @@ export default function ProfileCompanies({ user, ...props }) { }
- {partyAccount && - partyAccount.admin && - partyAccount.admin.length > 0 && ( -
-
- -
-
- )} + +
+
+ 0 + ? partyAccount.admin + : [] + } + user={user} + /> +
+
diff --git a/src/apps/admin/routes/profile/index.js b/src/apps/admin/routes/profile/index.js index 63f9ea0..af5ed68 100644 --- a/src/apps/admin/routes/profile/index.js +++ b/src/apps/admin/routes/profile/index.js @@ -10,7 +10,8 @@ import { } from '../../../../graphql'; export const UserProfileWithGraphQL = props => { - const { data, loading, error } = useQuery(GET_CURRENT_USER_QUERY); + const [toggle, toggleState] = React.useState(false); + const { data, loading, error, refetch } = useQuery(GET_CURRENT_USER_QUERY); if (loading) { return null; } @@ -20,6 +21,7 @@ export const UserProfileWithGraphQL = props => { } const { me } = data; + const { person, id } = me; if (person.metadata.isDraft === true) { diff --git a/src/helpers/truncateText.js b/src/helpers/truncateText.js index 2f90d88..65f9c11 100644 --- a/src/helpers/truncateText.js +++ b/src/helpers/truncateText.js @@ -1,118 +1,140 @@ -import React, { useState } from 'react'; +import React, { Component } from 'react'; import callAll from './callAll'; import styled from 'styled-components'; -const truncateText = (str, length = null, ending = null) => { - const [show, toggleShow] = useState(false); - let spacingToRemove = 3; - const defaultEnding = { - truncated: ( - toggleShow(!show)}> - ... - - ), - expanded: ( - toggleShow(!show)}> - see less - - ), - }; +let spacingToRemove = 3; - if (length == null) { - length = 150; +class TruncateText extends Component { + constructor(props) { + super(props); + this.state = { + show: props.show || false, + ending: props.ending || null, + }; } - if (ending !== null) { - const { truncated, expanded } = ending; - - let finalTruncated = truncated; - let finalExpanded = expanded; - - if (truncated && expanded) { - switch (typeof finalTruncated) { - case 'string': - spacingToRemove = finalTruncated.length; - finalTruncated = ( - toggleShow(!show)}> - {finalTruncated} - - ); - break; - case 'object': - spacingToRemove = finalTruncated.props.children.length; - finalTruncated = React.cloneElement(finalTruncated, { - onClick: finalTruncated.props.onClick - ? callAll(finalTruncated.props.onClick(), () => toggleShow(!show)) - : () => toggleShow(!show), - style: { - ...finalTruncated.props.style, - display: 'inline-block', - cursor: 'pointer', - }, - }); - break; - } + toggleShow = () => { + this.setState({ show: !this.state.show }); + }; - switch (typeof expanded) { - case 'string': - finalExpanded = ( - toggleShow(!show)}> - {finalExpanded} - - ); - break; - case 'object': - finalExpanded = React.cloneElement(finalExpanded, { - onClick: finalExpanded.props.onClick - ? callAll(finalExpanded.props.onClick(), () => toggleShow(!show)) - : () => toggleShow(!show), - style: { - ...finalExpanded.props.style, - display: 'inline-block', - cursor: 'pointer', - }, - }); - break; - } + defaultEnding = () => { + return { + truncated: ..., + expanded: ( + see less + ), + }; + }; - ending = { truncated: finalTruncated, expanded: finalExpanded }; - } else { - ending = defaultEnding; + componentDidMount() { + if (this.state.ending === null) { + this.setState({ ending: this.defaultEnding() }); } } - if (ending === null) { - ending = defaultEnding; - } + render() { + const { str, length } = this.props; + const { show } = this.state; + + if (length === null) { + length = 150; + } + + if (this.state.ending !== null) { + const { truncated, expanded } = this.state.ending; + + let finalTruncated = truncated; + let finalExpanded = expanded; - if (str.length <= length) { - return

{str.substring(0)}

; - } else if (show) { - return ( - <> - {str.substring(0)} - {ending.expanded} - - ); - } else if (!show && str.length > length) { - return ( - <> - {str.substring(0, length - spacingToRemove).trim()} - {ending.truncated} - - ); + if (truncated && expanded) { + switch (typeof finalTruncated) { + case 'string': + spacingToRemove = finalTruncated.length; + finalTruncated = ( + + {finalTruncated} + + ); + break; + case 'object': + spacingToRemove = finalTruncated.props.children.length; + finalTruncated = React.cloneElement(finalTruncated, { + onClick: finalTruncated.props.onClick + ? () => callAll(finalTruncated.props.onClick(), this.toggleShow) + : this.toggleShow, + style: { + ...finalTruncated.props.style, + display: 'inline-block', + cursor: 'pointer', + }, + }); + break; + } + + switch (typeof expanded) { + case 'string': + finalExpanded = ( + + {finalExpanded} + + ); + break; + case 'object': + finalExpanded = React.cloneElement(finalExpanded, { + onClick: finalExpanded.props.onClick + ? () => callAll(finalExpanded.props.onClick(), this.toggleShow) + : this.toggleShow, + style: { + ...finalExpanded.props.style, + display: 'inline-block', + cursor: 'pointer', + }, + }); + break; + } + } + + if (str.length <= length) { + return

{str.substring(0)}

; + } else if (show) { + return ( + <> + {str.substring(0)} + {this.state.ending.expanded} + + ); + } else if (!show && str.length > length) { + return ( + <> + {str.substring(0, length - spacingToRemove).trim()} + {this.state.ending.truncated} + + ); + } + } else { + return null; + } } -}; +} const DefaultButton = styled.button` display: inline-block; border: none; background-color: inherit; - padding: ${props => (props.show ? ' 0 5px' : 0)}; + padding: 0; font-size: 16px; cursor: pointer; color: gray; outline: none; `; -export default truncateText; +const ExpandedButton = styled(DefaultButton)` + padding: 0 5px; +`; + +TruncateText.defaultProps = { + length: null, + ending: null, +}; + +export default TruncateText; diff --git a/src/store/auth-context.js b/src/store/auth-context.js index 77fcddd..570b894 100644 --- a/src/store/auth-context.js +++ b/src/store/auth-context.js @@ -32,6 +32,7 @@ function AuthProvider(props) { if (isPending) { return ; } + if (isRejected) { return (
diff --git a/src/templates/company.js b/src/templates/company.js index 7c53da6..7536ad3 100644 --- a/src/templates/company.js +++ b/src/templates/company.js @@ -211,7 +211,8 @@ class CompanyTemplate extends React.Component { organization.logo && organization.logo.length > 0 && organization.logo[0].payload !== - 'http://via.placeholder.com/640x360' ? ( + 'http://via.placeholder.com/640x360' && + organization.logo[0].payload !== '' ? ( Date: Mon, 4 Nov 2019 16:48:45 -0700 Subject: [PATCH 2/5] fix: Fix company and affiliations related bugs fixes company delete affiliation update, cache update after affiliation delete, fixes edit company and affiliation issues --- .../company.create/graphql/queries.js | 43 ++++++++++++++++ .../admin/features/company.create/index.js | 17 +++++-- .../components/controls/delete.js | 49 +++++++++++++++---- .../components/controls/index.js | 4 +- .../profile.affiliations/controller.js | 8 +-- .../helpers/renderAffiliation.js | 4 +- .../features/profile.affiliations/index.js | 8 ++- .../components/controls/delete.js | 14 ++++++ .../profile.companies/graphql/queries.js | 43 ++++++++++++++++ .../admin/features/profile.companies/index.js | 3 +- 10 files changed, 166 insertions(+), 27 deletions(-) diff --git a/src/apps/admin/features/company.create/graphql/queries.js b/src/apps/admin/features/company.create/graphql/queries.js index 1646176..95eb531 100644 --- a/src/apps/admin/features/company.create/graphql/queries.js +++ b/src/apps/admin/features/company.create/graphql/queries.js @@ -39,3 +39,46 @@ export const GET_USER_ADMIN_COMPANIES = gql` } } `; + +export const GET_PERSON_AFFILIATIONS_QUERY = gql` + query GetPersonAffiliationsQuery( + $where: PersonOrganizationAffiliationWhereInput + $orderBy: PersonOrganizationAffiliationOrderByInput + ) { + personOrganizationAffiliations(where: $where, orderBy: $orderBy) { + __typename + id + createdAt + fromDate + throughDate + title + role + description + organization { + __typename + id + name { + __typename + id + payload + } + description + logo { + __typename + id + payload + } + } + metadata { + __typename + id + isDraft + isPublic + isRejected + isUnverified + isApproved + isPendingReview + } + } + } +`; diff --git a/src/apps/admin/features/company.create/index.js b/src/apps/admin/features/company.create/index.js index dcd4916..f6aaca3 100644 --- a/src/apps/admin/features/company.create/index.js +++ b/src/apps/admin/features/company.create/index.js @@ -5,6 +5,7 @@ import { CREATE_COMPANY_MUTATION, GET_COMPANY_TARGET_MARKETS, GET_USER_ADMIN_COMPANIES, + GET_PERSON_AFFILIATIONS_QUERY, } from './graphql'; import Button from '@material-ui/core/Button'; import CircularProgress from '@material-ui/core/CircularProgress'; @@ -45,8 +46,20 @@ export function CreateCompany({ user, ...props }) { - console.log('props', props); const mutation = useMutation(CREATE_COMPANY_MUTATION, { + refetchQueries: [ + { + query: GET_PERSON_AFFILIATIONS_QUERY, + variables: { + where: { + person: { + id: user.person.id, + }, + }, + orderBy: 'fromDate_DESC', + }, + }, + ], update( client, { @@ -94,8 +107,6 @@ export function CreateCompany({ 'https://upload.wikimedia.org/wikipedia/commons/2/24/Missing_avatar.svg' ); - console.log('**** TARGET MARKETS', data); - return ( @@ -35,19 +38,50 @@ class DeleteAffiliationControl extends Component { ); } } -function DeleteAffiliation({ isDeleting, affiliation, refetch, ...props }) { +function DeleteAffiliation({ isDeleting, affiliation, person, ...props }) { const deleteAffiliation = useMutation(DELETE_AFFILIATION_MUTATION, { variables: { where: { id: affiliation.id }, }, + update(client) { + if (client.data.data.ROOT_QUERY.personOrganizationAffiliations) { + try { + const { + personOrganizationAffiliations: affiliations, + } = client.readQuery({ + query: GET_PERSON_AFFILIATIONS_QUERY, + + variables: { + where: { id: person.id }, + orderBy: 'fromDate_DESC', + }, + }); + + const updatedData = affiliations.filter( + item => item.id !== affiliation.id + ); + + client.writeQuery({ + query: GET_PERSON_AFFILIATIONS_QUERY, + data: { + personOrganizationAffiliations: updatedData, + }, + }); + } catch (error) { + console.log( + `ERROR during cache update for DELETE_AFFILIATION_MUTATION in profile.affiliations/components/controls/delete.js ${error}` + ); + return error; + } + } + }, }); if (isDeleting === false) { @@ -56,10 +90,7 @@ function DeleteAffiliation({ isDeleting, affiliation, refetch, ...props }) { return ( { - deleteAffiliation(); - refetch(); - }} + onConfirm={deleteAffiliation} onCancel={() => null} > Test diff --git a/src/apps/admin/features/profile.affiliations/components/controls/index.js b/src/apps/admin/features/profile.affiliations/components/controls/index.js index 4e2a48f..32db211 100644 --- a/src/apps/admin/features/profile.affiliations/components/controls/index.js +++ b/src/apps/admin/features/profile.affiliations/components/controls/index.js @@ -4,11 +4,11 @@ import styled from 'styled-components'; import EditAffiliationControl from './edit'; import DeleteAffiliationControl from './delete'; -export function AfilliationControls({ affiliation, refetch, ...props }) { +export function AfilliationControls({ affiliation, person, ...props }) { return ( - + ); } diff --git a/src/apps/admin/features/profile.affiliations/controller.js b/src/apps/admin/features/profile.affiliations/controller.js index 108ba3c..6bd5888 100644 --- a/src/apps/admin/features/profile.affiliations/controller.js +++ b/src/apps/admin/features/profile.affiliations/controller.js @@ -13,7 +13,7 @@ export default function AffiliationsListController({ first, second, rest, - refetch, + person, ...props }) { if (affiliations) { @@ -22,13 +22,13 @@ export default function AffiliationsListController({ {first && renderAffiliation({ affiliation: first, - refetch, + person, hasDivider: false, })} {second && renderAffiliation({ affiliation: second, - refetch, + person, hasDivider: false, })} {rest && rest.length > 0 ? ( @@ -37,7 +37,7 @@ export default function AffiliationsListController({ {rest.map(affiliation => - renderAffiliation({ affiliation, refetch }) + renderAffiliation({ affiliation, person }) )} diff --git a/src/apps/admin/features/profile.affiliations/helpers/renderAffiliation.js b/src/apps/admin/features/profile.affiliations/helpers/renderAffiliation.js index 9ec6b6b..ffade38 100644 --- a/src/apps/admin/features/profile.affiliations/helpers/renderAffiliation.js +++ b/src/apps/admin/features/profile.affiliations/helpers/renderAffiliation.js @@ -5,13 +5,13 @@ import styled from 'styled-components'; import AffiliationControls from '../components/controls'; import { AffiliationAvatar, AffiliationContent } from '../components'; -export function renderAffiliation({ affiliation, refetch, hasDivider = true }) { +export function renderAffiliation({ affiliation, person, hasDivider = true }) { if (affiliation.organization !== null) { return ( - + {hasDivider && } diff --git a/src/apps/admin/features/profile.affiliations/index.js b/src/apps/admin/features/profile.affiliations/index.js index b04328f..9cbd5ea 100644 --- a/src/apps/admin/features/profile.affiliations/index.js +++ b/src/apps/admin/features/profile.affiliations/index.js @@ -1,4 +1,4 @@ -import React, { useContext, useEffect } from 'react'; +import React, { useEffect } from 'react'; import { makeStyles } from '@material-ui/styles'; import Controller from './controller'; import Typography from '@material-ui/core/Typography'; @@ -8,7 +8,6 @@ import CardContent from '@material-ui/core/CardContent'; import { GET_PERSON_AFFILIATIONS_QUERY } from './graphql'; import { useQuery } from 'react-apollo-hooks'; -import { CreateCompanyModalContext } from '../../../../store/modal-context'; const useStyles = makeStyles(theme => ({ wrapper: { @@ -27,7 +26,6 @@ const useStyles = makeStyles(theme => ({ export default function ProfileAffiliations({ person, style, ...props }) { const classes = useStyles(); - const { open } = useContext(CreateCompanyModalContext); const { loading, error, data, refetch } = useQuery( GET_PERSON_AFFILIATIONS_QUERY, @@ -45,7 +43,7 @@ export default function ProfileAffiliations({ person, style, ...props }) { useEffect(() => { refetch(); - }, [open]); + }); if (loading) { return null; @@ -89,7 +87,7 @@ export default function ProfileAffiliations({ person, style, ...props }) { first={first} second={second} rest={rest} - refetch={refetch} + person={person} /> )}
diff --git a/src/apps/admin/features/profile.companies/components/controls/delete.js b/src/apps/admin/features/profile.companies/components/controls/delete.js index d18426f..f1e0935 100644 --- a/src/apps/admin/features/profile.companies/components/controls/delete.js +++ b/src/apps/admin/features/profile.companies/components/controls/delete.js @@ -6,6 +6,7 @@ import { useMutation } from 'react-apollo-hooks'; import { DELETE_COMPANY_MUTATION, GET_USER_ADMIN_COMPANIES, + GET_PERSON_AFFILIATIONS_QUERY, } from '../../graphql'; export class DeleteCompanyControl extends React.Component { @@ -39,6 +40,19 @@ export class DeleteCompanyControl extends React.Component { function DeleteCompany({ isDeleting, toggleDelete, company, user, ...props }) { const deleteCompany = useMutation(DELETE_COMPANY_MUTATION, { variables: { where: { id: company.id } }, + refetchQueries: [ + { + query: GET_PERSON_AFFILIATIONS_QUERY, + variables: { + where: { + person: { + id: user.person.id, + }, + }, + orderBy: 'fromDate_DESC', + }, + }, + ], update(client) { try { const { partyAccount } = client.readQuery({ diff --git a/src/apps/admin/features/profile.companies/graphql/queries.js b/src/apps/admin/features/profile.companies/graphql/queries.js index 8409cfc..fb1ae61 100644 --- a/src/apps/admin/features/profile.companies/graphql/queries.js +++ b/src/apps/admin/features/profile.companies/graphql/queries.js @@ -30,3 +30,46 @@ export const GET_USER_ADMIN_COMPANIES = gql` } } `; + +export const GET_PERSON_AFFILIATIONS_QUERY = gql` + query GetPersonAffiliationsQuery( + $where: PersonOrganizationAffiliationWhereInput + $orderBy: PersonOrganizationAffiliationOrderByInput + ) { + personOrganizationAffiliations(where: $where, orderBy: $orderBy) { + __typename + id + createdAt + fromDate + throughDate + title + role + description + organization { + __typename + id + name { + __typename + id + payload + } + description + logo { + __typename + id + payload + } + } + metadata { + __typename + id + isDraft + isPublic + isRejected + isUnverified + isApproved + isPendingReview + } + } + } +`; diff --git a/src/apps/admin/features/profile.companies/index.js b/src/apps/admin/features/profile.companies/index.js index 6fce0fa..d8c6995 100644 --- a/src/apps/admin/features/profile.companies/index.js +++ b/src/apps/admin/features/profile.companies/index.js @@ -1,4 +1,4 @@ -import React, { useContext, useEffect } from 'react'; +import React, { useEffect } from 'react'; import { makeStyles } from '@material-ui/styles'; import Controller from './controller'; import Typography from '@material-ui/core/Typography'; @@ -7,7 +7,6 @@ import { GET_USER_ADMIN_COMPANIES } from './graphql'; import { useQuery } from 'react-apollo-hooks'; import Card from '@material-ui/core/Card'; import CardContent from '@material-ui/core/CardContent'; -import { CreateCompanyModalContext } from '../../../../store/modal-context'; const useStyles = makeStyles(theme => ({ root: { From 77ba97f10539cd317f138aaf0b86cabb01539664 Mon Sep 17 00:00:00 2001 From: TerrellLinnell Date: Mon, 4 Nov 2019 17:44:56 -0700 Subject: [PATCH 3/5] fix: fix avatar error after account creation crash adding an avatar after intial account creation no longer errors out --- src/apps/admin/components/affiliation.edit.js | 1 + src/apps/admin/components/company.edit.js | 1 + src/apps/admin/components/companylinks.js | 2 -- src/apps/admin/components/profile.edit.js | 23 +++++++-------- src/apps/admin/routes/auth/create.js | 1 - src/apps/admin/routes/auth/createwiz.js | 4 --- src/apps/admin/routes/auth/login.js | 1 - src/apps/admin/routes/auth/profile.js | 28 ++++--------------- src/apps/admin/routes/company/location.js | 1 - src/molecules/avatars.js | 1 - src/templates/profile.js | 1 - src/templates/tags.js | 1 - 12 files changed, 20 insertions(+), 45 deletions(-) diff --git a/src/apps/admin/components/affiliation.edit.js b/src/apps/admin/components/affiliation.edit.js index 4e65f80..bbdb09e 100644 --- a/src/apps/admin/components/affiliation.edit.js +++ b/src/apps/admin/components/affiliation.edit.js @@ -53,6 +53,7 @@ function EditAffiliation({ } catch (error) { console.log(error); setSubmitting(false); + return error; } } diff --git a/src/apps/admin/components/company.edit.js b/src/apps/admin/components/company.edit.js index 21628ee..147a567 100644 --- a/src/apps/admin/components/company.edit.js +++ b/src/apps/admin/components/company.edit.js @@ -31,6 +31,7 @@ function EditCompany({ company, isEditing, toggleEditing, data, ...props }) { } catch (error) { console.log(error); setSubmitting(false); + return error; } } diff --git a/src/apps/admin/components/companylinks.js b/src/apps/admin/components/companylinks.js index fbb8854..3d60b77 100644 --- a/src/apps/admin/components/companylinks.js +++ b/src/apps/admin/components/companylinks.js @@ -11,7 +11,6 @@ import NavigationIcon from '@material-ui/icons/Navigation'; function CompanyLinksInput(props) { const { values, errors, touched, classes } = props; - // console.log('PROPS IN COMPANY LINKS: ', props); return ( ; @@ -78,8 +76,6 @@ function getStepContent({ step, props, hoist }) { console.log('Error Case 1', error); return null; } - console.log('PROPS Case 1', props); - console.log('DATA Case 1', data); return ( {mutation => { diff --git a/src/apps/admin/routes/auth/login.js b/src/apps/admin/routes/auth/login.js index cfe1915..c6f151a 100644 --- a/src/apps/admin/routes/auth/login.js +++ b/src/apps/admin/routes/auth/login.js @@ -41,7 +41,6 @@ function Login({ classes, location, ...props }) { const result = run(login({ username, password })); result .catch(errors => { - console.log('Settings Errors', errors); setErrors(errors); }) .finally(() => { diff --git a/src/apps/admin/routes/auth/profile.js b/src/apps/admin/routes/auth/profile.js index 37fed89..58317a1 100644 --- a/src/apps/admin/routes/auth/profile.js +++ b/src/apps/admin/routes/auth/profile.js @@ -18,13 +18,6 @@ import { schema } from './index'; import { navigate } from '@reach/router'; import Media from 'react-media'; -// const opts = [ -// { value: 'Attorney', label: 'Attorney' }, -// { value: 'Developer', label: 'Developer' }, -// { value: 'Academic', label: 'Academic' }, -// { value: 'Product Desginer', label: 'Product Desginer' }, -// ]; - const linkOptions = [ { value: 'LinkedIn', label: 'LinkedIn' }, { value: 'Twitter', label: 'Twitter' }, @@ -37,8 +30,6 @@ function CreateProfile({ classes, handleClose, user, ...props }) { const { id: userId } = user; - const { person } = user; - const handleSubmitRequest = async ( values, { setSubmitting, setErrors, setFieldError } @@ -48,9 +39,6 @@ function CreateProfile({ classes, handleClose, user, ...props }) { try { const profile = await props .createProfile({ - update: (cache, { data: { updatePartyAccount } }) => { - // console.log('UPDATE USER IN COMPANY', updatePartyAccount); - }, variables: { where: { id: userId, @@ -64,15 +52,12 @@ function CreateProfile({ classes, handleClose, user, ...props }) { isDraft: false, }, }, - avatar: - avatar !== '' - ? { - create: { - payload: avatar, - fromDate: new Date(), - }, - } - : null, + avatar: { + create: { + payload: avatar, + fromDate: new Date(), + }, + }, name: { create: { firstName, @@ -87,7 +72,6 @@ function CreateProfile({ classes, handleClose, user, ...props }) { }) .then(data => { setSubmitting(false); - // props.user.person.profile = profile; navigate('/app/profile/index.js'); }); } catch (err) { diff --git a/src/apps/admin/routes/company/location.js b/src/apps/admin/routes/company/location.js index 593e45f..d8e7e31 100644 --- a/src/apps/admin/routes/company/location.js +++ b/src/apps/admin/routes/company/location.js @@ -145,7 +145,6 @@ function renderSuggestion(suggestionProps = {}) { function renderInput(inputProps) { const { InputProps, classes, ref, ...other } = inputProps; - console.log(other); return (
diff --git a/src/molecules/avatars.js b/src/molecules/avatars.js index 7d205c3..d454050 100644 --- a/src/molecules/avatars.js +++ b/src/molecules/avatars.js @@ -12,7 +12,6 @@ export const AvatarWithPicker = props => { onChange={e => { e.stopPropagation(); e.preventDefault(); - console.log(e.target.files); const fileReader = new FileReader(); fileReader.onloadend = e => { diff --git a/src/templates/profile.js b/src/templates/profile.js index 3e47b35..94fca53 100644 --- a/src/templates/profile.js +++ b/src/templates/profile.js @@ -21,7 +21,6 @@ export function ProfileTemplate({ classes, pageContext, ...props }) { const { name } = person; const displayName = name[0]; - console.log('person', person); return ( { description: item.description, })) .map(item => { - // console.log(item); return item; }); }} From 9efd87e61884b9c2faf76ebfe6086ac5b1f47fe5 Mon Sep 17 00:00:00 2001 From: TerrellLinnell Date: Mon, 4 Nov 2019 17:55:06 -0700 Subject: [PATCH 4/5] fix: duplicate import --- src/components/header/helpers/renderAvatar.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/header/helpers/renderAvatar.js b/src/components/header/helpers/renderAvatar.js index 7c62d4c..b1669af 100644 --- a/src/components/header/helpers/renderAvatar.js +++ b/src/components/header/helpers/renderAvatar.js @@ -2,7 +2,6 @@ import React from 'react'; import Avatar from '@material-ui/core/Avatar'; import PersonIcon from '@material-ui/icons/Person'; import { navigate } from '@reach/router'; -import PersonIcon from '@material-ui/icons/Person'; function renderAvatar(user) { const { person } = user; From 3245fb4da909d1e7c6003cbb2794c406a3591486 Mon Sep 17 00:00:00 2001 From: TerrellLinnell Date: Mon, 11 Nov 2019 14:11:16 -0700 Subject: [PATCH 5/5] fix: Add pedning state to newly created companies and add option out for users who input incorrect phone numbers on sign up --- .../helpers/renderCompany.js | 25 ++++++++++++++++--- src/apps/admin/routes/auth/confirm.js | 19 ++++++++++++++ 2 files changed, 41 insertions(+), 3 deletions(-) diff --git a/src/apps/admin/features/profile.companies/helpers/renderCompany.js b/src/apps/admin/features/profile.companies/helpers/renderCompany.js index 06b1219..0e435c0 100644 --- a/src/apps/admin/features/profile.companies/helpers/renderCompany.js +++ b/src/apps/admin/features/profile.companies/helpers/renderCompany.js @@ -9,13 +9,17 @@ import styled from 'styled-components'; export function renderCompany({ company, user, hasDivider = true }) { return ( - <> + - + {company.metadata.isPendingReview ? ( + Pending + ) : ( + + )} {company.description && ( @@ -24,7 +28,7 @@ export function renderCompany({ company, user, hasDivider = true }) { {hasDivider && } - + ); } @@ -43,6 +47,16 @@ const CompanyDescription = styled.p` } `; +const CompanyContainer = styled.div(props => + props.isPendingReview + ? { + opacity: 0.8, + pointerEvents: 'none', + backgroundColor: '#DCDCDC', + } + : {} +); + const StyledDivider = styled(Divider)({ color: 'black', }); @@ -52,3 +66,8 @@ const StyledListItem = styled(ListItem)({ justifyContent: 'space-between', padding: 0, }); + +const Pending = styled.span` + padding: 1em; + align-self: flex-start; +`; diff --git a/src/apps/admin/routes/auth/confirm.js b/src/apps/admin/routes/auth/confirm.js index d91d971..6ee1494 100644 --- a/src/apps/admin/routes/auth/confirm.js +++ b/src/apps/admin/routes/auth/confirm.js @@ -6,9 +6,11 @@ import DialogContent from '@material-ui/core/DialogContent'; import DialogContentText from '@material-ui/core/DialogContentText'; import DialogTitle from '@material-ui/core/DialogTitle'; import Slide from '@material-ui/core/Slide'; +import Link from '@material-ui/core/Link'; import { Formik, Field } from 'formik'; import { TextField } from 'formik-material-ui'; import Auth from '@aws-amplify/auth'; +import styled from 'styled-components'; function Transition(props) { return ; @@ -95,6 +97,15 @@ class AlertDialogSlide extends React.Component { Submit + + Wrong number?{' '} +
+ Contact us at{' '} + + support@me.com. + +
+ ); }} @@ -103,4 +114,12 @@ class AlertDialogSlide extends React.Component { } } +const WrongNumber = styled.div` + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 1em; + align-self: center; +`; + export default AlertDialogSlide;