diff --git a/backend/yarn.lock b/backend/yarn.lock index 3561719..7d6c4dd 100644 --- a/backend/yarn.lock +++ b/backend/yarn.lock @@ -537,6 +537,11 @@ fs.realpath@^1.0.0: resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== +fsevents@~2.3.2: + version "2.3.3" + resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz" + integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== + function-bind@^1.1.2: version "1.1.2" resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz" diff --git a/frontend/src/home_components/MakePostButton.jsx b/frontend/src/home_components/MakePostButton.jsx index e0b2769..ea3d9ac 100644 --- a/frontend/src/home_components/MakePostButton.jsx +++ b/frontend/src/home_components/MakePostButton.jsx @@ -1,64 +1,101 @@ -import React, { useState } from 'react'; -import { Box, Button, Input, Textarea, createListCollection} from '@chakra-ui/react'; + +import React, { useState } from "react" import { - SelectContent, - SelectItem, - SelectLabel, - SelectRoot, - SelectTrigger, - SelectValueText, -} from "../components/ui/select" -import axios from 'axios'; + Box, + Button, + Input, + Textarea, +} from "@chakra-ui/react" +import Select from "react-select" // Import react-select +import axios from "axios" const MakePostButton = ({ setPosts, courses }) => { - const [showCreatePost, setShowCreatePost] = useState(false); - const [title, setTitle] = useState(''); - const [description, setDescription] = useState(''); - const [tags, setTags] = useState([]); - const [tagInput, setTagInput] = useState(''); + const [showCreatePost, setShowCreatePost] = useState(false) + const [title, setTitle] = useState("") + const [description, setDescription] = useState("") + const [selectedOption, setSelectedOption] = useState("") // Track selected course + const [tags, setTags] = useState([]) // Track selected tags + const courseOptions = courses.map((course) => ({ + label: course, + value: course, + })) - const [selectedOption, setSelectedOption] = useState("") // Track selected option - const options = createListCollection({ - items: courses.map(course => ({ label: course, value: course })), // Line 18 - }); + const tagOptions = [ + { label: "Group Study", value: "group_study" }, + { label: "One-on-One", value: "one_on_one" }, + { label: "Online", value: "online" }, + { label: "In-Person", value: "in_person" }, + { label: "Study Over Coffee", value: "study_over_coffee" }, + { label: "Study in Library", value: "study_in_library" }, + { label: "Study at Home", value: "study_at_home" }, + { label: "Morning Study", value: "morning_study" }, + { label: "Afternoon Study", value: "afternoon_study" }, + { label: "Evening Study", value: "evening_study" }, + { label: "Late Night Study", value: "late_night_study" }, + { label: "Weekend Study", value: "weekend_study" }, + { label: "Exam Prep", value: "exam_prep" }, + { label: "Homework Help", value: "homework_help" }, + { label: "Research Paper Writing", value: "research_paper_writing" }, + { label: "Project Collaboration", value: "project_collaboration" }, + { label: "Study for Quizzes", value: "study_for_quizzes" }, + { label: "Assignment Help", value: "assignment_help" }, + { label: "Discussion & Debates", value: "discussion_debates" }, + { label: "Quiet Space", value: "quiet_space" }, + { label: "Music-Friendly", value: "music_friendly" }, + { label: "Coffee Shop", value: "coffee_shop" }, + { label: "Library", value: "library" }, + { label: "Outdoors", value: "outdoors" }, + { label: "Co-Working Space", value: "co_working_space" }, + { label: "At-Home Study", value: "at_home_study" }, + ] + const handleCreatePost = async () => { try { - const response = await axios.post('http://localhost:5000/api/posts', { + const response = await axios.post("http://localhost:5000/api/posts", { title, description, - tags, - }); - - // Update the posts in HomePage - setPosts((prevPosts) => [response.data, ...prevPosts]); + course: selectedOption, + tags: tags.map((tag) => tag.value), // Send tag values + }) - // Clear the form and hide the creation area - setTitle(''); - setDescription(''); - setTags([]); - setTagInput(''); - setShowCreatePost(false); + setPosts((prevPosts) => [response.data, ...prevPosts]) + setTitle("") + setDescription("") + setTags([]) + setSelectedOption("") + setShowCreatePost(false) } catch (error) { - console.error("Error creating post:", error); + console.error("Error creating post:", error) } - }; + } return ( {/* Toggle Button */} - - {/* Post Creation Form */} {showCreatePost && ( - + setTitle(e.target.value)} + variant="outline" + size="md" mb={4} />