mirror of
https://github.com/bubblecup-12/VogelSocialMedia.git
synced 2025-07-06 14:38:48 +00:00
fix double posts on double click
This commit is contained in:
Niklas
MisbehavedNinjaRadiator
parent
0a3a406180
commit
2641e5cf19
1 changed files with 294 additions and 239 deletions
|
|
@ -1,6 +1,13 @@
|
||||||
import { useState, useEffect, useRef } from "react";
|
import { useState, useEffect, useRef } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { Box, Card, CardMedia, CardActionArea, IconButton, Typography } from "@mui/material";
|
import {
|
||||||
|
Box,
|
||||||
|
Card,
|
||||||
|
CardMedia,
|
||||||
|
CardActionArea,
|
||||||
|
IconButton,
|
||||||
|
Typography,
|
||||||
|
} from "@mui/material";
|
||||||
import Chip from "@mui/material/Chip";
|
import Chip from "@mui/material/Chip";
|
||||||
import Autocomplete from "@mui/material/Autocomplete";
|
import Autocomplete from "@mui/material/Autocomplete";
|
||||||
import TextField from "@mui/material/TextField";
|
import TextField from "@mui/material/TextField";
|
||||||
|
|
@ -12,258 +19,306 @@ import ButtonPrimary from "../../components/buttons/buttonRotkehlchen/ButtonRotk
|
||||||
import "./postCreation.css";
|
import "./postCreation.css";
|
||||||
|
|
||||||
const theme = createTheme({
|
const theme = createTheme({
|
||||||
palette: {
|
palette: {
|
||||||
primary: {
|
primary: {
|
||||||
main:'#e79a0e;'
|
main: "#e79a0e;",
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
function PostCreation(){
|
function PostCreation() {
|
||||||
const {user} = useAuth();
|
const { user } = useAuth();
|
||||||
interface ImageItem {
|
interface ImageItem {
|
||||||
src: string;
|
src: string;
|
||||||
title: string;
|
title: string;
|
||||||
}
|
}
|
||||||
const [options, setOptions] = useState<string[]>([]);
|
const [isSend, setIsSend] = useState<boolean>(false);
|
||||||
const [tags, setTags] = useState<string[]>([]);
|
const [options, setOptions] = useState<string[]>([]);
|
||||||
const [description, setDescription] = useState<string>("");
|
const [tags, setTags] = useState<string[]>([]);
|
||||||
const [selectedImage, setSelectedImage] = useState<string>();
|
const [description, setDescription] = useState<string>("");
|
||||||
|
const [selectedImage, setSelectedImage] = useState<string>();
|
||||||
|
|
||||||
const [data, setData] = useState<ImageItem[]>([]);
|
const [data, setData] = useState<ImageItem[]>([]);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const [fileList,setFileList] = useState<File[]>([]);
|
const [fileList, setFileList] = useState<File[]>([]);
|
||||||
const inputFile = useRef<HTMLInputElement | null>(null);
|
const inputFile = useRef<HTMLInputElement | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
(async () => {
|
(async () => {
|
||||||
try {
|
try {
|
||||||
const res = await api.get<string[]>("/posts/tags"); // GET /api/posts/tags
|
const res = await api.get<string[]>("/posts/tags"); // GET /api/posts/tags
|
||||||
if (!cancelled) setOptions(res.data);
|
if (!cancelled) setOptions(res.data);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
return () => { cancelled = true; };
|
return () => {
|
||||||
}, []);
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
|
const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||||
setDescription(event.target.value);
|
setDescription(event.target.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleTags = (event: any, newValue: string[]) => {
|
const handleTags = (event: any, newValue: string[]) => {
|
||||||
newValue.forEach((val) => {
|
newValue.forEach((val) => {
|
||||||
if (!options.includes(val)) {
|
if (!options.includes(val)) {
|
||||||
setOptions((prev) => [...prev, val]);
|
setOptions((prev) => [...prev, val]);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
setTags(newValue);
|
setTags(newValue);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const files = event.target.files;
|
const files = event.target.files;
|
||||||
if (files && files.length > 0) {
|
if (files && files.length > 0) {
|
||||||
const fileArr = Array.from(files);
|
const fileArr = Array.from(files);
|
||||||
const newItems: ImageItem[] = Array.from(files).map((file) => ({
|
const newItems: ImageItem[] = Array.from(files).map((file) => ({
|
||||||
src: URL.createObjectURL(file),
|
src: URL.createObjectURL(file),
|
||||||
title: file.name,
|
title: file.name,
|
||||||
}
|
}));
|
||||||
));
|
|
||||||
|
|
||||||
const lastImageUrl = newItems[newItems.length - 1].src;
|
|
||||||
|
|
||||||
setData((prev) => [...prev, ...newItems]);
|
const lastImageUrl = newItems[newItems.length - 1].src;
|
||||||
setSelectedImage(lastImageUrl);
|
|
||||||
setFileList(prev => [...prev, ...fileArr]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const onEmptyImgClick = () =>{
|
|
||||||
if(inputFile.current){
|
|
||||||
inputFile.current?.click();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const handleDelete = (idx: number) =>{
|
|
||||||
setData((prev) => prev.filter((_, i) => i !== idx));
|
|
||||||
if((idx-1)<0){
|
|
||||||
if(data.length == 1){setSelectedImage("");}
|
|
||||||
else{setSelectedImage(data[idx+1].src);}
|
|
||||||
}
|
|
||||||
else {setSelectedImage(data[idx-1].src);}
|
|
||||||
}
|
|
||||||
|
|
||||||
const onSubmit = async(event: React.FormEvent) =>{
|
setData((prev) => [...prev, ...newItems]);
|
||||||
event.preventDefault();
|
setSelectedImage(lastImageUrl);
|
||||||
if (!fileList) {
|
setFileList((prev) => [...prev, ...fileArr]);
|
||||||
return;
|
}
|
||||||
}
|
};
|
||||||
const fData = new FormData();
|
const onEmptyImgClick = () => {
|
||||||
files.forEach((file, i) => {
|
if (inputFile.current) {
|
||||||
fData.append(`images`, file, file.name);
|
inputFile.current?.click();
|
||||||
});
|
}
|
||||||
fData.append('status','PUBLIC');
|
};
|
||||||
fData.append('description', description);
|
const handleDelete = (idx: number) => {
|
||||||
tags.forEach((tag) => {
|
setData((prev) => prev.filter((_, i) => i !== idx));
|
||||||
fData.append("tags" ,tag);
|
if (idx - 1 < 0) {
|
||||||
})
|
if (data.length == 1) {
|
||||||
|
setSelectedImage("");
|
||||||
|
} else {
|
||||||
|
setSelectedImage(data[idx + 1].src);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setSelectedImage(data[idx - 1].src);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
try {
|
const onSubmit = async (event: React.FormEvent) => {
|
||||||
await api.post("/posts/upload", fData)
|
if (!isSend) {
|
||||||
navigate(`/profile/${user?.username}`)
|
setIsSend(true);
|
||||||
} catch (error:any) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const onCancel= () => {
|
|
||||||
navigate(`/profile/${user?.username}`)
|
|
||||||
};
|
|
||||||
|
|
||||||
const files = fileList ? [...fileList] : [];
|
event.preventDefault();
|
||||||
|
if (!fileList) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const fData = new FormData();
|
||||||
|
files.forEach((file, i) => {
|
||||||
|
fData.append(`images`, file, file.name);
|
||||||
|
});
|
||||||
|
fData.append("status", "PUBLIC");
|
||||||
|
fData.append("description", description);
|
||||||
|
tags.forEach((tag) => {
|
||||||
|
fData.append("tags", tag);
|
||||||
|
});
|
||||||
|
|
||||||
return(
|
try {
|
||||||
<ThemeProvider theme={theme}>
|
await api.post("/posts/upload", fData);
|
||||||
<div className="create-display">
|
navigate(`/profile/${user?.username}`);
|
||||||
<div className="create-part">
|
} catch (error: any) {
|
||||||
<form onSubmit={onSubmit}>
|
console.log(error);
|
||||||
<h1>Create Post</h1>
|
}
|
||||||
<div className="create-layout">
|
}
|
||||||
<div className="create-preview">
|
};
|
||||||
{selectedImage?
|
const onCancel = () => {
|
||||||
<img src={selectedImage} className="create-post-image" alt="Add an Image"></img>:
|
navigate(`/profile/${user?.username}`);
|
||||||
<label className="create-post-img-layer" onClick={onEmptyImgClick}>
|
};
|
||||||
<strong>Add Picture</strong>
|
|
||||||
</label>}
|
|
||||||
</div>
|
|
||||||
<div className="create-post-desc">
|
|
||||||
<h2>Description*</h2>
|
|
||||||
<textarea className="create-post-description" value={description} onChange={handleChange} required></textarea>
|
|
||||||
</div>
|
|
||||||
<Box
|
|
||||||
className="strip"
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
gap: 1,
|
|
||||||
py: 1,
|
|
||||||
overflowX: 'auto',
|
|
||||||
overflowY: 'hidden',
|
|
||||||
width: '100%',
|
|
||||||
maxWidth: { xs: '90vw', sm: '600px' },
|
|
||||||
mx: 'auto',
|
|
||||||
scrollSnapType: 'x mandatory',
|
|
||||||
'& > *': { scrollSnapAlign: 'center' },
|
|
||||||
'::-webkit-scrollbar': { display: 'none' },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* Upload card */}
|
|
||||||
<Card
|
|
||||||
key="add"
|
|
||||||
variant="outlined"
|
|
||||||
sx={{
|
|
||||||
minWidth: 60,
|
|
||||||
width: 60,
|
|
||||||
height: 60,
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<label style={{ cursor: 'pointer', width: '100%', height: '100%' }}>
|
|
||||||
<img src="/assets/icons/add-plus.svg" alt="Upload" style={{ width: '100%', height: '100%' }}/>
|
|
||||||
<input
|
|
||||||
id="create-file-upload"
|
|
||||||
type="file"
|
|
||||||
accept="image/*"
|
|
||||||
multiple
|
|
||||||
onChange={handleImageUpload}
|
|
||||||
style={{ display: 'none' }}
|
|
||||||
ref={inputFile}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Image cards */}
|
const files = fileList ? [...fileList] : [];
|
||||||
{data.map((item, idx) => (
|
|
||||||
<Card
|
|
||||||
key={`${item.title}-${idx}`}
|
|
||||||
variant="outlined"
|
|
||||||
sx={{
|
|
||||||
position: 'relative',
|
|
||||||
minWidth: 60,
|
|
||||||
width: 60,
|
|
||||||
height: 60,
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
|
||||||
onClick={() => setSelectedImage(item.src)}
|
|
||||||
>
|
|
||||||
{/* Delete button */}
|
|
||||||
<IconButton
|
|
||||||
size="small"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
handleDelete(idx);
|
|
||||||
}}
|
|
||||||
sx={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 2,
|
|
||||||
right: 2,
|
|
||||||
backgroundColor: 'background.paper',
|
|
||||||
zIndex: 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CloseIcon fontSize="small" />
|
|
||||||
</IconButton>
|
|
||||||
|
|
||||||
<CardActionArea sx={{ width: '100%', height: '100%' }}>
|
return (
|
||||||
<CardMedia
|
<ThemeProvider theme={theme}>
|
||||||
component="img"
|
<div className="create-display">
|
||||||
image={item.src}
|
<div className="create-part">
|
||||||
alt={item.title}
|
<form onSubmit={onSubmit}>
|
||||||
sx={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
<h1>Create Post</h1>
|
||||||
/>
|
<div className="create-layout">
|
||||||
</CardActionArea>
|
<div className="create-preview">
|
||||||
</Card>
|
{selectedImage ? (
|
||||||
))}
|
<img
|
||||||
</Box>
|
src={selectedImage}
|
||||||
|
className="create-post-image"
|
||||||
|
alt="Add an Image"
|
||||||
|
></img>
|
||||||
|
) : (
|
||||||
|
<label
|
||||||
|
className="create-post-img-layer"
|
||||||
|
onClick={onEmptyImgClick}
|
||||||
|
>
|
||||||
|
<strong>Add Picture</strong>
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="create-post-desc">
|
||||||
|
<h2>Description*</h2>
|
||||||
|
<textarea
|
||||||
|
className="create-post-description"
|
||||||
|
value={description}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
<Box
|
||||||
|
className="strip"
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
gap: 1,
|
||||||
|
py: 1,
|
||||||
|
overflowX: "auto",
|
||||||
|
overflowY: "hidden",
|
||||||
|
width: "100%",
|
||||||
|
maxWidth: { xs: "90vw", sm: "600px" },
|
||||||
|
mx: "auto",
|
||||||
|
scrollSnapType: "x mandatory",
|
||||||
|
"& > *": { scrollSnapAlign: "center" },
|
||||||
|
"::-webkit-scrollbar": { display: "none" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Upload card */}
|
||||||
|
<Card
|
||||||
|
key="add"
|
||||||
|
variant="outlined"
|
||||||
|
sx={{
|
||||||
|
minWidth: 60,
|
||||||
|
width: 60,
|
||||||
|
height: 60,
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
flexShrink: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
style={{ cursor: "pointer", width: "100%", height: "100%" }}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/assets/icons/add-plus.svg"
|
||||||
|
alt="Upload"
|
||||||
|
style={{ width: "100%", height: "100%" }}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
id="create-file-upload"
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
multiple
|
||||||
|
onChange={handleImageUpload}
|
||||||
|
style={{ display: "none" }}
|
||||||
|
ref={inputFile}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<Autocomplete
|
{/* Image cards */}
|
||||||
className="create-tags"
|
{data.map((item, idx) => (
|
||||||
multiple
|
<Card
|
||||||
id="tags-filled"
|
key={`${item.title}-${idx}`}
|
||||||
options={options}
|
variant="outlined"
|
||||||
freeSolo
|
sx={{
|
||||||
value={tags}
|
position: "relative",
|
||||||
onChange={handleTags}
|
minWidth: 60,
|
||||||
sx={{ width: "100%" }}
|
width: 60,
|
||||||
renderValue={(value: readonly string[], getItemProps) =>
|
height: 60,
|
||||||
value.map((tags: string, index: number) => {
|
flexShrink: 0,
|
||||||
const { key, ...itemProps } = getItemProps({ index });
|
}}
|
||||||
return (
|
onClick={() => setSelectedImage(item.src)}
|
||||||
<Chip variant="outlined" label={tags} key={key} {...itemProps} />
|
>
|
||||||
);
|
{/* Delete button */}
|
||||||
})
|
<IconButton
|
||||||
}
|
size="small"
|
||||||
renderInput={(params) => (
|
onClick={(e) => {
|
||||||
<TextField
|
e.stopPropagation();
|
||||||
{...params}
|
handleDelete(idx);
|
||||||
variant="outlined"
|
}}
|
||||||
color='primary'
|
sx={{
|
||||||
label="Tags"
|
position: "absolute",
|
||||||
placeholder="Add Tags"
|
top: 2,
|
||||||
/>
|
right: 2,
|
||||||
)}
|
backgroundColor: "background.paper",
|
||||||
/>
|
zIndex: 1,
|
||||||
<div className="create-buttons">
|
}}
|
||||||
<ButtonPrimary style="secondary" label="Cancel" type="button" onClick={onCancel} ></ButtonPrimary>
|
>
|
||||||
<ButtonPrimary style="primary" label="Post" type="submit" ></ButtonPrimary>
|
<CloseIcon fontSize="small" />
|
||||||
</div>
|
</IconButton>
|
||||||
</div>
|
|
||||||
</form>
|
<CardActionArea sx={{ width: "100%", height: "100%" }}>
|
||||||
</div>
|
<CardMedia
|
||||||
</div>
|
component="img"
|
||||||
</ThemeProvider>
|
image={item.src}
|
||||||
);
|
alt={item.title}
|
||||||
|
sx={{
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
objectFit: "cover",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</CardActionArea>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Autocomplete
|
||||||
|
className="create-tags"
|
||||||
|
multiple
|
||||||
|
id="tags-filled"
|
||||||
|
options={options}
|
||||||
|
freeSolo
|
||||||
|
value={tags}
|
||||||
|
onChange={handleTags}
|
||||||
|
sx={{ width: "100%" }}
|
||||||
|
renderValue={(value: readonly string[], getItemProps) =>
|
||||||
|
value.map((tags: string, index: number) => {
|
||||||
|
const { key, ...itemProps } = getItemProps({ index });
|
||||||
|
return (
|
||||||
|
<Chip
|
||||||
|
variant="outlined"
|
||||||
|
label={tags}
|
||||||
|
key={key}
|
||||||
|
{...itemProps}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
renderInput={(params) => (
|
||||||
|
<TextField
|
||||||
|
{...params}
|
||||||
|
variant="outlined"
|
||||||
|
color="primary"
|
||||||
|
label="Tags"
|
||||||
|
placeholder="Add Tags"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="create-buttons">
|
||||||
|
<ButtonPrimary
|
||||||
|
style="secondary"
|
||||||
|
label="Cancel"
|
||||||
|
type="button"
|
||||||
|
onClick={onCancel}
|
||||||
|
></ButtonPrimary>
|
||||||
|
<ButtonPrimary
|
||||||
|
style="primary"
|
||||||
|
label="Post"
|
||||||
|
type="submit"
|
||||||
|
></ButtonPrimary>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
export default PostCreation;
|
export default PostCreation;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue