autocomplete-added
This commit is contained in:
jubitjohn
parent
7e939e16f5
commit
10c1b8afa1
|
|
@ -2,17 +2,57 @@ import SingleInputForm, {
|
|||
SingleInputFormProps,
|
||||
} from 'components/SingleInputForm';
|
||||
import { GalleryContext } from 'pages/gallery';
|
||||
import React, { useContext } from 'react';
|
||||
import React, { useContext, useState, useEffect } from 'react';
|
||||
import { t } from 'i18next';
|
||||
import { shareCollection } from 'services/collectionService';
|
||||
import { User } from 'types/user';
|
||||
import { handleSharingErrors } from 'utils/error/ui';
|
||||
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
||||
import { CollectionShareSharees } from './sharees';
|
||||
import { getLocalCollections } from 'services/collectionService';
|
||||
|
||||
export default function EmailShare({ collection }) {
|
||||
const galleryContext = useContext(GalleryContext);
|
||||
|
||||
const [updatedOptionsList, setUpdatedOptionsList] = useState(['hello']);
|
||||
let updatedList = [];
|
||||
|
||||
// const collection_list = getLocalCollections();
|
||||
// collection_list.then((result) => {
|
||||
// const emails = result.flatMap((item) => item.sharees.map((sharee) => sharee.email));
|
||||
// updatedOptionsList = [...emails];
|
||||
// console.log(updatedOptionsList);
|
||||
// });
|
||||
// console.log(updatedOptionsList)
|
||||
useEffect(() => {
|
||||
const owner_user1: User = getData(LS_KEYS.USER);
|
||||
const collection_list = getLocalCollections();
|
||||
const getUpdatedOptionsList = async () => {
|
||||
const result = await collection_list;
|
||||
const emails = result.flatMap((item) =>
|
||||
item.sharees.map((sharee) => sharee.email)
|
||||
);
|
||||
updatedList = Array.from(new Set(emails));
|
||||
console.log(updatedList);
|
||||
setUpdatedOptionsList(updatedList);
|
||||
|
||||
const filteredList = updatedList.filter(
|
||||
(email) =>
|
||||
!collection.sharees
|
||||
.map((sharees) => sharees.email)
|
||||
.includes(email) && email !== owner_user1.email
|
||||
);
|
||||
console.log(filteredList);
|
||||
|
||||
setUpdatedOptionsList(filteredList);
|
||||
|
||||
console.log(collection.sharees.map((sharees) => sharees.email));
|
||||
console.log(owner_user1.email);
|
||||
};
|
||||
|
||||
getUpdatedOptionsList();
|
||||
}, []);
|
||||
|
||||
const collectionShare: SingleInputFormProps['callback'] = async (
|
||||
email,
|
||||
setFieldError,
|
||||
|
|
@ -40,6 +80,7 @@ export default function EmailShare({ collection }) {
|
|||
<>
|
||||
<SingleInputForm
|
||||
callback={collectionShare}
|
||||
optionsList={updatedOptionsList}
|
||||
placeholder={t('ENTER_EMAIL')}
|
||||
fieldType="email"
|
||||
buttonText={t('SHARE')}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,11 @@ import { Formik, FormikHelpers, FormikState } from 'formik';
|
|||
import * as Yup from 'yup';
|
||||
import SubmitButton from './SubmitButton';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import ShowHidePassword from './Form/ShowHidePassword';
|
||||
// import ShowHidePassword from './Form/ShowHidePassword';
|
||||
import { FlexWrapper } from './Container';
|
||||
import { Button, FormHelperText } from '@mui/material';
|
||||
import { t } from 'i18next';
|
||||
import Autocomplete from '@mui/material/Autocomplete';
|
||||
|
||||
interface formValues {
|
||||
inputValue: string;
|
||||
|
|
@ -30,6 +31,7 @@ export interface SingleInputFormProps {
|
|||
autoComplete?: string;
|
||||
blockButton?: boolean;
|
||||
hiddenLabel?: boolean;
|
||||
optionsList?: string[];
|
||||
}
|
||||
|
||||
export default function SingleInputForm(props: SingleInputFormProps) {
|
||||
|
|
@ -37,7 +39,7 @@ export default function SingleInputForm(props: SingleInputFormProps) {
|
|||
const { sx: buttonSx, ...restSubmitButtonProps } = submitButtonProps ?? {};
|
||||
|
||||
const [loading, SetLoading] = useState(false);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
// const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
const submitForm = async (
|
||||
values: formValues,
|
||||
|
|
@ -52,15 +54,15 @@ export default function SingleInputForm(props: SingleInputFormProps) {
|
|||
SetLoading(false);
|
||||
};
|
||||
|
||||
const handleClickShowPassword = () => {
|
||||
setShowPassword(!showPassword);
|
||||
};
|
||||
// const handleClickShowPassword = () => {
|
||||
// setShowPassword(!showPassword);
|
||||
// };
|
||||
|
||||
const handleMouseDownPassword = (
|
||||
event: React.MouseEvent<HTMLButtonElement>
|
||||
) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
// const handleMouseDownPassword = (
|
||||
// event: React.MouseEvent<HTMLButtonElement>
|
||||
// ) => {
|
||||
// event.preventDefault();
|
||||
// };
|
||||
|
||||
const validationSchema = useMemo(() => {
|
||||
switch (props.fieldType) {
|
||||
|
|
@ -91,37 +93,48 @@ export default function SingleInputForm(props: SingleInputFormProps) {
|
|||
{({ values, errors, handleChange, handleSubmit }) => (
|
||||
<form noValidate onSubmit={handleSubmit}>
|
||||
{props.hiddenPreInput}
|
||||
<TextField
|
||||
hiddenLabel={props.hiddenLabel}
|
||||
variant="filled"
|
||||
fullWidth
|
||||
type={showPassword ? 'text' : props.fieldType}
|
||||
id={props.fieldType}
|
||||
name={props.fieldType}
|
||||
{...(props.hiddenLabel
|
||||
? { placeholder: props.placeholder }
|
||||
: { label: props.placeholder })}
|
||||
value={values.inputValue}
|
||||
onChange={handleChange('inputValue')}
|
||||
error={Boolean(errors.inputValue)}
|
||||
helperText={errors.inputValue}
|
||||
disabled={loading}
|
||||
autoFocus={!props.disableAutoFocus}
|
||||
autoComplete={props.autoComplete}
|
||||
InputProps={{
|
||||
endAdornment: props.fieldType === 'password' && (
|
||||
<ShowHidePassword
|
||||
showPassword={showPassword}
|
||||
handleClickShowPassword={
|
||||
handleClickShowPassword
|
||||
}
|
||||
handleMouseDownPassword={
|
||||
handleMouseDownPassword
|
||||
}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
<Autocomplete
|
||||
id="free-solo-demo"
|
||||
freeSolo
|
||||
options={props.optionsList}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
hiddenLabel={props.hiddenLabel}
|
||||
variant="filled"
|
||||
fullWidth
|
||||
type={showPassword ? 'text' : props.fieldType}
|
||||
id={props.fieldType}
|
||||
name={props.fieldType}
|
||||
{...(props.hiddenLabel
|
||||
? { placeholder: props.placeholder }
|
||||
: { label: props.placeholder })}
|
||||
value={values.inputValue}
|
||||
onChange={handleChange('inputValue')}
|
||||
error={Boolean(errors.inputValue)}
|
||||
helperText={errors.inputValue}
|
||||
disabled={loading}
|
||||
autoFocus={!props.disableAutoFocus}
|
||||
autoComplete={props.autoComplete}
|
||||
|
||||
// InputProps=
|
||||
// {{
|
||||
// endAdornment: props.fieldType === 'password' && (
|
||||
// <ShowHidePassword
|
||||
// showPassword={showPassword}
|
||||
// handleClickShowPassword={
|
||||
// handleClickShowPassword
|
||||
// }
|
||||
// handleMouseDownPassword={
|
||||
// handleMouseDownPassword
|
||||
// }
|
||||
// />
|
||||
// ),
|
||||
// }}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormHelperText
|
||||
sx={{
|
||||
position: 'relative',
|
||||
|
|
|
|||
Loading…
Reference in a new issue