Merge branch 'dev' into feature/285-implement-frontend-pop-up-warnings

.github/workflows/ci-backend.yml

@@ -36,7 +36,7 @@ jobs:
             docker --version
             docker-compose --version
             make env-files
-            docker compose up -d --build
+            docker compose up -d --build --quiet-pull --remove-orphans
             docker compose ps
             docker network ls
             docker compose logs db

.github/workflows/ci-frontend.yml

@@ -30,9 +30,9 @@ jobs:
             docker --version
             docker-compose --version
             make env-files
-            docker compose up -d --build
+            docker compose up -d --build --quiet-pull --remove-orphans
             docker compose ps
             docker network ls
             docker compose logs frontend
             make git-stats
-            docker compose exec -e CI=true -T frontend npm run test
+            docker compose exec -e CI=true -T frontend npm run test -- --coverage --watchAll=false

Makefile

@@ -54,7 +54,7 @@ backend-test:
 	docker compose exec -T backend python manage.py test
 
 frontend-test:
-	docker compose exec -e CI=true -T frontend npm run test
+	docker compose exec -e CI=true -T frontend npm run test -- --coverage --watchAll=false
 
 local-frontend: down
 	docker compose up db backend -d --build

README.md

@@ -7,7 +7,7 @@ This repository contains Group 1's project for SWE574 - Software Development As
 For further information and documentation, check our [wiki](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/wiki).
 
 ### Group 1 is comprised of:
-- [Ayhan Çavdar](https://github.com/ayhncvdr)
+- [Ayhan Çavdar](https://github.com/ayhncvdr2)
 - [Aykut Kantaş](https://github.com/aykutkantas)
 - [Deniz Baran Aslan](https://github.com/dbaslan)
 - [Kemal Caner Ertam](https://github.com/ckertam)

backend/Dockerfile

@@ -9,16 +9,17 @@ WORKDIR /backend
 COPY requirements.txt .
 
 RUN : \
-    && apt-get update -y \
+    && apt-get update -qqqy \
     && export DEBIAN_FRONTEND=noninteractive \
-    && apt-get install -y --no-install-recommends \
+    && apt-get install -qqqy --no-install-recommends \
         binutils libproj-dev gdal-bin \
         gcc g++ \
+        > /dev/null \
     && apt-get autoremove -y \
     && apt-get clean -y \
     && rm -rf /var/lib/apt/lists/* \
-    && python -m pip install --no-cache-dir --upgrade pip \
-    && pip install --no-cache-dir -r requirements.txt \
+    && python -m pip install --no-cache-dir -qU pip \
+    && pip install --no-cache-dir -qr requirements.txt \
     && python -m nltk.downloader punkt averaged_perceptron_tagger wordnet stopwords \
     && :
 # Install system dependencies for NLTK and GDAL in the end

backend/frontend/package.json

@@ -20,6 +20,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.3.5",
+    "date-fns": "^2.30.0",
     "dayjs": "^1.11.7",
     "google-map-react": "^2.2.0",
     "history": "^5.3.0",
@@ -70,9 +71,9 @@
     }
   },
   "devDependencies": {
-    "babel-jest": "^27.4.5",
     "@babel/core": "^7.17.0",
-    "@babel/preset-env": "^7.17.0"
+    "@babel/preset-env": "^7.17.0",
+    "babel-jest": "^27.4.5"
   },
   "presets": [
     "@babel/preset-env",

backend/frontend/src/App.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Header from './components/header/header';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
@@ -13,11 +13,21 @@ const theme = createTheme({
   },
 });
 
+const customTheme = createTheme();
+
 function App() {
+  const [currentTheme, setCurrentTheme] = useState('default'); // add a state variable for the current theme
+
+  const toggleTheme = () => {
+    setCurrentTheme(currentTheme === 'default' ? 'custom' : 'default');
+  };
 
   return (
-    <ThemeProvider theme={theme}>
-    <Header/>
+    <ThemeProvider theme={currentTheme === 'default' ? theme : customTheme}>
+      {currentTheme === 'custom' && <div style={{position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.8)', zIndex: 1}}></div>}
+      <div style={{ position: 'relative', zIndex: 2 }}> {/* this will ensure the content stays in front of the div */}
+        <Header toggleTheme={toggleTheme} currentTheme={currentTheme}/>
+      </div>
     </ThemeProvider>
   );
 }

backend/frontend/src/components/header/header.css

@@ -28,7 +28,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: #8E8A8A;;
+    /* background-color: #3a3a3a;; */
     padding: 10px;
     max-width: 100%;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

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

@@ -28,8 +28,9 @@ import LocationSearch from "../../pages/search/Timeline";
 import SearchResults from "../../pages/search/SearchResults";
 import ActivityStream from "../../pages/activity/ActivityStream";
 import Recommendations from "../../pages/recom/Recommendations";
+import Button from '@mui/material/Button'
 
-function Header() {
+function Header({ toggleTheme, currentTheme }) {
   console.log("Rendering Header");
 
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -59,7 +60,7 @@ function Header() {
   return (
     <Router>
       <div className="container">
-        <nav className="navbar" style={{justifyContent: isLoggedIn ? "space-between" : "start"}}>
+        <nav className="navbar" style={{ justifyContent: isLoggedIn ? "space-between" : "start", backgroundColor: currentTheme === 'custom' ? '#3a3a3a' : '#8E8A8A' }}>
             {!isLoggedIn && (
               <>
                 <Link to="/" className="nav-item nav-link">
@@ -71,6 +72,7 @@ function Header() {
                 <Link to="/login" className="nav-item nav-link">
                   Login
                 </Link>
+                <Button style={{ marginRight: "25px", backgroundColor: currentTheme === 'custom' ? 'orange' : 'purple', color:'#ffffff' }} onClick={toggleTheme}> {currentTheme === 'custom' ? 'Light Mode' : 'Dark Mode'} </Button>
               </>
             )}
             {isLoggedIn && (
@@ -97,6 +99,7 @@ function Header() {
                 <Link to="/recommendation" className="nav-item nav-link">
                   Recommendations
                 </Link>
+                <Button style={{ marginRight: "25px", backgroundColor: currentTheme === 'custom' ? 'orange' : 'purple', color:'#ffffff' }} onClick={toggleTheme}> {currentTheme === 'custom' ? 'Light Mode' : 'Dark Mode'} </Button>
                 <UserSearch />
                 <LogoutButton />
               </>
@@ -141,31 +144,31 @@ function Header() {
 
             {isLoggedIn && (
               <>
-                <Route path="*" element={<Navigate to="/homepage" />} />
-                <Route path="/homepage" element={<StoryContainer />} />
-                <Route path="/create-story" element={<CreateStory />} />
-                <Route path="/story/:id" element={<StoryDetails />} />
-                <Route path="/user-profile" element={<UserProfile />} />
+                <Route path="*" element={<Navigate to="/homepage" currentTheme={currentTheme}/>} />
+                <Route path="/homepage" element={<StoryContainer currentTheme={currentTheme}/>} />
+                <Route path="/create-story" element={<CreateStory currentTheme={currentTheme}/>} />
+                <Route path="/story/:id" element={<StoryDetails currentTheme={currentTheme}/>} />
+                <Route path="/user-profile" element={<UserProfile currentTheme={currentTheme}/>} />
                 <Route
                   path="/user-profile/:id"
-                  element={<UserProfileOthers />}
+                  element={<UserProfileOthers currentTheme={currentTheme}/>}
                 />
                 <Route
                   path="/SearchUserResults/:searchQuery"
-                  element={<SearchUserResults />}
+                  element={<SearchUserResults currentTheme={currentTheme}/>}
                 />
-                <Route path="/story_search" element={<StorySearch />} />
+                <Route path="/story_search" element={<StorySearch currentTheme={currentTheme}/>} />
                 <Route
                   path="/timeline"
-                  element={<LocationSearch />}
+                  element={<LocationSearch currentTheme={currentTheme}/>}
                 />
                 <Route
                   path="/search-results"
-                  element={<SearchResults />}
+                  element={<SearchResults currentTheme={currentTheme}/>}
                 />
-                <Route path="/edit-story/:storyId" element={<EditStory />} />
-                <Route path="/activity-stream" element={<ActivityStream />} />
-                <Route path="/recommendation" element={<Recommendations />} />
+                <Route path="/edit-story/:storyId" element={<EditStory currentTheme={currentTheme}/>} />
+                <Route path="/activity-stream" element={<ActivityStream currentTheme={currentTheme}/>} />
+                <Route path="/recommendation" element={<Recommendations currentTheme={currentTheme}/>} />
               </>
             )}
           </Routes>

backend/frontend/src/pages/activity/ActivityStream.js

@@ -15,7 +15,7 @@ import PersonRemoveIcon from '@mui/icons-material/PersonRemove';
 import withAuth from '../../authCheck';
 
 
-function ActivityStream() {
+function ActivityStream({ currentTheme }) {
   const [activities, setActivities] = useState([]);
   const navigate = useNavigate();
 
@@ -187,11 +187,11 @@ function ActivityStream() {
 
   return (
     <Box sx={{ m: 'auto', maxWidth: '1200px', height: '100vh', padding: '10px' }}>
-      <h1 style={{ fontFamily: "'Josefin Sans', sans-serif" }} align="center" gutterBottom>
+      <h1 style={{fontFamily: "'Josefin Sans', sans-serif", color: currentTheme === 'custom' ? '#ffffff' : '#000000' }} align="center" gutterBottom>
       Activity Stream
     </h1>
       {activities.length === 0 ? (
-        <Typography variant="subtitle1" align="center">
+        <Typography style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}variant="subtitle1" align="center">
           There is no activity.
         </Typography>
       ) : (

backend/frontend/src/pages/homepage/AllStories.js

@@ -8,7 +8,7 @@ import locationIcon from '../../assets/images/location.png'
 import dateIcon from '../../assets/images/date.png'
 
 
-function StoriesByFollowingsUsers() {
+function StoriesByFollowingsUsers({ currentTheme }) {
   const [stories, setStories] = useState([]);
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
@@ -172,9 +172,9 @@ function StoriesByFollowingsUsers() {
         ))
       )}
       <div className={styles.pagination}>
-        <Button variant="contained" onClick={() => handlePageChange(currentPage - 1)} disabled={!hasPrevPage}>
+        {(hasPrevPage) && <Button variant="contained" onClick={() => handlePageChange(currentPage - 1)} disabled={!hasPrevPage}>
           Previous
-        </Button>
+        </Button>}
         {Array.from({ length: totalPages }, (_, index) => (
           <Button variant="contained"
             key={index}
@@ -184,9 +184,9 @@ function StoriesByFollowingsUsers() {
             {index + 1}
           </Button>
         ))}
-        <Button variant="contained" onClick={() => handlePageChange(currentPage + 1)} disabled={!hasNextPage}>
+        {(hasNextPage) && <Button variant="contained" onClick={() => handlePageChange(currentPage + 1)} disabled={!hasNextPage}>
           Next
-        </Button>
+        </Button>}
       </div>
     </div>
   );

backend/frontend/src/pages/homepage/AllStories.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, waitFor, fireEvent } from '@testing-library/react';
+import axios from 'axios';
+import AllStories from './AllStories';
+import '@testing-library/jest-dom';
+import { MemoryRouter } from 'react-router-dom';
+
+jest.mock('axios');
+
+describe('AllStories component', () => {
+  test('renders loading state initially', () => {
+    const { getByText } = render(<MemoryRouter>
+        <AllStories />
+      </MemoryRouter>)
+    expect(getByText('Loading...')).toBeInTheDocument();
+  });
+});

backend/frontend/src/pages/homepage/StoriesbyFollowingUsers.js

@@ -8,7 +8,7 @@ import locationIcon from '../../assets/images/location.png'
 import dateIcon from '../../assets/images/date.png'
 
 
-function StoriesByFollowingsUsers() {
+function StoriesByFollowingsUsers({ currentTheme }) {
   const [stories, setStories] = useState([]);
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
@@ -174,9 +174,9 @@ function StoriesByFollowingsUsers() {
         ))
       )}
       <div className={styles.pagination}>
-        <Button variant="contained" onClick={() => handlePageChange(currentPage - 1)} disabled={!hasPrevPage}>
+        {(hasPrevPage) && <Button variant="contained" onClick={() => handlePageChange(currentPage - 1)} disabled={!hasPrevPage}>
           Previous
-        </Button>
+        </Button>}
         {Array.from({ length: totalPages }, (_, index) => (
           <Button variant="contained"
             key={index}
@@ -186,9 +186,9 @@ function StoriesByFollowingsUsers() {
             {index + 1}
           </Button>
         ))}
-        <Button variant="contained" onClick={() => handlePageChange(currentPage + 1)} disabled={!hasNextPage}>
+        {(hasNextPage) && <Button variant="contained" onClick={() => handlePageChange(currentPage + 1)} disabled={!hasNextPage}>
           Next
-        </Button>
+        </Button>}
       </div>
     </div>
   );

backend/frontend/src/pages/homepage/StoriesbyFollowingUsers.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen, waitFor, fireEvent, act  } from '@testing-library/react';
+import axios from 'axios';
+import StoriesByFollowingsUsers from './StoriesbyFollowingUsers.js';
+import { MemoryRouter } from 'react-router-dom';
+
+jest.mock('axios');
+
+describe('StoriesByFollowingsUsers', () => {
+  it('renders stories correctly', async () => {
+    axios.get.mockResolvedValue({
+      data: {
+        stories: [
+          {
+            id: 1,
+            author: 'user123',
+            title: 'Test Story',
+            creation_date: new Date().toISOString(),
+            location_ids: [{ name: 'Test Location' }],
+          },
+        ],
+        has_next: false,
+        has_prev: false,
+        total_pages: 1,
+      },
+    });
+    render(<MemoryRouter>
+        <StoriesByFollowingsUsers />
+      </MemoryRouter>);
+    await waitFor(() => {
+      expect(screen.getByText('Test Story')).toBeInTheDocument();
+      expect(screen.getByText('Test Location')).toBeInTheDocument();
+    });
+  });
+});

backend/frontend/src/pages/landing/Login.test.js

@@ -5,10 +5,10 @@ import axios from 'axios';
 import { MemoryRouter } from 'react-router-dom';
 import Login from './Login';
 
-// Mock Axios
+
 jest.mock('axios');
 
-// Mock react-router-dom
+
 jest.mock('react-router-dom', () => {
   const originalModule = jest.requireActual('react-router-dom');
 
@@ -30,7 +30,7 @@ describe('Login component', () => {
       </MemoryRouter>
     );
     expect(screen.getByText('Every Memory Counts:')).toBeInTheDocument();
-    // ... rest of your assertions
+
   });
 
   test('calls axios.post with correct credentials on form submission', async () => {