Merge pull request #34 from simonc56/dev

.eslintrc.cjs

@@ -27,6 +27,12 @@ module.exports = {
       files: ['src/**/features/*.ts'],
       rules: { 'no-param-reassign': ['error', { props: false }] },
     },
+    {
+      'files': ['vite.config.ts', 'vitest.config.ts'],
+      'rules': {
+        'import/no-extraneous-dependencies': ['error', { 'devDependencies': true }],
+      },
+    },
   ],
   plugins: ['react', '@typescript-eslint'],
   rules: {

index.html

@@ -6,7 +6,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       http-equiv="content-security-policy"
-      content="default-src 'self'; connect-src 'self' http://localhost:3001; script-src-elem 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' https://* data:; child-src 'none';"
+      content="default-src 'self'; connect-src 'self' http://localhost:3001 https://www.premiere.fr; script-src-elem 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' https://* data:; child-src 'none';"
     />
     <meta description="O'movies est un site de recherche de films et de séries TV." />
     <link rel="icon" href="/favicon.png" />

package.json

@@ -14,48 +14,51 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@mantine/carousel": "^7.11.0",
-    "@mantine/core": "^7.11.0",
-    "@mantine/dates": "^7.11.0",
-    "@mantine/form": "^7.11.0",
-    "@mantine/hooks": "^7.11.0",
-    "@mantine/modals": "^7.11.0",
-    "@mantine/notifications": "^7.11.0",
+    "@mantine/carousel": "^7.13.1",
+    "@mantine/core": "^7.13.1",
+    "@mantine/dates": "^7.13.1",
+    "@mantine/form": "^7.13.1",
+    "@mantine/hooks": "^7.13.1",
+    "@mantine/modals": "^7.13.1",
+    "@mantine/notifications": "^7.13.1",
     "@reduxjs/toolkit": "^2.2.6",
     "@tabler/icons-react": "^3.7.0",
-    "@vitejs/plugin-react": "^4.3.1",
     "axios": "^1.7.4",
     "dayjs": "^1.11.11",
+    "embla-carousel-react": "7",
+    "events": "^3.3.0",
+    "fast-xml-parser": "^4.5.0",
     "jwt-decode": "^4.0.0",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.47",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.24.0",
     "redux": "^5.0.1",
-    "vite": "^4.5.3"
+    "vite": "^5.4.8"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vitejs/plugin-react": "^4.3.2",
     "eslint": "8.57.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-import": "2.25.3",
     "eslint-plugin-jsx-a11y": "6.5.1",
-    "eslint-plugin-react": "7.28.0",
+    "eslint-plugin-react": "7.37.0",
     "eslint-plugin-react-hooks": "4.3.0",
     "jsdom": "^24.1.0",
     "prettier": "^3.3.2",
-    "sass": "^1.77.6",
-    "typescript": "^4.9.5",
+    "sass-embedded": "^1.79.4",
+    "typescript": "^5.5.4",
     "vitest": "^1.6.0"
   }
 }

src/@types/MovieState.ts

@@ -40,6 +40,36 @@ export type ReviewResponse = {
   content: string;
 };
 
+export type LastReviewResponse = {
+  id: number;
+  content: string;
+  created_at: string;
+  media: {
+    id: number;
+    tmdb_id: number;
+    title_fr: string;
+  };
+  user: {
+    id: number;
+    firstname: string;
+  };
+};
+
+export type LastRatingResponse = {
+  id: number;
+  value: number;
+  created_at: string;
+  media: {
+    id: number;
+    tmdb_id: number;
+    title_fr: string;
+  };
+  user: {
+    id: number;
+    firstname: string;
+  };
+};
+
 export type FailResponse = {
   data: {
     status: 'fail';

src/@types/MovieType.ts

@@ -11,7 +11,7 @@ type MovieType = {
   overview: string;
   release_date: string;
   director: string;
-  country: string;
+  country: string[];
   original_language: string;
   status: string;
   budget: number;
@@ -52,6 +52,7 @@ export type Review = {
   review_id: number;
   content: string;
   user_firstname?: string;
+  created_at?: string;
 };
 
 export type Actor = {

src/@types/SettingsState.ts

@@ -1,16 +1,30 @@
 export type SettingsState = {
   user: UserType;
+  news: NewsType;
 };
 
 export type UserType = {
   firstname: string;
   lastname: string;
   email: string;
-  password: string;
   birthdate: string;
   logged: boolean;
   token: string;
   created_at?: string;
   count_review?: number;
   count_rating?: number;
 };
+
+export type NewsType = {
+  rssFeedUrl: string;
+  quantity: number;
+  forbiddenWords: string[];
+  allNews: News[];
+};
+
+export type News = {
+  title: string;
+  pubDate: string;
+  description: string;
+  guid: string;
+};

src/components/App/App.tsx

@@ -8,8 +8,6 @@ import ConfirmEmailPage from '../ConfirmEmailPage/ConfirmEmailPage';
 import ConfirmPasswordPage from '../ConfirmPasswordPage/ConfirmPasswordPage';
 import ConnectionPage from '../ConnectionPage/ConnectionPage';
 import ContactPage from '../ContactPage/ContactPage';
-import Footer from '../Footer/Footer';
-import Header from '../Header/Header';
 import Homepage from '../Homepage/Homepage';
 import MovieList from '../MovieList/MovieList';
 import MoviePage from '../MoviePage/MoviePage';
@@ -18,6 +16,8 @@ import NotFoundPage from '../NotFoundPage/NotFoundPage';
 import PlaylistPage from '../PlaylistPage/PlaylistPage';
 import UserProfilePage from '../ProfilUserPage/ProfilUserPage';
 import SignupPage from '../SignupPage/SignupPage';
+import Footer from './Footer/Footer';
+import Header from './Header/Header';
 
 import './App.scss';
 

src/components/Header/Header.scss → src/components/App/Header/Header.scss

@@ -2,7 +2,7 @@
   height: 4.6rem;
   padding-inline: 1rem;
   background-color: var(--color-bg);
-  border-bottom: rem(1px) solid light-dark(var(--color-bg), var(--color-bg));
+  border-bottom: 0.0625rem solid light-dark(var(--color-bg), var(--color-bg));
   & .title {
     margin-right: 1rem;
     font-size: var(--font-size-md);

src/components/Header/Header.tsx → src/components/App/Header/Header.tsx

@@ -1,14 +1,14 @@
 import { Box, Burger, Button, Divider, Drawer, Group } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { Link, NavLink, useNavigate } from 'react-router-dom';
-import logo from '../../assets/logo-pop-corn.webp';
-import { logout } from '../../features/settingsSlice';
-import { useAppDispatch, useAppSelector } from '../../store/hooks';
-import LoginSignup from '../LoginSignup/LoginSignup';
-import Searchbar from '../Searchbar/Searchbar';
-import AvatarName from '../UserMenu/AvatarName';
-import UserMenu from '../UserMenu/UserMenu';
+import logo from '../../../assets/logo-pop-corn.webp';
+import { logout } from '../../../features/settingsSlice';
+import { useAppDispatch, useAppSelector } from '../../../store/hooks';
 import './Header.scss';
+import LoginSignup from './LoginSignup/LoginSignup';
+import Searchbar from './Searchbar/Searchbar';
+import AvatarName from './UserMenu/AvatarName';
+import UserMenu from './UserMenu/UserMenu';
 
 function Header() {
   const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] = useDisclosure(false);

src/components/Searchbar/Searchbar.tsx → src/components/App/Header/Searchbar/Searchbar.tsx

@@ -2,9 +2,9 @@ import { Autocomplete, Loader } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { IoIosSearch } from 'react-icons/io';
 import { useNavigate } from 'react-router-dom';
-import { MovieResultType } from '../../@types/MovieType';
-import { useSearchMoviesQuery } from '../../features/moviesApiSlice';
-import { isoDateToYear } from '../../utils/utils';
+import { MovieResultType } from '../../../../@types/MovieType';
+import { useSearchMoviesQuery } from '../../../../features/moviesApiSlice';
+import { isoDateToYear } from '../../../../utils/utils';
 import './Searchbar.scss';
 
 const useDebounce = (value: string, delay: number) => {

src/components/UserMenu/AvatarName.tsx → src/components/App/Header/UserMenu/AvatarName.tsx

@@ -1,6 +1,6 @@
 import { Avatar, Group, Text } from '@mantine/core';
 import { IconChevronDown } from '@tabler/icons-react';
-import { UserType } from '../../@types/SettingsState';
+import { UserType } from '../../../../@types/SettingsState';
 
 type AvatarNameProps = { user: UserType; color: string; chevron?: boolean };
 

src/components/UserMenu/UserMenu.scss → src/components/App/Header/UserMenu/UserMenu.scss

@@ -5,7 +5,7 @@
     color: var(--color-primary) !important;
   }
   & .avatar {
-    border: rem(2px) solid var(--mantine-color-body);
+    border: 0.125rem solid var(--mantine-color-body);
   }
   & svg.tabler-icon-chevron-down {
     color: var(--color-links);

src/components/UserMenu/UserMenu.tsx → src/components/App/Header/UserMenu/UserMenu.tsx

@@ -1,8 +1,8 @@
 import { Menu, UnstyledButton } from '@mantine/core';
 import { IconLogout, IconUser } from '@tabler/icons-react';
 import { Link, useNavigate } from 'react-router-dom';
-import { logout } from '../../features/settingsSlice';
-import { useAppDispatch, useAppSelector } from '../../store/hooks';
+import { logout } from '../../../../features/settingsSlice';
+import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
 import AvatarName from './AvatarName';
 import './UserMenu.scss';
 

src/components/Homepage/Homepage.scss

@@ -6,25 +6,102 @@
   justify-content: start;
   flex-grow: 1;
   background-color: var(--mantine-color-gray-1);
-  & .intro {
-    max-width: 40rem;
-    margin-inline: 1rem;
-    & h3 {
-      color: var(--color-bg);
+  h2 {
+    margin-bottom: 0.5rem;
+    text-align: center;
+  }
+  .hero {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: calc(100% - 2rem);
+    gap: 1rem;
+    margin: 0 1rem;
+    max-width: 60rem;
+    .hero__left {
+      max-width: 40rem;
+      .intro {
+        width: 100%;
+        height: 100%;
+        & h3 {
+          color: var(--color-bg);
+        }
+      }
+    }
+    .hero__right {
+      flex-grow: 1;
+      flex-shrink: 1;
+      flex-basis: auto;
+      max-width: 40rem;
+      .socials {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .socials__icons {
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          svg {
+            display: inline;
+            margin-inline: 1.1rem;
+            transform: scale(1.6);
+          }
+        }
+      }
+      .newsletter__button {
+        margin: 1rem 0.8rem 0;
+      }
     }
   }
-  & .news {
-    max-width: 40rem;
-    margin-inline: 1rem;
-    margin-top: 0.5rem;
-    & .header-news {
-      display: flex;
-      justify-content: space-between;
-      & h3 {
-        color: var(--color-bg);
+
+  .main {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: calc(100% - 2rem);
+    gap: 1rem;
+    margin: 0 1rem 1rem;
+    max-width: 60rem;
+    .news {
+      max-width: 40rem;
+      // margin-bottom: 1px;
+      border-bottom: 1px solid var(--mantine-color-gray-1);
+      a {
+        color: var(--mantine-color-gray-9);
       }
-      & span {
-        color: var(--mantine-color-gray-5);
+      & .header-news {
+        display: flex;
+        justify-content: space-between;
+        & h3 {
+          color: var(--color-bg);
+          // limit the title width for the date
+          max-width: 85%;
+          line-height: 1.6rem;
+          margin-bottom: 0.5rem;
+        }
+        & span {
+          padding-top: 0.12rem;
+          color: var(--mantine-color-gray-5);
+        }
+      }
+    }
+    aside {
+      max-width: 40rem;
+      flex-grow: 1;
+      flex-shrink: 1;
+      flex-basis: 10rem;
+    }
+  }
+}
+
+@media screen and (max-width: 864px) {
+  .homepage {
+    .main {
+      aside {
+        order: -1;
+        .review__content {
+          font-size: medium;
+        }
       }
     }
   }