diff --git a/package.json b/package.json index 1ae63c54337cc622bd17cb7bd7e275283e5add23..559408c04a5fcf9b667aca89d1efa2bf3875e7ff 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "react-dom": "^17.0.2", "react-router-dom": "6", "react-scripts": "4.0.3", + "sfcookies": "^1.0.2", "tailwindcss": "npm:@tailwindcss/postcss7-compat", "typescript": "^4.4.3", "web-vitals": "^1.0.1" diff --git a/src/auth/AuthProvider.tsx b/src/auth/AuthProvider.tsx index 9a4c5b0436eaf7e54b3ea850d57df0cd92e9ffbb..7c1cdddb04b461cb1e6b39874463c9f4243bc2bc 100644 --- a/src/auth/AuthProvider.tsx +++ b/src/auth/AuthProvider.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { AuthContext } from './AuthContext'; +import { bake_cookie, delete_cookie } from 'sfcookies'; const fakeAuthProvider = { isAuthenticated: false, @@ -20,6 +21,7 @@ function AuthProvider({ children }: { children: React.ReactNode }) { let signin = (newUser: string, callback: VoidFunction) => { return fakeAuthProvider.signin(() => { setUser(newUser); + bake_cookie('user', newUser); callback(); }); }; @@ -27,6 +29,7 @@ function AuthProvider({ children }: { children: React.ReactNode }) { let signout = (callback: VoidFunction) => { return fakeAuthProvider.signout(() => { setUser(null); + delete_cookie('user'); callback(); }); }; diff --git a/src/auth/useAuth.ts b/src/auth/useAuth.ts index b62a923daafb40ad6a5291eb67d049a74f140304..49ecb7f2ee7dbe3ae8ea7809ca89ebeb618639ad 100644 --- a/src/auth/useAuth.ts +++ b/src/auth/useAuth.ts @@ -1,9 +1,15 @@ import React from 'react'; import { AuthContext } from './AuthContext'; +import { read_cookie } from 'sfcookies'; function useAuth() { - return React.useContext(AuthContext); + let auth = React.useContext(AuthContext); + + if(!auth.user && read_cookie('user').length !== 0) + auth.user = read_cookie('user'); + + return auth; } export { useAuth }; \ No newline at end of file diff --git a/src/components/core/navbar.tsx b/src/components/core/navbar.tsx index d10fe9e581413567d41bdd7d656e50f4626a3961..4cf5b0c12f48fd225c27ace6bda1959ade5b1216 100644 --- a/src/components/core/navbar.tsx +++ b/src/components/core/navbar.tsx @@ -120,9 +120,9 @@ const Navbar = ({ sidebarOpen, setSidebarOpen, path }) => { <div className="flex-1 flex flex-col overflow-y-auto"> <nav className="flex-1 px-2 py-4 bg-gray-800 space-y-1"> {navigation.map((item) => ( - <a - key={item.name} - href={item.href} + <Link + key={`desktop_${item.name}`} + to={item.href} className={classNames( item.href === path ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'group flex items-center px-2 py-2 text-sm font-medium rounded-md' @@ -136,7 +136,7 @@ const Navbar = ({ sidebarOpen, setSidebarOpen, path }) => { aria-hidden="true" /> {item.name} - </a> + </Link> ))} </nav> </div> diff --git a/src/pages/sell.tsx b/src/pages/sell.tsx index b667cbce4d12ee1a885e16ebbc430a3940b14271..d4572b1da1a052fb44340438ec8ca50292e6a0ac 100644 --- a/src/pages/sell.tsx +++ b/src/pages/sell.tsx @@ -82,33 +82,35 @@ const Sell = () => { <div className="pb-5"> <label htmlFor="search" className="block text-sm font-medium text-gray-700">Recherche</label> <div className="mt-1 relative flex items-center"> - <input type="text" name="search" id="search" value={search} onChange={(e) => {setSearch(e.target.value)}} className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md" /> + <input type="text" name="search" id="search" value={search} onChange={(e) => { setSearch(e.target.value) }} className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md" /> </div> </div> - {productsList.length > 0 && [...Array.from((new Set(productsList.map(item => item.category))))].map((category) => (<div> - <h1 className="text-lg font-medium py-2 pt-4">{category}</h1> - <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5"> - {productsList.filter((p) => p.category === category).map((product) => ( - <SellListItem product={product} key={product.name} /> - ))} - </ul> - </div>))} - {productsList.length === 0 && - <div className="text-center w-full mt-10"> - <EmojiSadIcon className="mx-auto h-12 w-12 text-gray-400"/> - <h3 className="mt-2 text-sm font-medium text-gray-900">Aucun produit trouvé !</h3> - <p className="mt-1 text-sm text-gray-500">Essayez de réduire vos critères de recherche.</p> - <div className="mt-6"> - <button - type="button" - onClick={() => setSearch("")} - className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" - > - <CollectionIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" /> - Afficher tout - </button> - </div> - </div>} + {productsList.length > 0 + ? [...Array.from(new Set(productsList.map(item => item.category)))].map((category) => ( + <div key={category}> + <h1 className="text-lg font-medium py-2 pt-4">{category}</h1> + <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5"> + {productsList.filter((p) => p.category === category).map((product) => ( + <SellListItem product={product} key={product.name} /> + ))} + </ul> + </div>)) + : <div className="text-center w-full mt-10"> + <EmojiSadIcon className="mx-auto h-12 w-12 text-gray-400" /> + <h3 className="mt-2 text-sm font-medium text-gray-900">Aucun produit trouvé !</h3> + <p className="mt-1 text-sm text-gray-500">Essayez de réduire vos critères de recherche.</p> + <div className="mt-6"> + <button + type="button" + onClick={() => setSearch("")} + className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" + > + <CollectionIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" /> + Afficher tout + </button> + </div> + </div> + } </div> ); }; diff --git a/yarn.lock b/yarn.lock index 40912a5f44d5f946dc48b554ade5519e18e98657..fab6ed33016d4ab2d1ebea3f8027d3838350218c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10058,6 +10058,11 @@ setprototypeof@1.1.1: resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz" integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw== +sfcookies@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/sfcookies/-/sfcookies-1.0.2.tgz#e2df7b4d4c9db15965bbab9a9ce72829daff5bb9" + integrity sha1-4t97TUydsVllu6uanOcoKdr/W7k= + sha.js@^2.4.0, sha.js@^2.4.8: version "2.4.11" resolved "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz"