Skip to content
This repository has been archived by the owner on Oct 11, 2022. It is now read-only.

add delete cover feature to edit community form #4535

Merged
merged 3 commits into from
Jan 17, 2019
Merged

add delete cover feature to edit community form #4535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
54e7a5a
add delete cover feature to edit community form
ThomasRoest Jan 10, 2019
fc2788b
add coverphoto flow type
ThomasRoest Jan 10, 2019
152fc96
add delete cover feature to createCommunityForm
ThomasRoest Jan 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions api/models/community.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,7 @@ export type EditCommunityInput = {
website: string,
file: Object,
coverFile: Object,
coverPhoto: string,
communityId: string,
},
};
Expand Down Expand Up @@ -410,7 +411,8 @@ export const createCommunity = ({ input }: CreateCommunityInput, user: DBUser):
// prettier-ignore
export const editCommunity = ({ input }: EditCommunityInput, userId: string): Promise<DBCommunity> => {
const { name, slug, description, website, file, coverFile, communityId } = input

let { coverPhoto } = input

return db
.table('communities')
.get(communityId)
Expand All @@ -433,11 +435,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) {
Expand Down Expand Up @@ -466,6 +472,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
Expand All @@ -477,6 +487,7 @@ export const editCommunity = ({ input }: EditCommunityInput, userId: string): Pr
{
...community,
profilePhoto,
coverPhoto
},
{ returnChanges: 'always' }
)
Expand Down
1 change: 1 addition & 0 deletions api/types/Community.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,7 @@ const Community = /* GraphQL */ `
website: String
file: Upload
coverFile: Upload
coverPhoto: String
communityId: ID!
}

Expand Down
25 changes: 25 additions & 0 deletions src/components/editForm/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
17 changes: 17 additions & 0 deletions src/views/communitySettings/components/editForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -25,6 +26,8 @@ import {
Actions,
TertiaryActionContainer,
ImageInputWrapper,
DeleteCoverWrapper,
DeleteCoverButton,
} from '../../../components/editForm/style';
import {
SectionCard,
Expand Down Expand Up @@ -188,6 +191,7 @@ class EditForm extends React.Component<Props, State> {
website,
file,
coverFile,
coverPhoto,
communityId,
photoSizeError,
} = this.state;
Expand All @@ -197,6 +201,7 @@ class EditForm extends React.Component<Props, State> {
website,
file,
coverFile,
coverPhoto,
communityId,
};

Expand Down Expand Up @@ -270,6 +275,11 @@ class EditForm extends React.Component<Props, State> {
);
};

deleteCoverPhoto = e => {
e.preventDefault();
this.setState({ coverPhoto: '', coverFile: null });
};

render() {
const {
name,
Expand Down Expand Up @@ -301,6 +311,13 @@ class EditForm extends React.Component<Props, State> {
<SectionTitle>Community Settings</SectionTitle>
<Form onSubmit={this.save}>
<ImageInputWrapper>
{coverPhoto && !/default_images/.test(coverPhoto) && (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've never seen this !/default_images/.test(coverPhoto) syntax before - could you point me to where I can learn what's going on here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a regex method to check if there's a default image or custom (user uploaded image) and to show or hide the delete (X) button.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

<DeleteCoverWrapper>
<DeleteCoverButton onClick={e => this.deleteCoverPhoto(e)}>
<Icon glyph="view-close-small" size={'16'} />
</DeleteCoverButton>
</DeleteCoverWrapper>
)}
<CoverInput
onChange={this.setCommunityCover}
defaultValue={coverPhoto}
Expand Down
16 changes: 16 additions & 0 deletions src/views/newCommunity/components/createCommunityForm/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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';
Expand Down Expand Up @@ -350,6 +354,11 @@ class CreateCommunityForm extends React.Component<Props, State> {
}
};

deleteCoverPhoto = e => {
e.preventDefault();
this.setState({ coverPhoto: '', coverFile: null });
};

create = e => {
e.preventDefault();
const {
Expand Down Expand Up @@ -465,6 +474,13 @@ class CreateCommunityForm extends React.Component<Props, State> {
<FormContainer data-cy="create-community-form">
<Form>
<ImageInputWrapper>
{coverPhoto && !/default_images/.test(coverPhoto) && (
<DeleteCoverWrapper>
<DeleteCoverButton onClick={e => this.deleteCoverPhoto(e)}>
<Icon glyph="view-close-small" size={'16'} />
</DeleteCoverButton>
</DeleteCoverWrapper>
)}
<CoverInput
onChange={this.setCommunityCover}
defaultValue={coverPhoto}
Expand Down
27 changes: 26 additions & 1 deletion src/views/newCommunity/components/createCommunityForm/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,32 @@
// @flow
import theme from 'shared/theme';
import styled, { css } from 'styled-components';
import { FlexCol } from '../../../../components/globals';
import { FlexCol, FlexRow } from '../../../../components/globals';

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 ImageInputWrapper = styled(FlexCol)`
position: relative;
Expand Down