From 62b88ed8d0f8f1dddb9b69aeb9b1d1d46d2ff226 Mon Sep 17 00:00:00 2001 From: tudi2d Date: Thu, 12 Mar 2020 15:36:28 +0100 Subject: [PATCH] Remove image caption - Remove references & tests for image caption - Remove old unnecessary .save file --- cypress/fixtures/seed/howtos.json | 5 +- cypress/integration/howto/write.spec.ts | 18 +- cypress/support/custom-assertions.ts | 5 +- src/models/howto.models.tsx | 3 - src/pages/Howto/Content/Common/Howto.form.tsx | 8 - .../Howto/Content/Common/Howto.form.tsx.save | 451 ------------------ .../Howto/Content/Common/HowtoStep.form.tsx | 8 - .../Howto/Content/CreateHowto/Template.tsx | 3 - .../Howto/Content/EditHowto/Template.tsx | 3 - .../Howto/Content/Howto/Step/ImageGallery.tsx | 3 - src/pages/Howto/Content/Howto/Step/Step.tsx | 1 - 11 files changed, 4 insertions(+), 504 deletions(-) delete mode 100644 src/pages/Howto/Content/Common/Howto.form.tsx.save diff --git a/cypress/fixtures/seed/howtos.json b/cypress/fixtures/seed/howtos.json index 1f877ac264..3392e6b0b3 100644 --- a/cypress/fixtures/seed/howtos.json +++ b/cypress/fixtures/seed/howtos.json @@ -2002,7 +2002,6 @@ ], "text": "Alright so before starting, here some basics to check out and prepare first.\n\nFor this technique you will need:\nMachines: Shredder (or already shredded plastic), Extrusion machine, Oven\nTools: Scissors / Knife, Pliers, Weighing scales and two containers, Silicone oil, Clamps, Spanner\nMaterials: Polystyrene and pigment\n\nIf you haven't extruded beams before, learn more in the How-to \"Make a mould for beams\".\n(https://community.preciousplastic.com/how-to/make-a-mould-for-extruding-beams)", "_animationKey": "unique1", - "caption": "", "title": "Get ready" }, { @@ -2020,7 +2019,6 @@ ], "text": "When melting plastic, bad fumes can be released. In order to work safer, make sure to use a breathing mask with ABEK filters to prevent inhaling possibly toxic fumes. Special attention on plastics like PS (polystyrene) and PVC. Also when handling with heated elements and plastic we recommend to wear working gloves.\n\nRecommended safety equipment: ABEK mask, gloves and glasses", "_animationKey": "unique2", - "caption": "", "title": "Stay safe" }, { @@ -2038,8 +2036,7 @@ } ], "text": "Selecting the right material is crucial when it comes to aesthetics. What properties does the material have, what colour is it? \nAs PS stays transparent in the recycling process, it has the perfect quality to make a light. Collect your clean PS, which is typically found in old CD and cassette cases. Make sure to shred enough, the required amount will vary depending on the size of your mould.", - "_animationKey": "unique3", - "caption": "" + "_animationKey": "unique3" }, { "text": "Now we use pigment to add colour to the transparent polystyrene. You can find it online (search for 'pigment for polystyrene'), but do check out if you can find it in a local shop. Using pigment has the advantage that it keeps the translucency of your material. If you only have access to coloured PS plastic, you will probably not get the same effect (unless the plastic is also translucent), so this will need some testing.\n
Start by cutting one pellet of pigment into smaller pieces. The pigment we use (___) has a really strong affect so you only need a small amount to mix with.", diff --git a/cypress/integration/howto/write.spec.ts b/cypress/integration/howto/write.spec.ts index 6e77b874dc..ba422816ca 100644 --- a/cypress/integration/howto/write.spec.ts +++ b/cypress/integration/howto/write.spec.ts @@ -30,7 +30,6 @@ describe('[How To]', () => { stepNumber: number, title: string, description: string, - caption: string, images: string[], ) => { const stepIndex = stepNumber - 1 @@ -42,9 +41,6 @@ describe('[How To]', () => { cy.get('[data-cy=step-description]') .clear() .type(`Description for step ${stepNumber}`) - cy.get('[data-cy=step-caption]') - .clear() - .type('What a step caption') cy.step('Uploading pics') const hasExistingPics = Cypress.$($step).find('[data-cy=delete-step-img]').length > 0 @@ -76,7 +72,6 @@ describe('[How To]', () => { const expected = { _createdBy: 'howto_creator', _deleted: false, - caption: 'Intro caption goes here ...', description: 'After creating, the how-to will be deleted', difficulty_level: 'Medium', time: '1-2 weeks', @@ -95,7 +90,6 @@ describe('[How To]', () => { steps: [ { _animationKey: 'unique1', - caption: 'What a step caption', images: [ { contentType: 'image/jpeg', @@ -115,7 +109,6 @@ describe('[How To]', () => { }, { _animationKey: 'unique2', - caption: 'What a step caption', images: [], text: 'Description for step 2', title: 'Step 2 is easy', @@ -144,14 +137,13 @@ describe('[How To]', () => { selectDifficultLevel(expected.difficulty_level as Difficulty) cy.get('[data-cy=intro-description]').type(expected.description) - cy.get('[data-cy=intro-caption]').type(expected.caption) cy.step('Upload a cover for the intro') cy.get('[data-cy=intro-cover]') .find(':file') .uploadFiles('images/howto-intro.jpg') expected.steps.forEach((step, index) => { - fillStep(index + 1, step.title, step.text, step.caption, [ + fillStep(index + 1, step.title, step.text, [ 'images/howto-step-pic1.jpg', 'images/howto-step-pic2.jpg', ]) @@ -185,7 +177,6 @@ describe('[How To]', () => { const expected = { _createdBy: 'howto_editor', _deleted: false, - caption: 'Caption edited!', description: 'After editing, all changes are reverted', difficulty_level: 'Hard', files: [], @@ -202,7 +193,6 @@ describe('[How To]', () => { steps: [ { _animationKey: 'unique1', - caption: 'What a step caption', images: [ { contentType: 'image/jpeg', @@ -222,7 +212,6 @@ describe('[How To]', () => { }, { _animationKey: 'unique3', - caption: 'What a step caption', images: [ { contentType: 'image/jpeg', @@ -277,9 +266,6 @@ describe('[How To]', () => { cy.get('[data-cy=intro-description]') .clear() .type(expected.description) - cy.get('[data-cy=intro-caption]') - .clear() - .type(expected.caption) cy.step('Update a new cover for the intro') @@ -292,7 +278,7 @@ describe('[How To]', () => { deleteStep(2) expected.steps.forEach((step, index) => { - fillStep(index + 1, step.title, step.text, step.caption, [ + fillStep(index + 1, step.title, step.text, [ 'images/howto-step-pic1.jpg', 'images/howto-step-pic2.jpg', ]) diff --git a/cypress/support/custom-assertions.ts b/cypress/support/custom-assertions.ts index c5fd2839cd..b7ec899c1d 100644 --- a/cypress/support/custom-assertions.ts +++ b/cypress/support/custom-assertions.ts @@ -18,7 +18,6 @@ const eqHowto = (chaiObj, utils) => { const { _createdBy, _deleted, - caption, description, difficulty_level, slug, @@ -29,7 +28,6 @@ const eqHowto = (chaiObj, utils) => { expect(subject, 'Basic info').to.containSubset({ _createdBy, _deleted, - caption, description, difficulty_level, slug, @@ -53,10 +51,9 @@ const eqHowto = (chaiObj, utils) => { const eqHowtoStep = (chaiObj, utils) => { function compare(this: any, expected: any, index: number) { const subject: IHowtoStep = this._obj - const { _animationKey, caption, text, title } = expected + const { _animationKey, text, title } = expected expect(subject, `Step ${index} with info`).to.containSubset({ _animationKey, - caption, text, title, }) diff --git a/src/models/howto.models.tsx b/src/models/howto.models.tsx index 42c60e0031..fd0cefe637 100644 --- a/src/models/howto.models.tsx +++ b/src/models/howto.models.tsx @@ -22,7 +22,6 @@ export interface IHowtoStep extends IHowToStepFormInput { images: Array title: string text: string - caption?: string _animationKey?: string } @@ -30,7 +29,6 @@ export interface IHowToStepFormInput { images: Array title: string text: string - caption?: string _animationKey?: string } @@ -46,5 +44,4 @@ export interface IHowtoFormInput extends IModerable { slug: string // note, tags will remain optional as if populated {} will be stripped by db (firestore) tags?: ISelectedTags - caption?: string } diff --git a/src/pages/Howto/Content/Common/Howto.form.tsx b/src/pages/Howto/Content/Common/Howto.form.tsx index 73c2e63bb5..41d62079be 100644 --- a/src/pages/Howto/Content/Common/Howto.form.tsx +++ b/src/pages/Howto/Content/Common/Howto.form.tsx @@ -357,14 +357,6 @@ export class HowtoForm extends React.Component { This image should be landscape. We advise 1280x960px - - - diff --git a/src/pages/Howto/Content/Common/Howto.form.tsx.save b/src/pages/Howto/Content/Common/Howto.form.tsx.save deleted file mode 100644 index 165d3848d9..0000000000 --- a/src/pages/Howto/Content/Common/Howto.form.tsx.save +++ /dev/null @@ -1,451 +0,0 @@ -import * as React from 'react' -import { RouteComponentProps, Prompt } from 'react-router' -import { Form, Field } from 'react-final-form' -import styled from 'styled-components' -import { FieldArray } from 'react-final-form-arrays' -import arrayMutators from 'final-form-arrays' -import createDecorator from 'final-form-calculate' -import { IHowtoFormInput, IHowto } from 'src/models/howto.models' -import Text from 'src/components/Text' -import { UploadedFile } from 'src/pages/common/UploadedFile/UploadedFile' -import { InputField, TextAreaField } from 'src/components/Form/Fields' -import { SelectField } from 'src/components/Form/Select.field' -import { HowtoStep } from './HowtoStep.form' -import { Button } from 'src/components/Button' -import { HowtoStore } from 'src/stores/Howto/howto.store' -import Heading from 'src/components/Heading' -import Flex from 'src/components/Flex' -import { TagsSelectField } from 'src/components/Form/TagsSelect.field' -import { ImageInputField } from 'src/components/Form/ImageInput.field' -import { FileInputField } from 'src/components/Form/FileInput.field' -import posed, { PoseGroup } from 'react-pose' -import { inject, observer } from 'mobx-react' -import { stripSpecialCharacters } from 'src/utils/helpers' -import { PostingGuidelines } from './PostingGuidelines' -import theme from 'src/themes/styled.theme' -import { DIFFICULTY_OPTIONS, TIME_OPTIONS } from './FormSettings' -import { Image, Box } from 'rebass' -import { FileInfo } from 'src/components/FileInfo/FileInfo' -import { HowToSubmitStatus } from './SubmitStatus' -import { required } from 'src/utils/validators' - -interface IState { - formSaved: boolean - _toDocsList: boolean - showSubmitModal?: boolean - editCoverImg?: boolean - fileEditMode?: boolean - draft?: boolean -} -interface IProps extends RouteComponentProps { - formValues: any - parentType: 'create' | 'edit' -} -interface IInjectedProps extends IProps { - howtoStore: HowtoStore -} - -const AnimationContainer = posed.div({ - // use flip pose to prevent default spring action on list item removed - flip: { - transition: { - // type: 'tween', - // ease: 'linear', - }, - }, - // use a pre-enter pose as otherwise default will be the exit state and so will animate - // horizontally as well - preEnter: { - opacity: 0, - }, - enter: { - opacity: 1, - duration: 200, - applyAtStart: { display: 'block' }, - }, - exit: { - applyAtStart: { display: 'none' }, - duration: 200, - }, -}) - -const Label = styled.label` - font-size: ${theme.fontSizes[2] + 'px'}; - margin-bottom: ${theme.space[2] + 'px'}; - display: block; -` - -@inject('howtoStore') -@observer -export class HowtoForm extends React.Component { - uploadRefs: { [key: string]: UploadedFile | null } = {} - constructor(props: any) { - super(props) - this.state = { - formSaved: false, - _toDocsList: false, - editCoverImg: false, - fileEditMode: false, - showSubmitModal: false, - } - } - - private trySubmitForm = (draft: boolean) => { - this.setState({ draft: draft}) - const form = document.getElementById('howtoForm') - if (typeof form !== 'undefined' && form !== null) { - console.log(draft); - form.dispatchEvent( - new Event('submit', { cancelable: true }), - ) - this.setState({ showSubmitModal: true, draft: draft}) - } - } - public onSubmit = async (formValues: IHowtoFormInput) => { - console.log('\n\nState:'); - console.log(this.state.draft); - formValues.moderation = this.state.draft ? 'draft' : 'awaiting-moderation'; - console.log(formValues.moderation); - await this.store.uploadHowTo(formValues) - console.log(this.state.draft); - } - - get injected() { - return this.props as IInjectedProps - } - get store() { - return this.injected.howtoStore - } - - public validateTitle = async (value: any) => { - return this.store.validateTitle(value, 'v3_howtos') - } - - // automatically generate the slug when the title changes - private calculatedFields = createDecorator({ - field: 'title', - updates: { - slug: title => stripSpecialCharacters(title).toLowerCase(), - }, - }) - public render() { - const { formValues, parentType } = this.props - const { fileEditMode, showSubmitModal } = this.state - return ( - <> - {showSubmitModal && ( - { - this.setState({ showSubmitModal: false }) - this.injected.howtoStore.resetUploadStatus() - }} - /> - )} - -
{ - this.onSubmit(v as IHowtoFormInput) - }} - initialValues={formValues} - mutators={{ - ...arrayMutators, - }} - validateOnBlur - decorators={[this.calculatedFields]} - render={({ submitting, values, invalid, errors, handleSubmit }) => { - const disabled = invalid || submitting - return ( - - - - {/* How To Info */} - - - - {this.props.parentType === 'create' ? ( - Create - ) : ( - Edit - )}{' '} - your How-To - - - - {/* Left Side */} - - Intro - - - - - - - this.props.parentType === 'create' - ? this.validateTitle(value) - : false - } - component={InputField} - placeholder="Make a chair from... - " - /> - - - - - - - - - - - - - - - - - - - - {formValues.files.length !== 0 && - parentType === 'edit' && - !fileEditMode ? ( - - {formValues.files.map(file => ( - - ))} - - - ) : ( - <> - - - )} - - - {/* Right side */} - - - - - - - - This image should be landscape. We advise - 1280x960px - - - - - - - - - {/* Steps Info */} - - {({ fields }) => ( - <> - - {fields.map((name, index: number) => ( - - { - fields.remove(fieldIndex) - }} - /> - - ))} - - - - - - )} - - - - - {/* post guidelines container */} - - - - - - - -
- ) - }} - /> - - ) - } -} diff --git a/src/pages/Howto/Content/Common/HowtoStep.form.tsx b/src/pages/Howto/Content/Common/HowtoStep.form.tsx index af6582e8ef..11918d09cd 100644 --- a/src/pages/Howto/Content/Common/HowtoStep.form.tsx +++ b/src/pages/Howto/Content/Common/HowtoStep.form.tsx @@ -159,14 +159,6 @@ class HowtoStep extends Component { /> - - - ) } diff --git a/src/pages/Howto/Content/CreateHowto/Template.tsx b/src/pages/Howto/Content/CreateHowto/Template.tsx index ccccd1dfa9..b2ac45ec62 100644 --- a/src/pages/Howto/Content/CreateHowto/Template.tsx +++ b/src/pages/Howto/Content/CreateHowto/Template.tsx @@ -7,21 +7,18 @@ const INITIAL_VALUES: Partial = { title: '', text: '', images: [], - caption: '', _animationKey: 'unique1', }, { title: '', text: '', images: [], - caption: '', _animationKey: 'unique2', }, { title: '', text: '', images: [], - caption: '', _animationKey: 'unique3', }, ], diff --git a/src/pages/Howto/Content/EditHowto/Template.tsx b/src/pages/Howto/Content/EditHowto/Template.tsx index db60a259dc..6d49811a30 100644 --- a/src/pages/Howto/Content/EditHowto/Template.tsx +++ b/src/pages/Howto/Content/EditHowto/Template.tsx @@ -7,21 +7,18 @@ const INITIAL_VALUES: Partial = { title: 'EDITABLE', text: '', images: [], - caption: '', _animationKey: 'unique1', }, { title: 'EDITABLE', text: '', images: [], - caption: '', _animationKey: 'unique2', }, { title: 'EDITABLE', text: '', images: [], - caption: '', _animationKey: 'unique3', }, ], diff --git a/src/pages/Howto/Content/Howto/Step/ImageGallery.tsx b/src/pages/Howto/Content/Howto/Step/ImageGallery.tsx index 83b5fc1d21..b203bf7ca7 100644 --- a/src/pages/Howto/Content/Howto/Step/ImageGallery.tsx +++ b/src/pages/Howto/Content/Howto/Step/ImageGallery.tsx @@ -7,7 +7,6 @@ import styled from 'styled-components' interface IProps { images: IUploadedFileMeta[] - caption?: string } interface IState { @@ -77,7 +76,6 @@ export default class ImageGallery extends React.PureComponent { render() { const images = this.state.images const imageNumber = images.length - const { caption } = this.props return this.state.activeImage ? ( @@ -110,7 +108,6 @@ export default class ImageGallery extends React.PureComponent { {this.state.showLightbox && ( {