diff --git a/app/components/StyledUtils/Title.jsx b/app/components/StyledUtils/Title.jsx index 8c26acb90..fc130712a 100644 --- a/app/components/StyledUtils/Title.jsx +++ b/app/components/StyledUtils/Title.jsx @@ -1,5 +1,5 @@ import styled from 'styled-components' -import { fontSize, space, style, themeGet } from 'styled-system' +import { fontSize, fontWeight, space, style, themeGet } from 'styled-system' export const textTransform = style({ prop: 'textTransform', @@ -11,6 +11,7 @@ export const StyledH1 = styled.h1` ${fontSize} ${space} ${textTransform} + ${fontWeight} ` export const StyledH2 = styled.h2` @@ -19,6 +20,7 @@ export const StyledH2 = styled.h2` ${fontSize} ${space} ${textTransform} + ${fontWeight} ` export const StyledH3 = styled.h3` @@ -27,6 +29,7 @@ export const StyledH3 = styled.h3` ${fontSize} ${space} ${textTransform} + ${fontWeight} ` export const StyledH4 = styled.h4` @@ -35,6 +38,7 @@ export const StyledH4 = styled.h4` ${fontSize} ${space} ${textTransform} + ${fontWeight} ` export const StyledH5 = styled.h5` @@ -43,6 +47,7 @@ export const StyledH5 = styled.h5` ${fontSize} ${space} ${textTransform} + ${fontWeight} ` export const StyledH6 = styled.h6` @@ -51,4 +56,5 @@ export const StyledH6 = styled.h6` ${fontSize} ${space} ${textTransform} + ${fontWeight} ` diff --git a/app/components/UsersActions/ActionDiff.jsx b/app/components/UsersActions/ActionDiff.jsx index cfa62450d..8fb36e56b 100644 --- a/app/components/UsersActions/ActionDiff.jsx +++ b/app/components/UsersActions/ActionDiff.jsx @@ -62,9 +62,12 @@ class ActionDiff extends PureComponent { formatChangeValue(value, key) { if (key === 'speaker_id' && value) { return #{value} - } else if (key === 'is_draft' && !value) { + } else if (['is_draft', 'unlisted'].includes(key) && !value) { return 'No' + } else if (typeof value === 'boolean') { + return value ? 'Yes' : 'No' } + return value } diff --git a/app/components/Videos/EditVideoModal.jsx b/app/components/Videos/EditVideoModal.jsx index 1ecb2a192..0f444f542 100644 --- a/app/components/Videos/EditVideoModal.jsx +++ b/app/components/Videos/EditVideoModal.jsx @@ -1,68 +1,130 @@ +import { Mutation } from '@apollo/client/react/components' import { Flex } from '@rebass/grid' import { Formik } from 'formik' +import gql from 'graphql-tag' import React from 'react' import { withNamespaces } from 'react-i18next' import { connect } from 'react-redux' +import Select from 'react-select' import { Edit } from 'styled-icons/fa-regular' import { flashErrorMsg, flashSuccessMsg } from '../../state/flashes/reducer' import { popModal } from '../../state/modals/reducer' import { shiftStatements } from '../../state/video_debate/effects' import FieldWithButton from '../FormUtils/FieldWithButton' -import StyledLabel from '../FormUtils/StyledLabel' import Modal from '../Modal/Modal' import { StyledH3 } from '../StyledUtils/Title' +const editVideoMutation = gql` + mutation editVideo($id: ID!, $unlisted: Boolean) { + editVideo(id: $id, unlisted: $unlisted) { + id + unlisted + } + } +` + class EditVideoModal extends React.PureComponent { renderTitle() { return ( - +
{this.props.t('video.edit')} - +
) } render() { const { t, popModal, video } = this.props + const unlistedOptions = [ + { value: true, label: t('main:videos.unlisted') }, + { value: false, label: t('main:videos.public') }, + ] return ( - {t('video.shiftStatements')} - { - setSubmitting(true) - const reply = await this.props.shiftStatements(values) - setSubmitting(false) - this.props.popModal() - return reply - }} - > - {({ handleSubmit, isSubmitting, values, handleChange }) => ( -
- - - Youtube - - - -
+ + Change visibility + + + {(editVideo) => ( + { + try { + await editVideo({ + variables: { id: video.id, unlisted: values.unlisted }, + }) + this.props.flashSuccessMsg('Visibility changed') + window.location.reload() + } catch (e) { + console.error(e) // eslint-disable-line no-console + this.props.flashErrorMsg('Failed to change visibility') + } + }} + > + {({ handleSubmit, isSubmitting, setFieldValue, values }) => ( +
+