add report abuse buttona and form
This commit is contained in:
parent
2b5cea72a5
commit
292c3c4a1f
140
src/components/pages/sharedAlbum/AbuseReportForm.tsx
Normal file
140
src/components/pages/sharedAlbum/AbuseReportForm.tsx
Normal file
|
@ -0,0 +1,140 @@
|
|||
import MessageDialog from 'components/MessageDialog';
|
||||
import SubmitButton from 'components/SubmitButton';
|
||||
import { Formik } from 'formik';
|
||||
import React, { useState } from 'react';
|
||||
import { Form, FormControl } from 'react-bootstrap';
|
||||
import { reportAbuse } from 'services/publicCollectionService';
|
||||
import { sleep } from 'utils/common';
|
||||
import constants from 'utils/strings/constants';
|
||||
import * as Yup from 'yup';
|
||||
|
||||
interface Iprops {
|
||||
show: boolean;
|
||||
close: () => void;
|
||||
}
|
||||
|
||||
enum REPORT_REASON {
|
||||
COPYRIGHT = 'COPYRIGHT',
|
||||
CHILD_ABUSE = 'CHILD_ABUSE',
|
||||
NUDITY = 'NUDITY',
|
||||
OTHER = 'OTHER',
|
||||
}
|
||||
interface FormValues {
|
||||
reason: REPORT_REASON;
|
||||
comment: string;
|
||||
}
|
||||
export function AbuseReportForm({ show, close }: Iprops) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
reportAbuse();
|
||||
await sleep(1000);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
console.log(typeof REPORT_REASON);
|
||||
return (
|
||||
<MessageDialog
|
||||
show={show}
|
||||
onHide={close}
|
||||
attributes={{
|
||||
title: 'abuse report',
|
||||
staticBackdrop: true,
|
||||
}}>
|
||||
<div style={{ padding: '5px 20px' }}>
|
||||
<p>{constants.RECOVERY_KEY_DESCRIPTION}</p>
|
||||
<Formik<FormValues>
|
||||
initialValues={{
|
||||
reason: REPORT_REASON.COPYRIGHT,
|
||||
comment: '',
|
||||
}}
|
||||
validationSchema={Yup.object().shape({
|
||||
email: Yup.mixed<keyof typeof REPORT_REASON>()
|
||||
.oneOf(Object.values(REPORT_REASON))
|
||||
.required(constants.REQUIRED),
|
||||
comment: Yup.string().required(constants.REQUIRED),
|
||||
})}
|
||||
validateOnChange={false}
|
||||
validateOnBlur={false}
|
||||
onSubmit={handleSubmit}>
|
||||
{({
|
||||
values,
|
||||
errors,
|
||||
touched,
|
||||
handleChange,
|
||||
handleSubmit,
|
||||
}): JSX.Element => (
|
||||
<Form noValidate onSubmit={handleSubmit}>
|
||||
<Form.Group controlId="registrationForm.email">
|
||||
<Form.Control
|
||||
as="select"
|
||||
placeholder={constants.ENTER_EMAIL}
|
||||
value={values.reason}
|
||||
onChange={handleChange('reason')}
|
||||
isInvalid={Boolean(
|
||||
touched.reason && errors.reason
|
||||
)}
|
||||
autoFocus
|
||||
disabled={loading}>
|
||||
<option disabled selected>
|
||||
select reason
|
||||
</option>
|
||||
{Object.values(REPORT_REASON).map(
|
||||
(reason) => (
|
||||
<option key={reason} value={reason}>
|
||||
{String(
|
||||
reason
|
||||
).toLocaleLowerCase()}
|
||||
</option>
|
||||
)
|
||||
)}
|
||||
</Form.Control>
|
||||
<FormControl.Feedback type="invalid">
|
||||
{errors.reason}
|
||||
</FormControl.Feedback>
|
||||
</Form.Group>
|
||||
{/* <Form.Group>
|
||||
<Form.Control
|
||||
type="text-area"
|
||||
placeholder={constants.PASSPHRASE_HINT}
|
||||
value={values.passphrase}
|
||||
onChange={handleChange('passphrase')}
|
||||
isInvalid={Boolean(
|
||||
touched.passphrase && errors.passphrase
|
||||
)}
|
||||
disabled={loading}
|
||||
/>
|
||||
<Form.Control.Feedback type="invalid">
|
||||
{errors.passphrase}
|
||||
</Form.Control.Feedback>
|
||||
</Form.Group> */}
|
||||
{/* <Form.Group>
|
||||
<Form.Control
|
||||
type="password"
|
||||
placeholder={constants.RE_ENTER_PASSPHRASE}
|
||||
value={values.confirm}
|
||||
onChange={handleChange('confirm')}
|
||||
isInvalid={Boolean(
|
||||
touched.confirm && errors.confirm
|
||||
)}
|
||||
disabled={loading}
|
||||
/>
|
||||
<Form.Control.Feedback type="invalid">
|
||||
{errors.confirm}
|
||||
</Form.Control.Feedback>
|
||||
</Form.Group> */}
|
||||
|
||||
<SubmitButton
|
||||
buttonText={constants.SUBMIT}
|
||||
loading={loading}
|
||||
/>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</MessageDialog>
|
||||
);
|
||||
}
|
|
@ -18,7 +18,7 @@ const Wrapper = styled.div`
|
|||
function OpenInEnte({ redirect }) {
|
||||
return (
|
||||
<Wrapper onClick={redirect}>
|
||||
<Button variant="outline-success">Open in ente</Button>
|
||||
<Button variant="outline-success">open in ente</Button>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
|
|
22
src/components/pages/sharedAlbum/ReportAbuse.tsx
Normal file
22
src/components/pages/sharedAlbum/ReportAbuse.tsx
Normal file
|
@ -0,0 +1,22 @@
|
|||
import React from 'react';
|
||||
import { Button } from 'react-bootstrap';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Container = styled.div`
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
align-self: flex-end;
|
||||
`;
|
||||
|
||||
interface Iprops {
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export default function ReportAbuse(props: Iprops) {
|
||||
return (
|
||||
<Container>
|
||||
<Button onClick={props.onClick}>report abuse?</Button>
|
||||
</Container>
|
||||
);
|
||||
}
|
|
@ -20,6 +20,8 @@ import { mergeMetadata, sortFiles } from 'utils/file';
|
|||
import { AppContext } from 'pages/_app';
|
||||
import OpenInEnte from 'components/pages/sharedAlbum/OpenInEnte';
|
||||
import { CollectionInfo } from 'components/pages/sharedAlbum/CollectionInfo';
|
||||
import ReportAbuse from 'components/pages/sharedAlbum/ReportAbuse';
|
||||
import { AbuseReportForm } from 'components/pages/sharedAlbum/AbuseReportForm';
|
||||
|
||||
export const defaultPublicCollectionGalleryContext: PublicCollectionGalleryContextType =
|
||||
{
|
||||
|
@ -38,7 +40,10 @@ export default function PublicCollectionGallery() {
|
|||
const [publicFiles, setPublicFiles] = useState<EnteFile[]>(null);
|
||||
const [publicCollection, setPublicCollection] = useState<Collection>(null);
|
||||
const appContext = useContext(AppContext);
|
||||
const [abuseReportFormView, setAbuseReportFormView] = useState(false);
|
||||
|
||||
const showReportForm = () => setAbuseReportFormView(true);
|
||||
const closeReportForm = () => setAbuseReportFormView(false);
|
||||
useEffect(() => {
|
||||
const main = async () => {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
|
@ -109,6 +114,11 @@ export default function PublicCollectionGallery() {
|
|||
activeCollection={ALL_SECTION}
|
||||
isSharedCollection
|
||||
/>
|
||||
<ReportAbuse onClick={showReportForm} />
|
||||
<AbuseReportForm
|
||||
show={abuseReportFormView}
|
||||
close={closeReportForm}
|
||||
/>
|
||||
</PublicCollectionGalleryContext.Provider>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -239,3 +239,7 @@ const decryptCollectionName = async (
|
|||
collectionKey
|
||||
)));
|
||||
};
|
||||
|
||||
export const reportAbuse = () => {
|
||||
return;
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue