Feature/111 edit story

backend/frontend/src/components/header/header.js

@@ -6,6 +6,7 @@ import UserSearch from './UserSearch';
 import Register from '../../pages/landing/Register';
 import Login from '../../pages/landing/Login';
 import CreateStory from '../../pages/story/CreateStory';
+import EditStory from '../../pages/story/EditStory';
 import StoryContainer from '../../pages/homepage/StoryContainer';
 import StoryDetails from '../../pages/story/StoryDetails';
 import LogoutButton from '../../pages/landing/Logout';
@@ -114,6 +115,7 @@ function Header() {
             <Route path="/SearchUserResults/:searchQuery" element={<SearchUserResults />} />
             <Route path="/story_search" element={<StorySearch />} />
             <Route path="/timeline/:locationJSON" element={<LocationSearch />} />
+            <Route path="/edit-story/:storyId" element={<EditStory />} />
             <Route path="/activity-stream" element={<ActivityStream />} />
             <Route path="/recommendation" element={<Recommendations />} />
             </>

backend/frontend/src/pages/story/CreateStory.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import withAuth from '../../authCheck';
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
@@ -12,9 +12,18 @@ import StoryMap from './StoryMap';
 import TagSearch from './TagSearch'; // Adjust the path as needed
 import Chip from '@mui/material/Chip';
 
+let postHeader = null;
 
 function CreateStory() {
 
+  const { storyId } = useParams(); // Get story ID from URL
+  const isEditMode = storyId != null;
+  if (isEditMode) {
+    postHeader = 'Edit Memory';
+  } else {
+    postHeader = 'Create New Memory';
+  }
+
   const [title, setTitle] = useState('');
   const [content, setContent] = useState('');
   const [story_tags, setStoryTags] = useState('');
@@ -35,6 +44,50 @@ function CreateStory() {
 
   const [selectedTags, setSelectedTags] = useState([]);
 
+  useEffect(() => {
+    if (isEditMode) {
+      axios.get(`http://${process.env.REACT_APP_BACKEND_HOST_NAME}:8000/user/storyGet/${storyId}`, { withCredentials: true })
+        .then(response => {
+          const storyInfo = response.data;
+          console.log('Fetched story data:', storyInfo); // Log to verify fetched data
+
+          setTitle(storyInfo.title);
+          setContent(storyInfo.content);
+          if (storyInfo.story_tags && storyInfo.story_tags.length) {
+            // Replicate what addTag does here for each tag
+            storyInfo.story_tags.forEach(tag => {
+              // Assuming addTag adds the tag to selectedTags and story_tags
+              setSelectedTags(prevTags => [...prevTags, tag]);
+              setStoryTags(prevStoryTags => [...prevStoryTags, tag]); // If story_tags is an array of tag objects
+            });
+          }
+          if (storyInfo.location_ids && storyInfo.location_ids.length) {
+            setLocations(storyInfo.location_ids.map(location => ({ ...location, id: location.id.toString() })));
+          }
+          setDateType(storyInfo.date_type);
+          switch(storyInfo.date_type) {
+            case 'year':
+              setYear(storyInfo.year);
+              setSeasonName(storyInfo.season_name);
+              break;
+            case 'year_interval':
+              setStartYear(storyInfo.start_year);
+              setEndYear(storyInfo.end_year);
+              break;
+            }
+          setDate(storyInfo.date);
+          setStartDate(storyInfo.start_date);
+          setEndDate(storyInfo.end_date);
+          setDecade(storyInfo.decade);
+          setIncludeTime(storyInfo.include_time);
+          // ... handle other fields as needed ...
+          console.log('State after setting:', { year, season_name, start_year, end_year, date, start_date, end_date, decade, location_ids });
+
+        })
+        .catch(error => console.error('Error fetching story:', error));
+    }
+  }, [storyId, isEditMode]);
+
   const addTag = (tag) => {
     console.log("Adding Tag", tag);
     if (!selectedTags.find(t => t.wikidata_id === tag.wikidata_id)) {
@@ -133,37 +186,44 @@ function CreateStory() {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    console.log("request location",location_ids)
-    console.log("Selected Tags",selectedTags)
-    try {
-      const response = await axios.post(`http://${process.env.REACT_APP_BACKEND_HOST_NAME}:8000/user/storyCreate`, {
-        title: title,
-        content: content,
-        story_tags: story_tags,
-        location_ids: location_ids,
-        date_type: date_type,
-        season_name: season_name,
-        start_year: start_year,
-        end_year: end_year,
-        year: year,
-        date: date,
-        start_date: start_date,
-        end_date: end_date,
-        decade: decade,
-        include_time: include_time
-      }, { withCredentials: true });
-      console.log(response.data);
+    const storyData = {
+      title: title,
+      content: content,
+      story_tags: story_tags,
+      location_ids: location_ids,
+      date_type: date_type,
+      season_name: season_name,
+      start_year: start_year,
+      end_year: end_year,
+      year: year,
+      date: date,
+      start_date: start_date,
+      end_date: end_date,
+      decade: decade,
+      include_time: include_time
+    };
 
-      navigate(`/story/${response.data.id}`);
+    try {
+      let response;
+      if (isEditMode) {
+        // Update existing story
+        response = await axios.put(`http://${process.env.REACT_APP_BACKEND_HOST_NAME}:8000/user/storyUpdate/${storyId}`, storyData, { withCredentials: true });
+        navigate(`/story/${storyId}`);
+      } else {
+        // Create new story
+        response = await axios.post(`http://${process.env.REACT_APP_BACKEND_HOST_NAME}:8000/user/storyCreate`, storyData, { withCredentials: true });
+        navigate(`/story/${response.data.id}`);
+      }
 
     } catch (error) {
-      console.log(error);
+      console.error('Error submitting story:', error);
     }
   };
 
+
   return (
     <div>
-      <h1 className="big-heading">Create New Memory</h1>
+      <h1 className="big-heading">{postHeader}</h1>
       <div className='create-story-container'>
       <div className="create-story-content">
         <div className="formBackground">
@@ -237,6 +297,7 @@ function CreateStory() {
                 label="Year"
                 variant="outlined"
                 type="text"
+                value={year || ''} // Bind value to the state variable
                 onChange={(e) => setYear(e.target.value)}
               />
               <FormControl variant="outlined">
@@ -388,7 +449,7 @@ function CreateStory() {
                 />
           </div>
           <br/>
-          <Button style={{borderRadius: 10, backgroundColor: "#7E49FF", padding: "12px 28px", fontSize: "24px"}} variant="contained" onClick={handleSubmit} className="btn btn-primary middle">Post</Button>
+          <Button style={{borderRadius: 10, backgroundColor: "#7E49FF", padding: "12px 28px", fontSize: "24px"}} variant="contained" onClick={handleSubmit} className="btn btn-primary middle">{postHeader}</Button>
           <br/>
           <br/>
           <text>You can edit your memory as many times as you want after posting.</text>