diff --git a/code/frontend/src/pages/PostCreation.tsx b/code/frontend/src/pages/PostCreation.tsx index 799238a..6fd32cb 100644 --- a/code/frontend/src/pages/PostCreation.tsx +++ b/code/frontend/src/pages/PostCreation.tsx @@ -1,6 +1,6 @@ import "./postCreation.css"; import "./loginAndSignUpPage.css"; -import { useState, ChangeEvent } from 'react'; +import { useState, useEffect } from 'react'; import { useNavigate } from "react-router-dom"; import Chip from '@mui/material/Chip'; import Autocomplete from '@mui/material/Autocomplete'; @@ -29,25 +29,13 @@ import CloseIcon from '@mui/icons-material/Close'; function PostCreation(){ const {user} = useAuth(); - const startTags = [ - { title: 'Bird' }, - { title: 'Birds'}, - { title: 'Feather'}, - { title: 'Bird Feather'}, - { title: 'Feathers'}, - { title: 'Featherfeed'} - ]; - interface ImageItem { src: string; title: string; } - - const initialOptions = startTags.map((option) => option.title); - - const [options, setOptions] = useState(initialOptions); - const [tags, setTags] = useState([initialOptions[1]]); + const [options, setOptions] = useState([]); + const [tags, setTags] = useState([]); const [description, setDescription] = useState(""); const [selectedImage, setSelectedImage] = useState(); @@ -56,6 +44,19 @@ function PostCreation(){ const [fileList,setFileList] = useState(null); + useEffect(() => { + let cancelled = false; + (async () => { + try { + const res = await api.get("/posts/tags"); // GET /api/posts/tags + if (!cancelled) setOptions(res.data); + } catch (err) { + console.log(err); + } + })(); + return () => { cancelled = true; }; + }, []); + const handleChange = (event: React.ChangeEvent) => { setDescription(event.target.value); }; @@ -114,7 +115,6 @@ function PostCreation(){ } catch (error:any) { console.log(error); } - }; const onCancel= () => { navigate("/profile") @@ -128,6 +128,7 @@ function PostCreation(){

Create Post

+
OP {user?.username} @@ -230,16 +231,15 @@ function PostCreation(){ multiple id="tags-filled" options={options} - defaultValue={[startTags[1].title]} freeSolo value={tags} onChange={handleTags} sx={{ width: "90vw" }} renderValue={(value: readonly string[], getItemProps) => - value.map((option: string, index: number) => { + value.map((tags: string, index: number) => { const { key, ...itemProps } = getItemProps({ index }); return ( - + ); }) } @@ -258,6 +258,7 @@ function PostCreation(){
+
diff --git a/code/frontend/src/pages/postCreation.css b/code/frontend/src/pages/postCreation.css index 330cdb7..5540a9a 100644 --- a/code/frontend/src/pages/postCreation.css +++ b/code/frontend/src/pages/postCreation.css @@ -21,7 +21,10 @@ border-left: 4px solid var(--Rotkehlchen-gray-hover); background: #FFF; } - +.create-layout{ + display: grid; + grid-template-columns: auto auto auto; +} .create-account{ display: flex; flex-direction: row;