Post window

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"

frontend/src/home_components/MakePostButton.jsx

@@ -1,106 +1,154 @@
-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 (
     <Box>
       {/* Toggle Button */}
-      <Button colorScheme="blue" onClick={() => setShowCreatePost(!showCreatePost)}>
-        {showCreatePost ? 'Cancel' : '📃 New Post'}
+      <Button
+        colorScheme="blue"
+        onClick={() => setShowCreatePost(!showCreatePost)}
+      >
+        {showCreatePost ? "Cancel" : "📃 New Post"}
       </Button>
 
-      {/* Post Creation Form */}
       {showCreatePost && (
-        <Box p={4} mt={4} border="1px solid" borderColor="gray.300" borderRadius="md" bg="gray.50">
+        <Box
+          p={4}
+          mt={4}
+          border="1px solid"
+          borderColor="gray.300"
+          borderRadius="md"
+          bg="gray.50"
+        >
           <Input
             placeholder="Topic Title*"
             value={title}
             onChange={(e) => setTitle(e.target.value)}
+            variant="outline"
+            size="md"
             mb={4}
           />
           <Textarea
             placeholder="Description"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
             mb={4}
+            variant="outline"
+            size="md"
           />
 
-          {/*Select */}
-          <SelectRoot
-            collection={options}
-            value={selectedOption}
-            onValueChange={(value) => setSelectedOption(value)}
-            size="sm"
-            width="100%"
-            mb={4}
-          >
-            <SelectTrigger>
-              <SelectValueText placeholder="Related course" />
-            </SelectTrigger>
-            <SelectContent>
-              {options.items.map((item) => (
-                <SelectItem item={item} key={item.value}>
-                  {item.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </SelectRoot>
-
+          {/* Course Select */}
+          <Select
+            options={courseOptions}
+            value={courseOptions.find((option) => option.value === selectedOption)}
+            onChange={(selected) => setSelectedOption(selected.value)}
+            placeholder="Select Related Course"
+            variant="outline"
+            size="md"
+            isClearable
+            styles={{
+              container: (provided) => ({
+                ...provided,
+                marginBottom: "16px",
+              }),
+            }}
+          />
 
-          <Button 
-          colorScheme="teal" 
-          gap ="100"
+          {/* Tag Multi-Select */}
+          <Select
+            options={tagOptions}
+            value={tags}
+            onChange={(selected) => setTags(selected || [])} // Handle deselection
+            placeholder="Search or Select Tags"
+            variant="outline"
+            size="md"
+            isMulti
+            styles={{
+              container: (provided) => ({
+                ...provided,
+                marginBottom: "16px",
+              }),
+            }}
+
+          />
 
-          onClick={handleCreatePost}>
+          <Button colorScheme="teal" onClick={handleCreatePost}>
             Post Your Question or Note!
           </Button>
         </Box>
       )}
     </Box>
-  );
-};
+  )
+}
 
-export default MakePostButton;
+export default MakePostButton