Merge pull request #375 from SWE574-Fall2023-Group1/dev

Dev->Main #285 #336 #295
SWE574-Fall2023-Group1 · Jan 3, 2024 · faaa58f · faaa58f
2 parents 61658ad + 49ca8a0
commit faaa58f
Show file tree

Hide file tree

Showing 12 changed files with 222 additions and 46 deletions.
diff --git a/Documents/swe574-Final_Project_Report.pdf b/Documents/swe574-Final_Project_Report.pdf
diff --git a/README.md b/README.md
@@ -19,6 +19,10 @@ For further information and documentation, check our [wiki](https://github.com/S
 
 Project URL: [Memories Website](http://34.66.132.236:3000/)
 
+### Video Demonstration
+
+Videos demonstrating the web and mobile app can be found on [YouTube](https://www.youtube.com/playlist?list=PLFAyGH65Rf12B6hPViqXUkUl65kThbaEs).
+
 ---
 
 [![pre-commit.ci status](https://results.pre-commit.ci/badge/github/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/main.svg)](https://results.pre-commit.ci/latest/github/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/main)
diff --git a/backend/frontend/src/pages/landing/Login.js b/backend/frontend/src/pages/landing/Login.js
@@ -54,17 +54,17 @@ function Login({ onLoginSuccess }) {
   };
 
   return (
-    <div className="container" style={{display: "flex", "flex-direction": "column", "justify-content": "center", "align-items": "center", "text-align": "center", margin: "auto"}}>
+    <div className="container" style={{display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center", margin: "auto"}}>
       {/* <form onSubmit={handleSubmit}> */}
-      <div style={{display: "flex", "flex-direction": "column", "justify-content": "center", "align-items": "center", "text-align": "center", margin: "auto", width: '100%', height: '100%', "flex-wrap": "wrap"}}>
+      <div style={{display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center", margin: "auto", width: '100%', height: '100%', flexWrap: "wrap"}}>
       <div style={{height: "2em"}}></div>
-        <div style={{display: "flex", "flex-direction": "column", "justify-content": "center", "align-items": "center", "text-align": "center", margin: "auto", background: 'white', borderRadius: 40, "flex-wrap": "wrap", overflow: "auto", "min-width": "80%"}}>
+        <div style={{display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center", margin: "auto", background: 'white', borderRadius: 40, flexWrap: "wrap", overflow: "auto", minWidth: "80%"}}>
         <div style={{height: "2em"}}></div>
-        <img style={{display: "flex", "flex-direction": "column", "justify-content": "center", "align-items": "center", "text-align": "center", width: 449}} src={mainPhoto} />
+        <img style={{display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center", width: 449}} src={mainPhoto} />
             <h2>Every Memory Counts:</h2>
             <h3>Write, Share, Relive.</h3>
                  {/* <button type="submit" className="btn btn-primary">Login</button> */}
-              <div style={{display: "flex", "flex-direction": "column", "justify-content": "center", "align-items": "center", "text-align": "center", width: 473, height: 59, background: 'white', borderRadius: 8, padding: 8 }}>
+              <div style={{display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center", width: 473, height: 59, background: 'white', borderRadius: 8, padding: 8 }}>
                 {/* <label>Username:</label>
                   <input type="text" className="form-control" onChange={(e) => setUsername(e.target.value)} /> */}
                 <TextField
@@ -85,7 +85,7 @@ function Login({ onLoginSuccess }) {
                     }}
                 />
             </div>
-            <div style={{display: "flex", "flex-direction": "column", "justify-content": "center", "align-items": "center", "text-align": "center", margin: "auto", width: 473, height: 59,background: 'white', borderRadius: 8, padding: 8}}>
+            <div style={{display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center", margin: "auto", width: 473, height: 59,background: 'white', borderRadius: 8, padding: 8}}>
                     <TextField
                             id="login-password"
                             label="Password"

diff --git a/backend/frontend/src/pages/landing/Register.js b/backend/frontend/src/pages/landing/Register.js
@@ -57,15 +57,15 @@ function Register() {
   };
 
   return (
-    <div className="container" style={{display: "flex", "flex-direction": "column", "justify-content": "center", "align-items": "center", "text-align": "center", margin: "auto"}}>
+    <div className="container" style={{display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center", margin: "auto"}}>
       {/* <form onSubmit={handleSubmit}> */}
-      <div style={{display: "flex", "flex-direction": "column", "justify-content": "center", "align-items": "center", "text-align": "center", margin: "auto", width: '100%', height: '100%', "flex-wrap": "wrap"}}>
+      <div style={{display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center", margin: "auto", width: '100%', height: '100%', flexWrap: "wrap"}}>
         <div style={{height: "2em"}}></div>
-        <div style={{display: "flex", "flex-direction": "column", "justify-content": "center", "align-items": "center", "text-align": "center", margin: "auto", background: 'white', borderRadius: 40, "flex-wrap": "wrap", overflow: "auto", "min-width": "80%"}}>
+        <div style={{display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center", margin: "auto", background: 'white', borderRadius: 40, flexWrap: "wrap", overflow: "auto", minWidth: "80%"}}>
         <div style={{height: "2em"}}></div>
-        <img style={{width: 449, display: "flex", "flex-direction": "column", "justify-content": "center", "align-items": "center", "text-align": "center"}} src={mainPhoto} />
+        <img style={{width: 449, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center"}} src={mainPhoto} />
         <div style={{height: "2em"}}></div>
-            <div style={{width: 339, height: 53, color: '#2C2A2A', fontSize: 30, fontFamily: "'Josefin Sans', sans-serif", fontWeight: '700', wordWrap: 'break-word', display: "flex", "flex-direction": "column", "justify-content": "center", "align-items": "center", "text-align": "center"}}>Register</div>
+            <div style={{width: 339, height: 53, color: '#2C2A2A', fontSize: 30, fontFamily: "'Josefin Sans', sans-serif", fontWeight: '700', wordWrap: 'break-word', display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center"}}>Register</div>
             <div style={{height: "2em"}}></div>
             <div style={{ width: 473, height: 59, background: 'white', borderRadius: 8, padding: 8}}>
                 <TextField
@@ -166,10 +166,10 @@ function Register() {
                     borderRadius: 8,
                     gap: 10,
                     display: "flex",
-                    "flex-direction": "column",
-                    "justify-content": "center",
-                    "align-items": "center",
-                    "text-align": "center",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    textAlign: "center",
                     cursor: 'pointer', // Add this to make it look clickable
                     fontSize: 16,
                     fontFamily: "'Josefin Sans', sans-serif",

diff --git a/backend/frontend/src/pages/profile/UserProfile.js b/backend/frontend/src/pages/profile/UserProfile.js
@@ -223,7 +223,7 @@ const capitalizeFirstLetter = (str) => {
             className="profile-photo-add-button"
             onClick={() => document.getElementById('profile-photo-input').click()}
           >
-            <img src={addnewphoto} alt="Add New Photo Icon" />
+            <img style={{marginRight: "3px"}} src={addnewphoto} alt="Add New Photo Icon" />
             Add photo
           </button>
         )}

diff --git a/backend/frontend/src/pages/search/StorySearch.js b/backend/frontend/src/pages/search/StorySearch.js
@@ -386,17 +386,17 @@ const StorySearch = ({ currentTheme }) => {
     <h1 style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000', fontFamily: "'Josefin Sans', sans-serif" }}>Advanced Search</h1>
     <div style={{
       "display": "flex",
-      "flex-wrap": "wrap",
-      "justify-content": "space-around",
-      "align-items": "flex-start",
+      flexWrap: "wrap",
+      justifyContent: "space-around",
+      alignItems: "flex-start",
     }}>
       <div style={{
         width: "40%",
-        "background-color": "rgba(0, 0, 0, 0.2)",
+        backgroundColor: "rgba(0, 0, 0, 0.2)",
         "padding": "1rem",
-        "justify-content": "center",
-        "align-items": "center",
-        "border-radius": "10px",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: "10px",
       }}>
 
       <form onSubmit={handleSearch}>
@@ -406,7 +406,7 @@ const StorySearch = ({ currentTheme }) => {
               placeholder="Title"
               className='long-boxes-search'
               label="Search by Title"
-              style={{"width":"70%", "border-radius":"20px", "background-color":"rgb(240, 240, 240)"}}
+              style={{width:"70%", borderRadius:"20px", backgroundColor:"rgb(240, 240, 240)"}}
               value={titleSearch}
               onChange={(e) => setTitleSearch(e.target.value)}
             />
@@ -417,7 +417,7 @@ const StorySearch = ({ currentTheme }) => {
               placeholder="Author"
               className='long-boxes-search'
               label="Search by Author"
-              style={{"width":"70%", "border-radius":"20px", "background-color":"rgb(240, 240, 240)"}}
+              style={{width:"70%", borderRadius:"20px", backgroundColor:"rgb(240, 240, 240)"}}
               value={authorSearch}
               onChange={(e) => setAuthorSearch(e.target.value)}
             />
@@ -431,7 +431,7 @@ const StorySearch = ({ currentTheme }) => {
                   <TextField {...params}
                   label="Search Tags"
                   variant="outlined"
-                  style={{"width":"70%", "border-radius":"20px", "background-color":"rgb(240, 240, 240)"}}
+                  style={{width:"70%", borderRadius:"20px", backgroundColor:"rgb(240, 240, 240)"}}
                   />
                 )}
                 onInputChange={handleTagSearchChange}
@@ -453,7 +453,7 @@ const StorySearch = ({ currentTheme }) => {
                 placeholder="Tag Label"
                 className='long-boxes-search'
                 label="Search by Tag Label"
-                style={{"width":"70%", "border-radius":"20px", "background-color":"rgb(240, 240, 240)"}}
+                style={{width:"70%", borderRadius:"20px", backgroundColor:"rgb(240, 240, 240)"}}
                 value={tagLabelSearch}
                 onChange={(e) => setTagLabelSearch(e.target.value)}
               />
@@ -465,7 +465,7 @@ const StorySearch = ({ currentTheme }) => {
                   placeholder="Date Type"
                   id="date-type-search"
                   className='date-box-search'
-                  style={{"border-radius":"20px", "background-color":"rgb(240, 240, 240)"}}
+                  style={{borderRadius:"20px", backgroundColor:"rgb(240, 240, 240)"}}
                   value={timeType}
                   onChange={(e) => setTimeType(e.target.value)}
                   label="Date Type"
@@ -495,7 +495,7 @@ const StorySearch = ({ currentTheme }) => {
               className='date-box-search'
               type="search"
               label="Location"
-              style={{"width":"70%", "border-radius":"20px", "background-color":"rgb(240, 240, 240)"}}
+              style={{width:"70%", borderRadius:"20px", backgroundColor:"rgb(240, 240, 240)"}}
               variant="outlined"
             />
 
@@ -520,8 +520,8 @@ const StorySearch = ({ currentTheme }) => {
             mapContainerStyle={{
               width: '100%',
               height: '400px',
-              "border-radius": '10px',
-              "border-style": "solid"
+              borderRadius: '10px',
+              borderStyle: "solid"
             }}
             zoom={2}
             center={markerPosition}
@@ -562,7 +562,7 @@ const StorySearch = ({ currentTheme }) => {
       </div>
       {stories.length > 0 && (
         <>
-          <div style={{"background-color":"rgba(0, 0, 0, 0.2)", "padding":"10px", "border-radius":"10px", width:"40%"}}>
+          <div style={{backgroundColor:"rgba(0, 0, 0, 0.2)", padding:"10px", borderRadius:"10px", width:"40%"}}>
             <h3>Search Results</h3>
             {stories.map(story => (
               <div key={story.id} className="story-box-search">

diff --git a/backend/frontend/src/pages/search/Timeline.js b/backend/frontend/src/pages/search/Timeline.js
@@ -113,7 +113,7 @@ const LocationSearch = ({ currentTheme }) => {
         <input type="checkbox" checked={!isDescOrder} onChange={toggleOrder} />
         <span className="slider round"></span>
       </label>
-      <span style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000', marginLeft: '10px', "vertical-align": "sub"}}>
+      <span style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000', marginLeft: '10px', verticalAlign: "sub"}}>
         {isDescOrder ? 'Descending Order' : 'Ascending Order'}
       </span>
       <div className="timeline">

diff --git a/backend/frontend/src/pages/story/CreateStory.js b/backend/frontend/src/pages/story/CreateStory.js
@@ -11,9 +11,10 @@ import Quill from 'quill'
 import StoryMap from './StoryMap';
 import TagSearch from './TagSearch'; // Adjust the path as needed
 import Chip from '@mui/material/Chip';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import { format, parseISO } from 'date-fns';
 
-
 let postHeader = null;
 
 function CreateStory({ currentTheme }) {
@@ -235,6 +236,7 @@ function CreateStory({ currentTheme }) {
 
     } catch (error) {
       console.error('Error submitting story:', error);
+      toast.error('Please fill all fields correctly');
     }
   };
 
@@ -276,11 +278,11 @@ function CreateStory({ currentTheme }) {
             <br/>
             <br/>
             <div className='tags-bar' id="tags-bar">
-              <TagSearch style={{"background-color": "rgb(240, 240, 240)"}} onTagSelect={addTag} />
+              <TagSearch style={{backgroundColor: "rgb(240, 240, 240)"}} onTagSelect={addTag} />
               <div>
                 {selectedTags.map((tag, index) => (
                   <Chip
-                    style={{margin: "1px", "background-color": "rgb(240, 240, 240)"}}
+                    style={{margin: "1px", backgroundColor: "rgb(240, 240, 240)"}}
                     key={index}
                     label={tag.label}
                     onDelete={() => removeTag(tag.wikidata_id)}
@@ -466,7 +468,7 @@ function CreateStory({ currentTheme }) {
           <div className='create-story-map'>
           <text style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}>You can add locations by using the map or typing in the search bar.</text>
             <StoryMap
-                  mapContainerStyle={{ height: '400px', width: '100%', "border-radius": '10px', "border-style": "solid" }}
+                  mapContainerStyle={{ height: '400px', width: '100%', borderRadius: '10px', borderStyle: "solid" }}
                   initialCenter={mapCenter}
                   zoom={1}
                   apiKey={googleMapsApiKey}
@@ -487,6 +489,7 @@ function CreateStory({ currentTheme }) {
           </div>
         </div>
         </div>
+        <ToastContainer position="bottom-right" autoClose={5000} />
     </div>
   );
 }

diff --git a/backend/frontend/src/pages/story/EditStory.js b/backend/frontend/src/pages/story/EditStory.js
@@ -11,6 +11,8 @@ import Quill from 'quill'
 import StoryMap from './StoryMap';
 import TagSearch from './TagSearch'; // Adjust the path as needed
 import Chip from '@mui/material/Chip';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import { format, parseISO } from 'date-fns';
 
 
@@ -365,6 +367,7 @@ const parseLocation = (location) => {
       navigate(`/story/${storyId}`);
     } catch (error) {
       console.error('Error submitting story:', error);
+      toast.error('Please fill all fields correctly');
     }
 };
 
@@ -405,11 +408,11 @@ const parseLocation = (location) => {
             <br/>
             <br/>
             <div className='tags-bar' id="tags-bar">
-              <TagSearch style={{"background-color": "rgb(240, 240, 240)"}} onTagSelect={addTag} />
+              <TagSearch style={{backgroundColor: "rgb(240, 240, 240)"}} onTagSelect={addTag} />
               <div>
                 {selectedTags.map((tag, index) => (
                   <Chip
-                    style={{margin: "1px", "background-color": "rgb(240, 240, 240)"}}
+                    style={{margin: "1px", backgroundColor: "rgb(240, 240, 240)"}}
                     key={index}
                     label={tag.label}
                     onDelete={() => removeTag(tag.wikidata_id)}
@@ -597,7 +600,7 @@ const parseLocation = (location) => {
           <div className='create-story-map'>
           <text style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}>You can add locations by using the map or typing in the search bar.</text>
           <StoryMap
-                    mapContainerStyle={{ height: '400px', width: '100%', "border-radius": '10px', "border-style": "solid" }}
+                    mapContainerStyle={{ height: '400px', width: '100%', borderRadius: '10px', borderStyle: "solid" }}
                     initialCenter={mapCenter}
                     zoom={1}
                     apiKey={googleMapsApiKey}
@@ -619,6 +622,7 @@ const parseLocation = (location) => {
           </div>
         </div>
         </div>
+        <ToastContainer position="bottom-right" autoClose={5000} />
     </div>
   );
 }

diff --git a/backend/frontend/src/pages/story/StoryDetails.js b/backend/frontend/src/pages/story/StoryDetails.js
@@ -422,7 +422,7 @@ useEffect(() => {
                 <>
                   <div className="storydetail-story-map">
                     <GoogleMap
-                      mapContainerStyle={{ "border-style": "solid", "border-radius": '10px', height: "400px", width: "80%", marginTop: "20px"}}
+                      mapContainerStyle={{ borderStyle: "solid", borderRadius: '10px', height: "400px", width: "80%", marginTop: "20px"}}
                       zoom={2}
                       center={{
                         lat: 0,
@@ -436,7 +436,7 @@ useEffect(() => {
                 </>
               )}
               <div className="author-date-container">
-              <div style={{ display: 'flex', "align-items": 'center'}}>
+              <div style={{ display: 'flex', alignItems: 'center'}}>
                 <Typography variant="subtitle1" style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}>Author‎  ‎</Typography>
                 <img
                   src={profilePhotoUrl}
@@ -451,7 +451,7 @@ useEffect(() => {
 
                 />
               </div>
-              <div style={{ display: 'flex', "align-items": 'center'}}>
+              <div style={{ display: 'flex', alignItems: 'center'}}>
                 <Typography variant="subtitle1" style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}>Posted On‎  ‎</Typography>
                 <Typography variant="body1" className="info-box">
                   {new Date(story.creation_date).toLocaleDateString()}
@@ -475,7 +475,7 @@ useEffect(() => {
                       onClick={() => setLiked(!liked)}
                     />
                   </Button>
-                  <Chip label={numLikes} style={{"font-size": "large", color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}/>
+                  <Chip label={numLikes} style={{fontSize: "large", color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}/>
                 </div>
               </div>
             </div>