From 54e7a5afe5709e9deb190f305a77fa874fe25cff Mon Sep 17 00:00:00 2001 From: Thomas Roest Date: Thu, 10 Jan 2019 13:25:26 +0100 Subject: [PATCH 1/3] add delete cover feature to edit community form --- api/models/community.js | 16 +++++++++--- api/types/Community.js | 1 + src/components/editForm/style.js | 25 +++++++++++++++++++ .../communitySettings/components/editForm.js | 17 +++++++++++++ 4 files changed, 56 insertions(+), 3 deletions(-) diff --git a/api/models/community.js b/api/models/community.js index 87451f2be0..2964564f36 100644 --- a/api/models/community.js +++ b/api/models/community.js @@ -410,7 +410,8 @@ export const createCommunity = ({ input }: CreateCommunityInput, user: DBUser): // prettier-ignore export const editCommunity = ({ input }: EditCommunityInput, userId: string): Promise => { const { name, slug, description, website, file, coverFile, communityId } = input - + let { coverPhoto } = input + return db .table('communities') .get(communityId) @@ -433,11 +434,15 @@ export const editCommunity = ({ input }: EditCommunityInput, userId: string): Pr // if no file was uploaded, update the community with new string values if (!file && !coverFile) { + // if the coverPhoto was deleted, reset to default + if (!coverPhoto) { + ({ coverPhoto } = getRandomDefaultPhoto()) + } return db .table('communities') .get(communityId) - .update({ ...community }, { returnChanges: 'always' }) - .run() + .update({ ...community, coverPhoto }, { returnChanges: 'always' }) + .run() .then(result => { // if an update happened if (result.replaced === 1) { @@ -466,6 +471,10 @@ export const editCommunity = ({ input }: EditCommunityInput, userId: string): Pr if (file || coverFile) { if (file && !coverFile) { + // if the coverPhoto was deleted, reset to default + if (!coverPhoto) { + ({ coverPhoto } = getRandomDefaultPhoto()) + } return uploadImage(file, 'communities', community.id).then( profilePhoto => { // update the community with the profilePhoto @@ -477,6 +486,7 @@ export const editCommunity = ({ input }: EditCommunityInput, userId: string): Pr { ...community, profilePhoto, + coverPhoto }, { returnChanges: 'always' } ) diff --git a/api/types/Community.js b/api/types/Community.js index 56834e496a..12bf341de5 100644 --- a/api/types/Community.js +++ b/api/types/Community.js @@ -242,6 +242,7 @@ const Community = /* GraphQL */ ` website: String file: Upload coverFile: Upload + coverPhoto: String communityId: ID! } diff --git a/src/components/editForm/style.js b/src/components/editForm/style.js index 278d20116f..16126c98c7 100644 --- a/src/components/editForm/style.js +++ b/src/components/editForm/style.js @@ -48,6 +48,31 @@ export const TertiaryActionContainer = styled(FlexRow)` flex-grow: 1; `; +export const DeleteCoverWrapper = styled(FlexRow)` + justify-content: flex-end; + flex-grow: 1; + height: 0px; +`; + +export const DeleteCoverButton = styled.button` + position: relative; + top: 7px; + left: 10px; + background-color: ${theme.text.placeholder}; + color: ${theme.text.reverse}; + border: none; + border-radius: 50%; + outline: none; + padding: 4px; + height: 24px; + width: 24px; + cursor: pointer; + z-index: 50; + &:hover { + background-color: ${theme.warn.alt}; + } +`; + export const Actions = styled(FlexRow)` margin: 24px -16px 0; width: calc(100% + 32px); diff --git a/src/views/communitySettings/components/editForm.js b/src/views/communitySettings/components/editForm.js index 5c90fe37e7..a825e335f3 100644 --- a/src/views/communitySettings/components/editForm.js +++ b/src/views/communitySettings/components/editForm.js @@ -10,6 +10,7 @@ import { openModal } from '../../../actions/modals'; import { addToastWithTimeout } from '../../../actions/toasts'; import { Button, IconButton } from '../../../components/buttons'; import { Notice } from '../../../components/listItems/style'; +import Icon from 'src/components/icons'; import { Input, UnderlineInput, @@ -25,6 +26,8 @@ import { Actions, TertiaryActionContainer, ImageInputWrapper, + DeleteCoverWrapper, + DeleteCoverButton, } from '../../../components/editForm/style'; import { SectionCard, @@ -188,6 +191,7 @@ class EditForm extends React.Component { website, file, coverFile, + coverPhoto, communityId, photoSizeError, } = this.state; @@ -197,6 +201,7 @@ class EditForm extends React.Component { website, file, coverFile, + coverPhoto, communityId, }; @@ -270,6 +275,11 @@ class EditForm extends React.Component { ); }; + deleteCoverPhoto = e => { + e.preventDefault(); + this.setState({ coverPhoto: '' }); + }; + render() { const { name, @@ -301,6 +311,13 @@ class EditForm extends React.Component { Community Settings
+ {coverPhoto && !/default_images/.test(coverPhoto) && ( + + this.deleteCoverPhoto(e)}> + + + + )} Date: Thu, 10 Jan 2019 13:45:32 +0100 Subject: [PATCH 2/3] add coverphoto flow type --- api/models/community.js | 1 + 1 file changed, 1 insertion(+) diff --git a/api/models/community.js b/api/models/community.js index 2964564f36..db4920c35e 100644 --- a/api/models/community.js +++ b/api/models/community.js @@ -210,6 +210,7 @@ export type EditCommunityInput = { website: string, file: Object, coverFile: Object, + coverPhoto: string, communityId: string, }, }; From 152fc96d80fd3f83a969f674ee7e2aec8abf6a04 Mon Sep 17 00:00:00 2001 From: Thomas Roest Date: Thu, 17 Jan 2019 14:03:17 +0100 Subject: [PATCH 3/3] add delete cover feature to createCommunityForm --- .../communitySettings/components/editForm.js | 2 +- .../components/createCommunityForm/index.js | 16 +++++++++++ .../components/createCommunityForm/style.js | 27 ++++++++++++++++++- 3 files changed, 43 insertions(+), 2 deletions(-) diff --git a/src/views/communitySettings/components/editForm.js b/src/views/communitySettings/components/editForm.js index a825e335f3..256c42b50c 100644 --- a/src/views/communitySettings/components/editForm.js +++ b/src/views/communitySettings/components/editForm.js @@ -277,7 +277,7 @@ class EditForm extends React.Component { deleteCoverPhoto = e => { e.preventDefault(); - this.setState({ coverPhoto: '' }); + this.setState({ coverPhoto: '', coverFile: null }); }; render() { diff --git a/src/views/newCommunity/components/createCommunityForm/index.js b/src/views/newCommunity/components/createCommunityForm/index.js index 3306455cc1..067d1276fd 100644 --- a/src/views/newCommunity/components/createCommunityForm/index.js +++ b/src/views/newCommunity/components/createCommunityForm/index.js @@ -17,6 +17,8 @@ import { getCommunityBySlugQuery } from 'shared/graphql/queries/community/getCom import { searchCommunitiesQuery } from 'shared/graphql/queries/search/searchCommunities'; import { Button } from 'src/components/buttons'; import { CommunityHoverProfile } from 'src/components/hoverProfile'; +import Icon from 'src/components/icons'; + import { Input, UnderlineInput, @@ -36,6 +38,8 @@ import { PrivacyOption, PrivacyOptionLabel, PrivacyOptionText, + DeleteCoverWrapper, + DeleteCoverButton, } from './style'; import { FormContainer, Form, Actions } from '../../style'; import { track, events } from 'src/helpers/analytics'; @@ -350,6 +354,11 @@ class CreateCommunityForm extends React.Component { } }; + deleteCoverPhoto = e => { + e.preventDefault(); + this.setState({ coverPhoto: '', coverFile: null }); + }; + create = e => { e.preventDefault(); const { @@ -465,6 +474,13 @@ class CreateCommunityForm extends React.Component { + {coverPhoto && !/default_images/.test(coverPhoto) && ( + + this.deleteCoverPhoto(e)}> + + + + )}