Merge pull request #85 from pouyio/react-19

some versions updated

.github/workflows/ci.yml

@@ -11,13 +11,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 20
-      - run: yarn install
+          node-version: 22
+      - name: Setup bun
+        uses: oven-sh/setup-bun@v2
+      - run: bun install
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.TWISO_DEPLOY_TOKEN }}
-        run: npx semantic-release
+        run: bunx semantic-release

.gitignore

@@ -44,4 +44,5 @@ now.json
 .vercel
 
 stats.html
-/dev-dist
+/dev-dist
+/mockups

functions/server.ts

@@ -1,9 +1,9 @@
 import { Handler, HandlerEvent } from '@netlify/functions';
 import fs from 'fs';
-import { SearchMovie, SearchPerson, SearchShow } from 'models';
 import path from 'path';
 import { getApi, getImgsApi } from 'utils/api';
 import { findFirstValid } from 'utils/findFirstValidImage';
+import { SearchMovie, SearchPerson, SearchShow } from '../src/models/Movie';
 
 const TYPE_MAP = {
   movie: 'video.movie',

index.html

@@ -13,7 +13,7 @@
       name="apple-mobile-web-app-status-bar-style"
       content="black-translucent"
     />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
     <link
       href="/splashscreens/iphone5_splash.png"
       media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"

package.json

@@ -6,64 +6,54 @@
   "scripts": {
     "analyze": "npm run build && source-map-explorer 'build/assets/*.js'",
     "start": "vite",
-    "build": "NODE_ENV=production tsc && vite build",
-    "now-build": "npm run build"
+    "build": "NODE_ENV=production tsc && vite build"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.8.1",
-    "@sentry/react": "7.119.2",
-    "@sentry/tracing": "7.119.2",
+    "@reduxjs/toolkit": "2.4.0",
+    "@sentry/react": "8.42.0",
     "axios": "1.7.4",
-    "axios-rate-limit": "1.3.0",
+    "axios-rate-limit": "1.4.0",
     "bottleneck": "^2.19.5",
-    "date-fns": "^2.15.0",
+    "date-fns": "4.1.0",
     "dexie": "^3.2.2",
     "fast-deep-equal": "^3.1.3",
-    "framer-motion": "^6.2.8",
     "fuse.js": "^5.2.3",
+    "motion": "12.0.6",
     "query-string": "^6.13.1",
-    "ramda": "^0.27.1",
-    "react": "^18.0.0",
-    "react-big-calendar": "1.15.0",
-    "react-dom": "^18.0.0",
+    "ramda": "0.30.1",
+    "react": "19.0.0",
+    "react-big-calendar": "1.17.1",
+    "react-dom": "19.0.0",
     "react-fastclick": "^3.0.2",
     "react-helmet": "^6.1.0",
     "react-hook-inview": "^4.0.0",
-    "react-image": "4.1.0",
     "react-longpressable": "^1.1.1",
-    "react-redux": "^8.0.1",
-    "react-router-dom": "^6.3.0",
+    "react-redux": "9.1.2",
+    "react-router": "^7.1.3",
     "scroll-behavior-polyfill": "^2.0.13"
   },
   "devDependencies": {
-    "@netlify/functions": "^1.4.0",
-    "@now/node": "^1.5.1",
+    "@netlify/functions": "2.8.2",
     "@semantic-release/changelog": "^5.0.0",
     "@semantic-release/git": "^9.0.0",
     "@sentry/browser": "7.119.2",
-    "@types/jest": "^24.0.18",
-    "@types/node": "^12.7.4",
-    "@types/ramda": "^0.27.20",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@types/react-helmet": "^6.1.5",
+    "@tailwindcss/vite": "4.0.1",
+    "@types/ramda": "0.30.1",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
+    "@types/react-helmet": "6.1.11",
     "@types/react-outside-click-handler": "^1.3.0",
-    "@types/react-redux": "^7.1.23",
     "@types/resize-observer-browser": "^0.1.3",
-    "@vitejs/plugin-react": "^3.1.0",
-    "autoprefixer": "^10.4.0",
+    "@vitejs/plugin-react": "4.3.4",
     "conventional-changelog-atom": "^2.0.3",
-    "cra-append-sw": "^2.7.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "json-diff": "^0.5.4",
-    "postcss": "^8.4.5",
     "prettier": "^2.0.5",
     "rollup-plugin-visualizer": "^5.9.0",
-    "sass": "^1.60.0",
     "semantic-release": "^19.0.3",
-    "tailwindcss": "3.4.1",
-    "typescript": "5.0.2",
+    "tailwindcss": "4.0.0",
+    "typescript": "5.7.2",
     "vite": "^5.1.8",
     "vite-plugin-environment": "^1.1.3",
     "vite-plugin-pwa": "0.18.0",

src/App.tsx

@@ -2,18 +2,18 @@ import { Alert } from 'components/Alert/Alert';
 import { GlobalFilter } from 'components/GlobalFilter';
 import { NavigationTabs } from 'components/Navigation/NavigationTabs';
 import { NewVersion } from 'components/NewVersion';
-import { AuthContext } from 'contexts';
 import React, { Suspense, lazy, useContext, useEffect } from 'react';
-import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation } from 'react-router';
 import { loadImgConfig } from 'state/slices/config';
 import { useAppDispatch, useAppSelector } from 'state/store';
 import { ROUTE, ROUTES } from 'utils/routes';
 import Emoji from './components/Emoji';
 import Login from './components/Login';
-import { ProgressBar } from './components/ProgressBar';
+import { ProgressBar } from './components/ProgressBar/ProgressBar';
 import ProtectedRoute from './components/ProtectedRoute';
-import { useWindowSize } from './hooks';
 import { firstLoad } from './state/firstLoadAction';
+import { AuthContext } from './contexts/AuthContext';
+import { useWindowSize } from './hooks/useWindowSize';
 const Movies = lazy(() => import('./pages/movies/Movies'));
 const Profile = lazy(() => import('./pages/Profile'));
 const MovieDetail = lazy(() => import('./pages/MovieDetail'));

src/components/Alert/Alert.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import Emoji from '../Emoji';
 import './Alert.css';
-import { AlertContext } from '../../contexts';
+import { AlertContext } from '../../contexts/AlertContext';
 
 export const Alert: React.FC = () => {
   const { text, opened, close } = useContext(AlertContext);

src/components/Collapsable/Collapsable.tsx

@@ -1,7 +1,7 @@
-import { motion } from 'framer-motion';
-import { useTranslate } from 'hooks';
+import { motion } from 'motion/react';
 import React, { useEffect, useRef, useState } from 'react';
 import './collapsable.css';
+import { useTranslate } from '../../hooks/useTranslate';
 
 interface ICollapsableProps {
   heightInRem: number;
@@ -44,8 +44,9 @@ const Collapsable: React.FC<React.PropsWithChildren<ICollapsableProps>> = ({
     <div className="flex flex-col">
       <motion.div
         ref={ref}
-        className={`leading-tight font-light overflow-hidden relative ${isButtonShown && !opened ? 'collapsable' : ''
-          }`}
+        className={`leading-tight font-light overflow-hidden relative ${
+          isButtonShown && !opened ? 'collapsable' : ''
+        }`}
         initial={{
           height: isButtonShown
             ? opened

src/components/Empty.tsx

@@ -1,6 +1,6 @@
-import { useTranslate } from 'hooks';
 import React from 'react';
 import Emoji from './Emoji';
+import { useTranslate } from '../hooks/useTranslate';
 
 export const Empty: React.FC = () => {
   const { t } = useTranslate();

src/components/EmptyState.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { Icon } from './Icon';
 
 export const EmptyState = () => (

src/components/Genres.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import Emoji from './Emoji';
 import getGenre from '../utils/getGenre';
 import { Empty } from './Empty';
-import { useTranslate } from 'hooks';
 import { genres as allGenres } from 'utils/getGenre';
+import { useTranslate } from '../hooks/useTranslate';
 
 interface IGenresProps {
   genres?: string[];

src/components/GlobalFilter.tsx

@@ -1,16 +1,13 @@
-import { useFilter, useIsWatch } from 'hooks';
-import {
-  MovieWatched,
-  MovieWatchlist,
-  ShowWatched,
-  ShowWatchlist,
-} from 'models';
 import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { setGlobalSearch } from 'state/slices/root';
 import { getType } from 'utils/getType';
 import Emoji from './Emoji';
 import ImageLink from './ImageLink';
+import { useFilter } from '../hooks/useFilter';
+import { useIsWatch } from '../hooks/useIsWatch';
+import { MovieWatched, MovieWatchlist } from '../models/Movie';
+import { ShowWatched, ShowWatchlist } from '../models/Show';
 
 export const GlobalFilter = () => {
   const { filter } = useFilter();
@@ -49,7 +46,7 @@ export const GlobalFilter = () => {
     >
       <div className="w-full bg-blue-100 flex items-center border-b-2">
         <input
-          className="bg-blue-100 w-full px-2 py-2 outline-none grow text-gray-700 "
+          className="bg-blue-100 w-full px-2 py-2 outline-hidden grow text-gray-700 "
           placeholder="🔍 Escribe un título de tu colección"
           type="text"
           onChange={(e) => setSearchValue(e.target.value)}

src/components/Icon.tsx

@@ -16,7 +16,9 @@ import Like from 'assets/like-svgrepo-com.svg?react';
 import Play from 'assets/play-circle-svgrepo-com.svg?react';
 import Logout from 'assets/logout-2-svgrepo-com.svg?react';
 import Ufo from 'assets/ufo-3-svgrepo-com.svg?react';
-import { ThemeContext } from 'contexts';
+import Hidden from 'assets/eye-svgrepo-com.svg?react';
+import NoHidden from 'assets/eye-disable-svgrepo-com.svg?react';
+import { ThemeContext } from 'contexts/ThemeContext';
 import React, { HTMLProps, useContext } from 'react';
 
 const iconsMap = {
@@ -38,6 +40,8 @@ const iconsMap = {
   play: <Play />,
   logout: <Logout />,
   ufo: <Ufo />,
+  hidden: <Hidden />,
+  'no-hidden': <NoHidden />,
 } as const;
 
 interface IconProps extends HTMLProps<HTMLDivElement> {

src/components/Image.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { useInView } from 'react-hook-inview';
 import Emoji from './Emoji';
-import { Ids } from '../models';
-import { useIsWatch, useImage } from '../hooks';
-import { Img } from 'react-image';
+import { useImage } from '../hooks/useImage';
+import { useIsWatch } from '../hooks/useIsWatch';
+import { Img } from '../lib/react-image'; // temporary load local lib until remote is updated https://github.com/mbrevda/react-image/pull/1006
+import { Ids } from '../models/Ids';
 
 interface IImageProps {
   ids: Ids;
@@ -23,7 +24,7 @@ const Image: React.FC<React.PropsWithChildren<IImageProps>> = ({
   size = 'small',
   ...props
 }) => {
-  const { isWatchlist, isWatched } = useIsWatch();
+  const { isWatchlist, isWatched, isHidden } = useIsWatch();
   const [ref, inView] = useInView({ unobserveOnEnter: true });
 
   const { imgUrl, imgPreview, message } = useImage(
@@ -35,6 +36,9 @@ const Image: React.FC<React.PropsWithChildren<IImageProps>> = ({
 
   const getBorderClass = () => {
     if (type === 'person') return '';
+    if (isHidden(ids.trakt)) {
+      return 'border-2 brightness-70 opacity-50';
+    }
     if (isWatched(ids.trakt, type)) {
       return 'border-2 border-green-400';
     }

src/components/ImageLink.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import Image from './Image';
-import { Movie, Show, Person, Ids } from '../models';
+import { Show } from '../models/Show';
+import { Movie } from '../models/Movie';
+import { Person } from '../models/Person';
+import { Ids } from '../models/Ids';
 
 interface IImageLinkProps {
   item: Show | Movie | Person;

src/components/Login.tsx

@@ -1,8 +1,8 @@
-import { AuthContext } from 'contexts';
-import { useTranslate } from 'hooks';
+import { AuthContext } from 'contexts/AuthContext';
 import React, { useContext, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { loginApi } from '../utils/api';
+import { useTranslate } from '../hooks/useTranslate';
 
 interface ILoginProps {
   code: string;

src/components/LoginButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 const redirect_url = import.meta.env.VITE_REDIRECT_URL;
 
 export const LoginButton: React.FC<{ small?: boolean }> = ({ small }) => {

src/components/Longpress.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import LongPressable from 'react-longpressable';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { useDispatch } from 'react-redux';
 import { setGlobalSearch } from 'state/slices/root';
-import { useTranslate } from 'hooks';
 import { Icon } from './Icon';
+import { useTranslate } from '../hooks/useTranslate';
 
 const LongPress: React.FC = () => {
   const navigate = useNavigate();

src/components/Modal.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import ReactDOM from 'react-dom';
-import { ThemeContext, ModalContext } from '../contexts';
+import { ThemeContext } from '../contexts/ThemeContext';
+import { ModalContext } from '../contexts/ModalContext';
 
 interface IModalProps {
   modalRef: HTMLDivElement;
@@ -20,7 +21,7 @@ const Modal: React.FC<IModalProps> = ({ modalRef }) => {
       <div className="absolute w-full h-full bg-gray-600 opacity-50"></div>
 
       <div
-        className="text-black bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto"
+        className="text-black bg-white w-11/12 md:max-w-md mx-auto rounded-sm shadow-lg z-50 overflow-y-auto"
         style={{ maxHeight: '60vh', WebkitOverflowScrolling: 'touch' }}
       >
         <div className="p-4 leading-tight">

src/components/Navigation/NavigationTabs.tsx

@@ -1,16 +1,17 @@
-import { motion } from 'framer-motion';
-import { useTranslate, useWindowSize } from '../../hooks';
+import { motion } from 'motion/react';
 import React from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router';
 import LongPress from '../Longpress';
 import { ROUTES } from 'utils/routes';
 import { Icon } from 'components/Icon';
+import { useWindowSize } from '../../hooks/useWindowSize';
+import { useTranslate } from '../../hooks/useTranslate';
 
 const Underline: React.FC<{ width: number }> = ({ width }) => {
   return (
     <motion.div
       layoutId="underline-section"
-      className="bg-gray-600 rounded"
+      className="bg-gray-600 rounded-sm"
       initial={false}
       style={{
         bottom: