diff --git a/src/apps/admin/components/affiliation.edit.js b/src/apps/admin/components/affiliation.edit.js index 3d51a21..bbdb09e 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]); @@ -53,6 +53,7 @@ function EditAffiliation({ } catch (error) { console.log(error); setSubmitting(false); + return error; } } @@ -95,7 +96,7 @@ function EditAffiliation({ toggleEditing(false)} + onClose={toggleEditing} onCancel={() => {}} onConfirm={submitForm} open={isEditing} 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 ( { 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..95eb531 100644 --- a/src/apps/admin/features/company.create/graphql/queries.js +++ b/src/apps/admin/features/company.create/graphql/queries.js @@ -8,3 +8,77 @@ 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 + } + } + } + } +`; + +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 640bc8b..f6aaca3 100644 --- a/src/apps/admin/features/company.create/index.js +++ b/src/apps/admin/features/company.create/index.js @@ -1,7 +1,12 @@ 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, + GET_PERSON_AFFILIATIONS_QUERY, +} from './graphql'; import Button from '@material-ui/core/Button'; import CircularProgress from '@material-ui/core/CircularProgress'; import styled from 'styled-components'; @@ -38,12 +43,62 @@ export function CreateCompany({ handleCompanyCreate, handleClose, classes, + user, ...props }) { - const mutation = useMutation(CREATE_COMPANY_MUTATION); + const mutation = useMutation(CREATE_COMPANY_MUTATION, { + refetchQueries: [ + { + query: GET_PERSON_AFFILIATIONS_QUERY, + variables: { + where: { + person: { + id: user.person.id, + }, + }, + orderBy: 'fromDate_DESC', + }, + }, + ], + 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, }); @@ -52,8 +107,6 @@ export function CreateCompany({ 'https://upload.wikimedia.org/wikipedia/commons/2/24/Missing_avatar.svg' ); - console.log('**** TARGET MARKETS', data); - return ( ({ - 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..ee27cfc 100644 --- a/src/apps/admin/features/profile.affiliations/components/controls/delete.js +++ b/src/apps/admin/features/profile.affiliations/components/controls/delete.js @@ -1,52 +1,87 @@ -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'; +import { + DELETE_AFFILIATION_MUTATION, + GET_PERSON_AFFILIATIONS_QUERY, +} 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, person, theme } = this.props; + const { isDeleting } = this.state; + return ( + <> + + + + + + ); + } } -function DeleteAffiliation({ - isDeleting, - toggleDelete, - 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) { @@ -55,13 +90,12 @@ function DeleteAffiliation({ return ( { - deleteAffiliation(); - refetch(); - }} + onConfirm={deleteAffiliation} onCancel={() => null} > Test ); } + +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..32db211 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'; +import EditAffiliationControl from './edit'; +import DeleteAffiliationControl from './delete'; -const useStyles = makeStyles(theme => ({ - listItem: { - display: 'flex', - justifyContent: 'flex-end', - alignSelf: 'flex-start', - flexGrow: 1, - }, -})); - -export function AfilliationControls({ affiliation, refetch, ...props }) { - const classes = useStyles(); +export function AfilliationControls({ affiliation, person, ...props }) { 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..6bd5888 100644 --- a/src/apps/admin/features/profile.affiliations/controller.js +++ b/src/apps/admin/features/profile.affiliations/controller.js @@ -1,62 +1,59 @@ -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, second, rest, - refetch, + person, ...props }) { - const classes = useStyles(); - if (affiliations) { return ( <> {first && renderAffiliation({ affiliation: first, - refetch, + person, hasDivider: false, })} {second && renderAffiliation({ affiliation: second, - refetch, + person, hasDivider: false, })} {rest && rest.length > 0 ? ( - + } /> - + {rest.map(affiliation => - renderAffiliation({ affiliation, refetch }) + renderAffiliation({ affiliation, person }) )} - + - + ) : 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..ffade38 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(); +export function renderAffiliation({ affiliation, person, hasDivider = true }) { 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..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; @@ -55,14 +53,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; @@ -90,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/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..f1e0935 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,96 @@ 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, + GET_PERSON_AFFILIATIONS_QUERY, +} 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 } }, + refetchQueries: [ + { + query: GET_PERSON_AFFILIATIONS_QUERY, + variables: { + where: { + person: { + id: user.person.id, + }, + }, + orderBy: 'fromDate_DESC', + }, + }, + ], + 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/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/helpers/renderCompany.js b/src/apps/admin/features/profile.companies/helpers/renderCompany.js index c51726e..0e435c0 100644 --- a/src/apps/admin/features/profile.companies/helpers/renderCompany.js +++ b/src/apps/admin/features/profile.companies/helpers/renderCompany.js @@ -1,43 +1,34 @@ 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.metadata.isPendingReview ? ( + Pending + ) : ( + + )} + - {company.description && truncateText(company.description, 125)} + {company.description && ( + + )} - {hasDivider && ( - - )} - + {hasDivider && } + ); } @@ -55,3 +46,28 @@ const CompanyDescription = styled.p` display: block; } `; + +const CompanyContainer = styled.div(props => + props.isPendingReview + ? { + opacity: 0.8, + pointerEvents: 'none', + backgroundColor: '#DCDCDC', + } + : {} +); + +const StyledDivider = styled(Divider)({ + color: 'black', +}); + +const StyledListItem = styled(ListItem)({ + diplay: 'flex', + justifyContent: 'space-between', + padding: 0, +}); + +const Pending = styled.span` + padding: 1em; + align-self: flex-start; +`; diff --git a/src/apps/admin/features/profile.companies/index.js b/src/apps/admin/features/profile.companies/index.js index a0c4e08..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: { @@ -32,7 +31,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 +40,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 +69,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/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; diff --git a/src/apps/admin/routes/auth/create.js b/src/apps/admin/routes/auth/create.js index 56eaf30..2d478e3 100644 --- a/src/apps/admin/routes/auth/create.js +++ b/src/apps/admin/routes/auth/create.js @@ -48,7 +48,6 @@ function CreateAccount({ classes, ...props }) { setSubmitting(false); setShowConfirm(true); } catch (error) { - console.log('****ERROR INSIDE CREATE USER HERE******', error); if (error.code === 'UsernameExistsException') { setFieldError( 'email', diff --git a/src/apps/admin/routes/auth/createwiz.js b/src/apps/admin/routes/auth/createwiz.js index be8b13e..b407c9a 100644 --- a/src/apps/admin/routes/auth/createwiz.js +++ b/src/apps/admin/routes/auth/createwiz.js @@ -62,8 +62,6 @@ const Container = styled.div` `; function getStepContent({ step, props, hoist }) { - console.log('STEP', step); - console.log('PROPS', props); switch (step) { case 0: 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/apps/admin/routes/profile/index.js b/src/apps/admin/routes/profile/index.js index 1bc2e39..49aa03a 100644 --- a/src/apps/admin/routes/profile/index.js +++ b/src/apps/admin/routes/profile/index.js @@ -10,6 +10,8 @@ import { } from '../../../../graphql'; export const UserProfileWithGraphQL = props => { + const [toggle, toggleState] = React.useState(false); + const { data, loading, error, refetch } = useQuery(GET_CURRENT_USER_QUERY); if (loading) { return null; @@ -20,6 +22,7 @@ export const UserProfileWithGraphQL = props => { } const { me } = data; + const { person, id } = me; while (me === 'undefined' || me === undefined) { refetch(); 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; 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/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/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 !== '' ? ( { description: item.description, })) .map(item => { - // console.log(item); return item; }); }}