7 |
10 | )
11 | }
12 |
13 | export default AdminFooter
--------------------------------------------------------------------------------
/src/components/ScrollToTop.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useLocation } from 'react-router-dom';
3 |
4 | const ScrollToTop = () => {
5 | // Extracts pathname property(key) from an object
6 | const { pathname } = useLocation();
7 |
8 | // Automatically scrolls to top whenever pathname changes
9 | useEffect(() => {
10 | window.scrollTo(0, 0);
11 | }, [pathname]);
12 |
13 | return <>
14 | }
15 |
16 | export default ScrollToTop;
--------------------------------------------------------------------------------
/src/components/Banner.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Banner = ({page, path} : {page : string, path : string[]}) => {
4 |
5 | return (
6 | FriedShop | Admin Panel
8 |Copyright © 2023 By Elfried Fortunatus KIDJE
9 |
7 |
10 | )
11 |
12 | }
13 |
14 | export default Banner;
--------------------------------------------------------------------------------
/src/views/Login.tsx:
--------------------------------------------------------------------------------
1 | import {useEffect} from 'react'
2 | import {Navigate, useNavigate} from "react-router-dom"
3 | import { LoginForm } from '../components/Form';
4 | import Footer from './includes/Footer';
5 | import Header from './includes/Header';
6 | import RoutePaths from '../config';
7 | import { checkLogin } from '../Utils/Generals';
8 |
9 | const Login = () => {
10 |
11 | return (
12 | <>
13 | {page}
8 |{path.join(" > ")}
9 |
14 | 
15 |
18 | )
19 | }
20 |
21 | export default Member
--------------------------------------------------------------------------------
/public/loader.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/components/SocialsNetworks.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const SocialsNetworks = ({addClass = ''} : {addClass? : string}) => {
4 |
5 | return
11 | }
--------------------------------------------------------------------------------
/public/friedshop.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "name": "FriedShop",
3 | "short_name": "FriedShop",
4 | "description": "Faite facilement vos achats en ligne en toute sécurité.",
5 | "icons":[
6 | {
7 | "src":"/android-chrome-192x192.png",
8 | "sizes":"192x192",
9 | "type":"image/png"
10 | },
11 |
12 | {
13 | "src":"/android-chrome-512x512.png",
14 | "sizes":"512x512",
15 | "type":"image/png"
16 | }
17 | ],
18 | "start_url": "/",
19 | "display": "standalone",
20 | "theme_color": "#F2F3F9",
21 | "background_color": "#7BAE00"
22 | }
23 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "module": "ESNext",
13 | "moduleResolution": "Node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src", "public/service-worker.js"],
20 | "references": [{ "path": "./tsconfig.node.json" }]
21 | }
22 |
--------------------------------------------------------------------------------
/src/assets/css/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Poppins Bold";
3 | src: url("../fonts/Poppins-Bold.ttf");
4 | }
5 |
6 | @font-face {
7 | font-family: "Poppins Regular";
8 | src: url("../fonts/Poppins-Regular.ttf");
9 | }
10 |
11 | @font-face {
12 | font-family: "Poppins Italic";
13 | src: url("../fonts/Poppins-Italic.ttf");
14 | }
15 |
16 | @font-face {
17 | font-family: "Poppins Light";
18 | src: url("../fonts/Poppins-Light.ttf");
19 | }
20 |
21 |
22 | .font-bold { font-family: "Poppins Bold"; }
23 | .font-regular { font-family: "Poppins Regular"; }
24 | .font-italic { font-family: "Poppins Italic"; }
25 | .font-light { font-family: "Poppins Light"; }
--------------------------------------------------------------------------------
/src/components/SearchBar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const SearchBar = () => {
4 |
5 | return (
6 | {name}
16 |{role}
17 |
7 |
13 | )
14 | }
15 |
16 | export default SearchBar
--------------------------------------------------------------------------------
/src/components/Archives.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import { archives } from '../views/VirtualData'
4 |
5 | const Archives = () => {
6 |
7 | return (
8 | Search
8 | 12 |
9 |
16 | )
17 | }
18 |
19 | export default Archives
--------------------------------------------------------------------------------
/src/components/Reviews.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 |
3 |
4 | const Reviews = ({rating} : {rating : number}) => {
5 |
6 | let content = document.createElement('div');
7 | const star = document.createElement('i');
8 | star.classList.add('bi', 'bi-star-fill');
9 |
10 | for (let i = 0; i < 5; i++) {
11 | content.appendChild(star);
12 | }
13 |
14 |
15 | return (
16 | Archives
10 | { archives.map((archives) => { 11 | return
12 | {archives.date}
13 |
14 | })}
15 |
17 |
18 |
19 | )
20 |
21 | }
22 |
23 | export default Reviews
--------------------------------------------------------------------------------
/src/store/userSlice.ts:
--------------------------------------------------------------------------------
1 | import { PayloadAction, createSlice } from "@reduxjs/toolkit";
2 | import { getItem, removeItem } from "../Utils/Generals";
3 | import RoutePaths from "../config";
4 |
5 |
6 | export const userSlice = createSlice({
7 |
8 | name : 'user',
9 |
10 | initialState : {},
11 |
12 | reducers : {
13 |
14 | setUser : (state, action) => {
15 |
16 | state = action.payload;
17 |
18 | return state;
19 | },
20 |
21 | logoutCurrentUser : (state, action) => {
22 |
23 | state = {};
24 | console.log('hello')
25 | return state;
26 | },
27 | }
28 |
29 | })
30 |
31 | export const { setUser, logoutCurrentUser } = userSlice.actions;
--------------------------------------------------------------------------------
/src/components/PrivateRoute.tsx:
--------------------------------------------------------------------------------
1 | import { PropsWithChildren, useEffect } from "react"
2 | import { Navigate, Outlet } from "react-router-dom"
3 | import { getItem } from "../Utils/Generals"
4 | import RoutePaths from "../config";
5 |
6 | const PrivateRoute = ({type = 0, children} : PropsWithChildren<{type : number}>) => {
7 |
8 | const isLogged = getItem(RoutePaths.token);
9 | const user = !isLogged ? null : JSON.parse(getItem('user') || '');
10 |
11 | if (!isLogged) {
12 | return
9 | {name}
10 |
11 | }
12 |
13 | const SearchCategory = ({type = 'recent'} : {type : string}) => {
14 |
15 |
16 | return (
17 |
18 | { searchData.map((search) =>
20 | )
21 | }
22 |
23 | export default SearchCategory
--------------------------------------------------------------------------------
/src/hooks/useFetch.ts:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 |
3 | const useFetch = ( url : string ) => {
4 |
5 | const [loading, setLoading] = useState(true);
6 | const [data, setData] = useState({});
7 |
8 | useEffect(() => {
9 | fetch(url)
10 | .then((response : Response) => {
11 | response.json()
12 | .then((data) => { setLoading(false); setData(data) })
13 | })
14 | .then(data => {
15 | console.log(data);
16 | setLoading(false);
17 | }).catch((error) => {
18 | console.error(error);
19 | })
20 | }, []);
21 |
22 | return [loading, data];
23 |
24 | }
25 |
26 | export default useFetch
--------------------------------------------------------------------------------
/src/views/TeamMembers.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Header from './includes/Header'
3 | import Banner from '../components/Banner'
4 | import Footer from './includes/Footer'
5 | import { teams } from './VirtualData'
6 | import Member from '../components/Member'
7 |
8 | const TeamMembers = () => {
9 |
10 |
11 | return (
12 | <>
13 |
18 | {
19 | teams.map((team) => )
20 | }
21 |
22 |
23 |
24 |
25 | )
26 | }
27 |
28 | export default TeamMembers
--------------------------------------------------------------------------------
/src/components/404.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom';
3 | import RoutePaths from '../config';
4 |
5 | const NotFound = () => {
6 |
7 | return (
8 |
9 | 
10 |
16 | )
17 |
18 | }
19 |
20 | export default NotFound;
--------------------------------------------------------------------------------
/src/components/Tags.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import { tags } from '../views/VirtualData'
4 |
5 | export const Tag = ({tag_id, name} : {tag_id : number, name : string}) => {
6 |
7 | return
10 |
11 |
15 | Oops! Page Not Found.
12 |The page you are looking for is not avaible or doesn't belong to this website!
13 | GO TO HOME 14 |
8 | {name}
9 |
10 | }
11 |
12 | const Tags = () => {
13 |
14 | return (
15 |
16 |
22 | )
23 | }
24 |
25 | export default Tags
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App'
4 | import './assets/css/index.css';
5 | import 'bootstrap/dist/css/bootstrap.min.css'
6 | import 'bootstrap/dist/js/bootstrap.bundle.min.js'
7 | import 'bootstrap-icons/font/bootstrap-icons.css'
8 | import 'animate.css/animate.min.css'
9 | import '@fortawesome/fontawesome-free/css/all.min.css'
10 | import 'react-responsive-carousel/lib/styles/carousel.min.css'
11 | import { BrowserRouter } from 'react-router-dom';
12 | import { Provider } from 'react-redux';
13 | import {store} from '../store';
14 | import ScrollToTop from './components/ScrollToTop';
15 |
16 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
17 | Tags
17 |
18 | { tags.map((tag) =>
20 |
21 |
6 |
17 |
18 | )
19 | }
20 |
21 | export default Lang
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "friedshop-front-react",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "@fortawesome/fontawesome-free": "^6.2.1",
13 | "@reduxjs/toolkit": "^1.9.3",
14 | "@types/react-redux": "^7.1.25",
15 | "animate.css": "^4.1.1",
16 | "axios": "^1.3.4",
17 | "bootstrap": "^5.2.3",
18 | "bootstrap-icons": "^1.10.3",
19 | "react": "^18.2.0",
20 | "react-dom": "^18.2.0",
21 | "react-loader-spinner": "^5.3.4",
22 | "react-query": "^3.39.3",
23 | "react-redux": "^8.0.5",
24 | "react-responsive-carousel": "^3.2.23",
25 | "react-router-dom": "^6.8.0",
26 | "react-toastify": "^9.1.2",
27 | "sweetalert2": "^11.7.3"
28 | },
29 | "devDependencies": {
30 | "@types/react": "^18.0.26",
31 | "@types/react-dom": "^18.0.9",
32 | "@vitejs/plugin-react": "^3.0.0",
33 | "typescript": "^4.9.3",
34 | "vite": "^4.0.0"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/AddToCart.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { ProductType } from './ProductCart'
3 | import { addToShoppingCart } from '../store/productSlice';
4 | import { useAppDispatch, useAppSelector } from '../hooks/redux-hooks';
5 |
6 | const AddToCart = ({ product, classSup = '', divClass = '' }: { product: ProductType, classSup?: string, divClass?: string }) => {
7 |
8 | const dispatch = useAppDispatch();
9 | const exist: ProductType[] = useAppSelector((state) => state.productCart);
10 | const isExistInCart = exist.find((stateProduct) => stateProduct.id == product.id);
11 |
12 | return <>
13 | {
14 | isExistInCart ?
15 |
16 | :
17 |
{
18 | e.preventDefault()
19 | dispatch(addToShoppingCart(product))
20 | }}>
21 | ADD TO CART
22 |
23 | }
24 |
25 | }
26 |
27 | export default AddToCart
--------------------------------------------------------------------------------
/src/components/ProductSort.tsx:
--------------------------------------------------------------------------------
1 | import Reviews from './Reviews';
2 | import { Link } from 'react-router-dom';
3 | import { ProductType } from './ProductCart';
4 | import { link } from '../Utils/Generals';
5 |
6 | const ProductSort = (props : ProductType) => {
7 |
8 |
9 | return (
10 |
11 |
23 | )
24 |
25 | }
26 |
27 |
28 |
29 | export default ProductSort
--------------------------------------------------------------------------------
/src/store/apiquery/AuthApiSlice.ts:
--------------------------------------------------------------------------------
1 | import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react'
2 | import { BASE_URL, inject_headers } from '../../Utils/Generals';
3 |
4 | export const authApiSlice = createApi({
5 |
6 | reducerPath : 'api/auth',
7 | baseQuery : fetchBaseQuery({baseUrl : BASE_URL, headers : inject_headers()}),
8 | tagTypes : ['Auth'],
9 |
10 | endpoints : (builder) => ({
11 |
12 | refresh : builder.query(({
13 | query : () => '/user/refresh',
14 | providesTags : ['Auth']
15 | })),
16 |
17 | login: builder.mutation({
18 | query : (category) => ({
19 | url : `/user/login`,
20 | method : 'POST',
21 | body : category,
22 | }),
23 | invalidatesTags : ['Auth']
24 | }),
25 |
26 | register: builder.mutation({
27 | query : (data) => ({
28 | url : 'user/create',
29 | method : 'POST',
30 | body : data,
31 | }),
32 | invalidatesTags : ['Auth']
33 | })
34 | })
35 | })
36 |
37 |
38 | export const {
39 | useRefreshQuery,
40 | useLoginMutation,
41 | useRegisterMutation
42 | } = authApiSlice;
43 |
--------------------------------------------------------------------------------
/src/components/NewsLetter.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const NewsLetter = () => {
4 |
5 | return (
6 |
12 | })
13 |
14 |
15 | {props.name}
16 |
17 |
22 |
18 | ${props.price}
19 | ${props.old_price}
20 |
21 |
7 |
23 | )
24 | }
25 |
26 | export default NewsLetter
--------------------------------------------------------------------------------
/src/components/Testimonial.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Reviews from './Reviews';
3 |
4 | type TestimonialType = {
5 | authorName : string,
6 | authorImg: string,
7 | rating: number,
8 | text: string,
9 | };
10 |
11 | const Testimonial = (props : TestimonialType) => {
12 |
13 |
14 | return (
15 |
8 |
21 |
22 |
9 | 
10 |
15 |
20 |
11 |
14 | Newsletter
12 |Subscribe here to get every single updates
13 |
16 |
30 | )
31 |
32 | }
33 |
34 |
35 |
36 | export default Testimonial
--------------------------------------------------------------------------------
/src/components/HandleResult.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import { ToastContainer, toast } from 'react-toastify';
3 | import 'react-toastify/dist/ReactToastify.css';
4 | import {setItem} from "../Utils/Generals";
5 | import { useNavigate } from "react-router-dom";
6 | import RoutePaths from "../config";
7 |
8 | export const HandleResult = ({result} : {result : any}) => {
9 |
10 | const navigate = useNavigate()
11 |
12 | useEffect(() => {
13 |
14 | result.isError && toast.error((result.error as any).data?.message);
15 |
16 | if(result.isSuccess) {
17 |
18 | if (RoutePaths.token in result.data?.data) {
19 |
20 | setItem(RoutePaths.token, result.data?.data._token);
21 | setItem('user', result.data?.data.user);
22 | navigate(result.data?.data.user.admin ? RoutePaths.admin : RoutePaths.userAccount);
23 | }
24 | toast.success(result.data?.message);
25 | }
26 |
27 | }, [result]);
28 |
29 | let content : React.ReactNode = null;
30 |
31 | if (result.isError && result.error?.data) {
32 | content =
17 |
28 |
18 | 
19 |
24 |
20 |
22 |
23 | {props.authorName}
21 |
25 | 
26 |
27 |
26 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam velit, amet consequatur illum culpa a ut dolorum cum. Debitis molestias tempora ut nostrum dicta mollitia officia illum, eos nobis eligendi!
29 |
33 | {result.error.data?.errors.map((err : string) => (
34 |
39 |
40 | }
41 |
42 | return <>
35 | {err}
36 |
37 | ))}
38 | 
18 |
36 | )
37 |
38 | }
39 |
40 |
41 |
42 | export default Blog
--------------------------------------------------------------------------------
/src/store/apiquery/slideApiSlice.ts:
--------------------------------------------------------------------------------
1 | import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react'
2 | import { BASE_URL, inject_headers } from '../../Utils/Generals';
3 |
4 | export const slideApiSlice = createApi({
5 |
6 | reducerPath : 'api/slides',
7 | baseQuery : fetchBaseQuery({baseUrl : BASE_URL, headers : inject_headers()}),
8 | tagTypes : ['Slides'],
9 |
10 | endpoints : (builder) => ({
11 |
12 | getAllSlides : builder.query(({
13 | query : () => '/slide',
14 | providesTags : ['Slides']
15 | })),
16 |
17 | getSlide : builder.query({
18 | query : (slide) => `/slide/${slide.id}`,
19 | providesTags : ['Slides']
20 | }),
21 |
22 | createSlide: builder.mutation({
23 | query : (slide) => ({
24 | url : `/slide/create`,
25 | method : 'POST',
26 | body : slide,
27 | }),
28 | invalidatesTags : ['Slides']
29 | }),
30 |
31 | updateSlide: builder.mutation({
32 | query : (data) => ({
33 | url : 'slide/edit',
34 | method : 'POST',
35 | body : data,
36 | }),
37 | invalidatesTags : ['Slides']
38 | }),
39 |
40 | deleteSlide: builder.mutation({
41 | query : (id : number) => ({
42 | url : '/slide/delete',
43 | method : 'DELETE',
44 | body : {id}
45 | }),
46 | invalidatesTags : ['Slides']
47 | })
48 | })
49 | })
50 |
51 |
52 | export const {
53 | useGetAllSlidesQuery,
54 | useGetSlideQuery,
55 | useUpdateSlideMutation,
56 | useCreateSlideMutation,
57 | useDeleteSlideMutation,
58 | } = slideApiSlice;
59 |
--------------------------------------------------------------------------------
/src/components/SlideShow.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react'
2 | import { Carousel } from 'react-responsive-carousel'
3 | import { useGetAllSlidesQuery } from '../store/apiquery/slideApiSlice';
4 | import { Slide } from '../views/VirtualData';
5 | import { link } from '../Utils/Generals';
6 | import Spinner from './Spinner';
7 | import { Link } from 'react-router-dom';
8 | import RoutePaths from '../config';
9 |
10 | type SlideProps = {
11 | url: string,
12 | alt?: string,
13 | text?: string,
14 | }[];
15 |
16 | type SlideOptions = {
17 | tumbs: boolean,
18 | status: boolean
19 | }
20 |
21 | const SlideShow = (props: { options?: {} }) => {
22 |
23 | const { isLoading, data: slides, isError } = useGetAllSlidesQuery("api/slides");
24 |
25 |
26 | return (
27 |
19 | 
20 |
24 |
21 | {props.date}
22 |
23 |
25 | {props.title}
26 |
35 | {props.content}
27 |
28 |
34 |
29 |
30 |
32 |
33 | {props.authorName}
31 |
31 | })
32 |
40 | }) :
41 |
33 |
39 |
34 |
38 | {slide.text}
35 |Free Shipping on all Your Order
36 | SHOP NOW 37 |
16 |
39 | )
40 | }
41 |
42 | export default SimpleProduct
--------------------------------------------------------------------------------
/src/components/NumberCount.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, SyntheticEvent, useEffect, useState } from 'react'
2 | import { ProductType } from './ProductCart';
3 | import { cartKeyName } from '../Utils/Generals';
4 | import { setProductQuantity } from '../store/productSlice';
5 | import { useAppDispatch } from '../hooks/redux-hooks';
6 |
7 | type OptionsType = {
8 | product: ProductType,
9 | initialValue? : number,
10 | step? : number;
11 | min? : number,
12 | max? : number
13 | }
14 |
15 | const Numberquantity = ({product, initialValue = 1, step = 1, min, max } : OptionsType) => {
16 |
17 | const [quantity, setQuantity] = useState(product.quantity ?? initialValue);
18 | const dispatch = useAppDispatch();
19 |
20 | const increment = () => {
21 | if (max && quantity >= max) {
22 | return quantity;
23 | }
24 | setQuantity(state => state + step);
25 | const quantitySaved = quantity + 1;
26 | dispatch(setProductQuantity({product, quantitySaved}));
27 | }
28 |
29 | const decrement = () => {
30 |
31 | if (min && quantity <= min) {
32 | return quantity;
33 | }
34 | setQuantity(state => state - step);
35 | const quantitySaved = quantity - 1;
36 | dispatch(setProductQuantity({product, quantitySaved}));
37 | }
38 |
39 | return (
40 |
17 |
18 | })
19 |
20 |
21 |
22 |
23 | {product.name}
24 |
25 |
38 |
26 |
37 |
27 | {product.price}
28 |
29 | {product.quantity ?? 1}
30 |
31 | dispatch(deleteProductInCart(product))}
33 | >
34 |
35 |
36 |
41 |
45 | )
46 |
47 | }
48 |
49 |
50 |
51 | export default Numberquantity
--------------------------------------------------------------------------------
/src/store/apiquery/usersApiSlice.ts:
--------------------------------------------------------------------------------
1 | import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react'
2 | import { BASE_URL, inject_headers } from '../../Utils/Generals';
3 |
4 | export const usersApiSlice = createApi({
5 |
6 | reducerPath : 'api/users',
7 | baseQuery : fetchBaseQuery({baseUrl : BASE_URL, headers: inject_headers()}),
8 | tagTypes : ['Users'],
9 |
10 | endpoints : (builder) => ({
11 |
12 | getAllUsers : builder.query(({
13 | query : () => '/user',
14 | providesTags : ['Users']
15 | })),
16 |
17 | getUser : builder.query({
18 | query : (user) => `/user/${user}`,
19 | providesTags : ['Users']
20 | }),
21 |
22 | getStartistics: builder.query({
23 | query: () => '/statistics',
24 | }),
25 |
26 | createUser: builder.mutation({
27 | query : (user) => ({
28 | url : `/user/create`,
29 | method : 'POST',
30 | body : user,
31 | }),
32 | invalidatesTags : ['Users']
33 | }),
34 |
35 | updateUser: builder.mutation({
36 | query : (data) => ({
37 | url : 'user/edit',
38 | method : 'POST',
39 | body : {_method : 'patch', ...data},
40 | }),
41 | invalidatesTags : ['Users']
42 | }),
43 |
44 | deleteUser: builder.mutation({
45 | query : (id : number) => ({
46 | url : '/user/delete',
47 | method : 'DELETE',
48 | body : {id}
49 | }),
50 | invalidatesTags : ['Users']
51 | })
52 | })
53 | })
54 |
55 |
56 | export const {
57 | useGetAllUsersQuery,
58 | useGetUserQuery,
59 | useUpdateUserMutation,
60 | useCreateUserMutation,
61 | useDeleteUserMutation,
62 | useGetStartisticsQuery
63 | } = usersApiSlice;
64 |
--------------------------------------------------------------------------------
/store.ts:
--------------------------------------------------------------------------------
1 | import { configureStore } from "@reduxjs/toolkit";
2 | import { productCartSlice, productSlice, productWhishListSlice } from "./src/store/productSlice";
3 | import { productApiSlice } from "./src/store/apiquery/productApiSlice";
4 | import { categoryApiSlice } from "./src/store/apiquery/categoryApiSlice";
5 | import { authApiSlice } from "./src/store/apiquery/AuthApiSlice";
6 | import { slideApiSlice } from "./src/store/apiquery/slideApiSlice";
7 | import { usersApiSlice } from "./src/store/apiquery/usersApiSlice";
8 | import { userSlice } from "./src/store/userSlice";
9 | import { commandApiSlice } from "./src/store/apiquery/CommandApiSlice";
10 |
11 | export const store = configureStore({
12 | reducer : {
13 | [productApiSlice.reducerPath] : productApiSlice.reducer,
14 | [authApiSlice.reducerPath] : authApiSlice.reducer,
15 | [categoryApiSlice.reducerPath] : categoryApiSlice.reducer,
16 | [slideApiSlice.reducerPath] : slideApiSlice.reducer,
17 | [usersApiSlice.reducerPath] : usersApiSlice.reducer,
18 | [commandApiSlice.reducerPath] : commandApiSlice.reducer,
19 | products : productSlice.reducer,
20 | productWishlist : productWhishListSlice.reducer,
21 | productCart : productCartSlice.reducer,
22 | user : userSlice.reducer,
23 | },
24 | middleware: (getDefaultMiddleware) =>
25 | getDefaultMiddleware()
26 | .concat(
27 | productApiSlice.middleware,
28 | categoryApiSlice.middleware,
29 | authApiSlice.middleware,
30 | slideApiSlice.middleware,
31 | usersApiSlice.middleware,
32 | commandApiSlice.middleware,
33 | ),
34 | })
35 |
36 | // Infer the `RootState` and `AppDispatch` types from the store itself
37 | export type RootState = ReturnType-
42 | {quantity}
43 |
44 |
28 |
32 |
33 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/src/components/ProductOfDay.tsx:
--------------------------------------------------------------------------------
1 | import DateCount from './DateCount';
2 | import NumberCount from './NumberCount';
3 | import Reviews from './Reviews';
4 | import { Link } from 'react-router-dom';
5 | import AddToCart from './AddToCart';
6 | import { useGetRandomProductQuery } from '../store/apiquery/productApiSlice';
7 | import Spinner from './Spinner';
8 | import { link } from '../Utils/Generals';
9 |
10 | const ProductOfDay = () => {
11 |
12 | const { data: product, isLoading, isError } = useGetRandomProductQuery("");
13 |
14 | return (
15 | <>
16 | {
17 | !isLoading && !isError ?
18 |
29 | 
30 |
31 |
30 |
19 |
:
41 |
20 |
21 | ![{product.data[0].name}]({link(product.data[0].img)})
22 |
23 |
24 |
25 |
40 |
28 |
31 | ${product.data[0].price}
29 |${product.data[0].old_price}
30 |
33 |
35 | {product.data[0].desc}
34 |
36 |
39 |
19 |
52 |
53 |
54 | )
55 |
56 | }
57 |
58 | export default BlogPage;
--------------------------------------------------------------------------------
/src/views/PostView.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Footer from './includes/Footer';
3 | import Header from './includes/Header';
4 | import { apiCategory, blogInfo } from './VirtualData';
5 | import Banner from '../components/Banner';
6 | import BlogDetails from '../components/BlogDetails';
7 | import SearchBar from '../components/SearchBar';
8 | import { Category } from './includes/Section';
9 | import Tags from '../components/Tags';
10 | import Archives from '../components/Archives';
11 | import { Link } from 'react-router-dom';
12 |
13 | const PostView = () => {
14 |
15 | return (
16 | <>
17 |
20 |
51 |
21 |
23 |
50 |
20 |
51 |
52 |
53 | )
54 |
55 | }
56 |
57 | export default PostView;
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # FriedShop : A e-commerce website built with ReactJS
2 |
3 | ### Description
4 |
5 | This project is a front-end web application for a fictional fast-food restaurant called Friedshop, developed with ReactJS. It allows users to browse the menu, place orders, and track their status. The application is live at [https://friedshop.vercel.app/](https://friedshop.vercel.app/).
6 |
7 | ### Features
8 |
9 | * **Menu browsing**: The application displays the different dishes available, including descriptions, prices, photos, and categories.
10 | * **Order placement**: Users can choose the dishes they want and add them to their cart. They can then checkout and choose a payment method (credit card, PayPal, or cash).
11 | * **Order tracking**: The application allows users to track their order status in real-time, from preparation to delivery. Users can also view their order history.
12 | * **Account creation**: Users can create an account to streamline the ordering process and access additional features, like saving delivery addresses and viewing invoices.
13 | * **Authentication**: Users can log in to their accounts to access their personal information and modify preferences.
14 | * **Reviews and ratings**: Users can leave reviews on the dishes they have ordered and see reviews from other users.
15 |
16 | ### Technologies used
17 |
18 | * ReactJS
19 | * Redux ToolKit
20 | * Bootstrap 5
21 |
22 | ### License
23 |
24 | This project is under the MIT license.
25 |
26 | ### Contributors
27 |
28 | - [KIDJE E. Fortunatus - v1p3r75](https://github.com/v1p3r75)
29 |
30 |
31 | ### Notes
32 |
33 | * This project is still under development.
34 | * Feel free to contribute by opening issues or pull requests.
35 |
36 | ### Useful links
37 |
38 | * GitHub repository: [https://github.com/v1p3r75/friedshop-front-react](https://github.com/v1p3r75/friedshop-front-react)
39 | * Live application: [https://friedshop.vercel.app/](https://friedshop.vercel.app/)
40 | * ReactJS documentation: [https://react.dev/](https://react.dev/)
41 | * Redux tutorial: [https://redux.js.org/tutorials/fundamentals/part-1-overview](https://redux.js.org/tutorials/fundamentals/part-1-overview)
42 |
43 | ## Possible improvements
44 |
45 | * Integrate a notification system for users when an order is ready or in transit.
46 | * Implement a loyalty program to reward returning customers.
47 | * Add the ability to order by phone or through a mobile application.
48 |
49 | ## Conclusion
50 |
51 | This README file is a good starting point for your project. Feel free to complete and modify it according to your needs.
--------------------------------------------------------------------------------
/public/service-worker.js:
--------------------------------------------------------------------------------
1 | const CACHE_NAME = 'friedshop_cache';
2 | const OFFLINE_URL = '/'
3 |
4 |
5 | self.addEventListener('install', function(event) {
6 | event.waitUntil(
7 | caches.open(CACHE_NAME)
8 | .then(function(cache) {
9 | return cache.addAll([
10 | '/',
11 | ]);
12 | })
13 | );
14 | self.skipWaiting()
15 | });
16 |
17 | self.addEventListener("activate", (event) => {
18 | event.waitUntil(
19 | (async () => {
20 | // Enable navigation preload if it's supported.
21 | // See https://developers.google.com/web/updates/2017/02/navigation-preload
22 | if ("navigationPreload" in self.registration) {
23 | await self.registration.navigationPreload.enable();
24 | }
25 | })()
26 | );
27 |
28 | // Tell the active service worker to take control of the page immediately.
29 | self.clients.claim();
30 | });
31 |
32 | self.addEventListener("fetch", (event) => {
33 | // Only call event.respondWith() if this is a navigation request
34 | // for an HTML page.
35 | if (event.request.mode === "navigate") {
36 | event.respondWith(
37 | (async () => {
38 | try {
39 | // First, try to use the navigation preload response if it's
40 | // supported.
41 | const preloadResponse = await event.preloadResponse;
42 | if (preloadResponse) {
43 | return preloadResponse;
44 | }
45 |
46 | // Always try the network first.
47 | const networkResponse = await fetch(event.request);
48 | return networkResponse;
49 | } catch (error) {
50 | // catch is only triggered if an exception is thrown, which is
51 | // likely due to a network error.
52 | // If fetch() returns a valid HTTP response with a response code in
53 | // the 4xx or 5xx range, the catch() will NOT be called.
54 | console.log("Fetch failed; returning offline page instead.", error);
55 |
56 | const cache = await caches.open(CACHE_NAME);
57 | const cachedResponse = await cache.match(OFFLINE_URL);
58 | return cachedResponse;
59 | }
60 | })()
61 | );
62 | }
63 |
64 | // If our if() condition is false, then this fetch handler won't
65 | // intercept the request. If there are any other fetch handlers
66 | // registered, they will get a chance to call event.respondWith().
67 | // If no fetch handlers call event.respondWith(), the request
68 | // will be handled by the browser as if there were no service
69 | // worker involvement.
70 | });
--------------------------------------------------------------------------------
/src/components/ViewCart.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import { Link } from 'react-router-dom';
3 | import { productsTest } from '../views/VirtualData';
4 | import SimpleProduct from './SimpleProduct';
5 | import RoutePaths from '../config';
6 | import { ProductType } from './ProductCart';
7 | import { cartKeyName, getItem, getTotal } from '../Utils/Generals';
8 | import { useSelector } from 'react-redux';
9 | import { RootState } from '../../store';
10 | import { useAppSelector } from '../hooks/redux-hooks';
11 |
12 | const ViewCart = ({setShow} : {setShow : Function}) => {
13 |
14 | const productCart = useAppSelector((state) => state.productCart);
15 |
16 | const hideCart = () => {
17 | setShow(false);
18 | document.body.classList.remove('overflow-hidden');
19 | }
20 |
21 | useEffect(() => {
22 |
23 | document.body.classList.add('overflow-hidden');
24 |
25 | return () => {
26 | document.body.classList.remove('overflow-hidden');
27 | };
28 | }, []);
29 |
30 |
31 | return (
32 | <>
33 |
34 |
21 |
23 |
50 |
35 |
36 |
42 |
48 |
49 | )
50 | }
51 |
52 | export default ViewCart
--------------------------------------------------------------------------------
/src/components/DateCount.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 |
3 | type OptionsType = {
4 | initialValue?: number;
5 | step?: number;
6 | min?: number,
7 | max?: number
8 | }
9 |
10 | const DateCount = () => {
11 |
12 | const expiredDay = 3 * 24 * 60 * 60 * 1000;
13 |
14 | const currentDate = new Date();
15 |
16 | const targetDate = new Date(currentDate.getTime() + expiredDay);
17 |
18 | const [remainingTime, setRemainingTime] = useState(calculateRemainingTime());
19 |
20 | useEffect(() => {
21 | const timer = setInterval(() => {
22 | setRemainingTime(calculateRemainingTime());
23 | }, 1000);
24 |
25 | return () => {
26 | clearInterval(timer);
27 | };
28 | }, []);
29 |
30 | function calculateRemainingTime() {
31 | const diff = targetDate.getTime() - new Date().getTime();
32 |
33 | const days = Math.floor(diff / (1000 * 60 * 60 * 24));
34 | const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
35 | const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
36 | const seconds = Math.floor((diff % (1000 * 60)) / 1000);
37 |
38 | return {
39 | days,
40 | hours,
41 | minutes,
42 | seconds,
43 | };
44 | }
45 |
46 | return (
47 | SHOPPING CART
36 |
37 | { productCart && productCart.length > 0 ?
38 | productCart.map(product =>
No Product in Cart.
40 | } 41 |42 |
43 |
47 | Sub Total : {'$' + getTotal()}
44 |VIEW CART
45 | CHECKOUT
46 |
48 |
69 | );
70 | };
71 |
72 | export default DateCount;
--------------------------------------------------------------------------------
/src/assets/css/index.css:
--------------------------------------------------------------------------------
1 | @import url('./fonts.css');
2 |
3 | :root {
4 |
5 | --fd-color-white: #fff;
6 | --fd-color-dark: #10111E;
7 | --fd-color-secondary: #0B2B3C;
8 | --fd-color-primary: #7BAE00;
9 | --fd-color-red: #DE0808;
10 | --fd-color-silver: #D9D9D9;
11 | --fd-color-yellow: #FFCC00;
12 | --fd-color-bg: #F2F3F9;
13 |
14 | }
15 |
16 | * {outline: none;}
17 | body { font-family: "Poppins Regular", sans-serif!important; margin: 0; padding: 0; color: var(--fd-color-white)!important; background-color: var(--fd-color-bg)!important; }
18 | ul, li {margin: 0!important; padding: 0!important; list-style: none;}
19 | a {color: #fff!important; text-decoration: none!important;}
20 | .fd-color-primary {color: var(--fd-color-primary)!important;} .fd-bg-primary {background-color: var(--fd-color-primary)}
21 | .fd-color-secondary {color: var(--fd-color-secondary);} .fd-bg-secondary {background-color: var(--fd-color-secondary)}
22 | .fd-hover-color-primary:hover { color: var(--fd-color-primary)!important} .fd-hover-bg-primary:hover { background-color: var(--fd-color-primary)!important; color: #fff!important}
23 | .fd-hover-border-primary:hover {border-color: var(--fd-color-primary)!important}
24 | .fd-btn { display: block; color: #fff; padding: 10px 20px; background-color: var(--fd-color-primary) }
25 | .fd-btn-red { display: block; color: #fff; padding: 8px; background-color: var(--fd-color-red) }
26 | .w-70 {width: 70%!important} .w-30 {width: 30%!important;} .justify-content-space-between {justify-content: space-between;}
27 | .f-content {line-height: 35px;} .dot {margin: 0 10px 10px 0!important;} .cursor-pointer {cursor: pointer}
28 | .fd-slideshow div, .fd-slideshow ul.slider { height: 100%;}
29 | .control-dots {text-align: start!important; left : 10%!important} .p-custom {padding: 5px 20px}
30 | .product-cart:hover .show {display: block!important} .z-1 { z-index: 1}
31 | .grid-3 { grid-template-columns: 3fr 3fr 3fr;} .grid-4 { grid-template-columns: 3fr 3fr 3fr 3fr;} .grid-2 { grid-template-columns: 6fr 6fr} .grid-0 { grid-template-columns: 12fr}
32 | .p-color {display: block; width : 20px; height : 20px; border-radius : 30px; cursor: pointer}
33 | .fd-nav-active{background-color: var(--fd-color-primary)!important; color : #fff!important}
34 | .cursor-disabled {cursor: no-drop!important;}
35 | .others-imgs {width : 80px; height : 80px;}
36 | .fd-underline { border-bottom: 3px solid var(--fd-color-primary);}
37 | /* .scroller {scrollbar-color: var(--fd-color-silver) var(--fd-color-dark); scrollbar-width: thin;} */
38 | .spinner { border: 10px solid #fff; border-top: 10px solid #fff; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; }
39 | @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
40 |
41 | @media (min-width: 992px) {
42 | .grid-lg-3 { grid-template-columns: 3fr 3fr 3fr!important;}
43 | .grid-lg-4 { grid-template-columns: 3fr 3fr 3fr 3fr!important;}
44 | .grid-lg-2 { grid-template-columns: 6fr 6fr!important}
45 | .grid-lg-0 { grid-template-columns: 12fr!important}
46 |
47 | }
--------------------------------------------------------------------------------
/src/components/Admin/CustomersMain.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Swal from 'sweetalert2';
3 | import { useDeleteUserMutation, useGetAllUsersQuery } from '../../store/apiquery/usersApiSlice';
4 | import Spinner from '../Spinner';
5 |
6 | const ListOfCustomers = () => {
7 |
8 | let count = 0;
9 |
10 | const { isLoading, data: customersList, isSuccess, isError } = useGetAllUsersQuery('api/users');
11 | const [deleteCustomer, deletedResult] = useDeleteUserMutation();
12 |
13 | const deleteItem = (id: number) => {
14 | Swal.fire({
15 | title: 'Are you sure?',
16 | text: "Are you sure to delete this customer ?",
17 | icon: 'warning',
18 | showCancelButton: true,
19 | confirmButtonColor: '#3085d6',
20 | cancelButtonColor: '#d33',
21 | confirmButtonText: 'Yes, delete it!'
22 | }).then((r) => {
23 | if (r.isConfirmed) {
24 | deleteCustomer(id);
25 | }
26 | });
27 | }
28 |
29 | let content: React.ReactNode;
30 |
31 | content = isLoading || isError
32 | ? null
33 | : isSuccess
34 | ? customersList['data'].map((customer: any) => {
35 |
36 | return (
37 |
49 | -{remainingTime.days}
50 |
51 | DAYS 52 |
53 | 51 | DAYS 52 |
54 | -{remainingTime.hours}
55 |
56 | HOURS 57 |
58 | 56 | HOURS 57 |
59 | -{remainingTime.minutes}
60 |
61 | MINUTES 62 |
63 | 61 | MINUTES 62 |
64 | -{remainingTime.seconds}
65 |
66 | SEC 67 |
68 | 66 | SEC 67 |
61 |
62 |
63 |
77 |
:
78 | | N° | 65 |FIRSTNAME | 66 |LASTNAME | 67 |ADDRESS | 69 |TOTAL ORDERS | 70 |ACTION | 71 |
|---|
85 |
90 | )
91 | }
92 |
93 | export default CustomersMain
--------------------------------------------------------------------------------
/src/views/Admin/AdminPanel.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import AdminHeader from '../../components/Admin/AdminHeader'
3 | import AdminFooter from '../../components/Admin/AdminFooter'
4 | import { Link, useNavigate } from 'react-router-dom'
5 | import { removeItem, toggleLinkClass } from '../../Utils/Generals'
6 | import RoutePaths from '../../config'
7 | import Swal from 'sweetalert2'
8 |
9 |
10 | const AdminPanel = ({ currentComponent }: { currentComponent: React.ReactNode }) => {
11 |
12 | useEffect(() => {
13 |
14 | document.querySelectorAll('html,body, #root').forEach((e) => e.classList.add('h-100', 'overflow-hidden'));
15 |
16 | return () => {
17 | document.querySelectorAll('html,body, #root').forEach((e) => e.classList.remove('h-100', 'overflow-hidden'));
18 | }
19 | }, [])
20 |
21 | const navigate = useNavigate()
22 |
23 | const logoutUser = (e: React.SyntheticEvent) => {
24 | e.preventDefault();
25 | Swal.fire({
26 | title: 'Are you sure?',
27 | text: "Are you sure to logout ?",
28 | icon: 'warning',
29 | showCancelButton: true,
30 | confirmButtonColor: '#3085d6',
31 | cancelButtonColor: '#d33',
32 | confirmButtonText: 'Yes, Logout it!'
33 | }).then((r) => {
34 | if (r.isConfirmed) {
35 | removeItem(RoutePaths.token);
36 | removeItem('user');
37 | // dispatch(logoutCurrentUser)
38 | navigate(RoutePaths.home)
39 | }
40 | })
41 | }
42 |
43 | return (
44 | <>
45 | List of Customers
86 |
87 |
89 |
46 |
64 |
65 | )
66 | }
67 |
68 | export default AdminPanel
--------------------------------------------------------------------------------
/src/components/BlogDetails.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { BlogType } from './Blog'
3 | import Tags, { Tag } from './Tags'
4 | import { tags } from '../views/VirtualData'
5 | import { SocialsNetworks } from './SocialsNetworks'
6 |
7 | const BlogDetails = (props : BlogType) => {
8 | return (
9 |
48 |
58 |
62 |
59 | {currentComponent}
60 |
61 |
10 |
11 |
40 | )
41 | }
42 |
43 | export default BlogDetails
--------------------------------------------------------------------------------
/src/views/ContactUs.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Header from './includes/Header'
3 | import Banner from '../components/Banner'
4 | import Footer from './includes/Footer'
5 |
6 | const ContactUs = () => {
7 |
8 |
9 | return (
10 | <>
11 |
12 |
14 | {props.date}
13 | {props.title}
15 |
16 |
32 | 17 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, asperiores veniam nam recusandae in fuga porro suscipit cupiditate repudiandae possimus quisquam? A, ullam? In veritatis veniam possimus laboriosam, expedita quo! 18 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente adipisci vitae, incidunt minus optio odit atque hic, eum cumque autem architecto quam corrupti, aliquam cum sed! Impedit temporibus ipsum eum! 19 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque nisi esse quibusdam dicta minima rerum doloribus, nihil dolorum ipsum vel numquam totam animi iure quas. Sunt doloribus voluptas quisquam sapiente. 20 |
21 |22 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, asperiores veniam nam recusandae in fuga porro suscipit cupiditate repudiandae possimus quisquam? A, ullam? In veritatis veniam possimus laboriosam, expedita quo! 23 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente adipisci vitae, incidunt minus optio odit atque hic, eum cumque autem architecto quam corrupti, aliquam cum sed! Impedit temporibus ipsum eum! 24 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque nisi esse quibusdam dicta minima rerum doloribus, nihil dolorum ipsum vel numquam totam animi iure quas. Sunt doloribus voluptas quisquam sapiente. 25 |
26 |27 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, asperiores veniam nam recusandae in fuga porro suscipit cupiditate repudiandae possimus quisquam? A, ullam? In veritatis veniam possimus laboriosam, expedita quo! 28 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente adipisci vitae, incidunt minus optio odit atque hic, eum cumque autem architecto quam corrupti, aliquam cum sed! Impedit temporibus ipsum eum! 29 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque nisi esse quibusdam dicta minima rerum doloribus, nihil dolorum ipsum vel numquam totam animi iure quas. Sunt doloribus voluptas quisquam sapiente. 30 |
31 |
33 |
35 | Tags :{ tags.map((tag) =>
34 |
36 |
39 | Share
37 |
15 |
49 |
50 |
51 |
52 | )
53 | }
54 |
55 | export default ContactUs
--------------------------------------------------------------------------------
/src/views/WishList.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, ReducerState, useEffect, useState } from 'react'
2 | import Footer from './includes/Footer';
3 | import Header from './includes/Header';
4 | import Banner from '../components/Banner';
5 | import { productsTest } from './VirtualData';
6 | import AddToCart from '../components/AddToCart';
7 | import { getItem,link,wishlistKeyName } from '../Utils/Generals';
8 | import { ProductType } from '../components/ProductCart';
9 | import { useSelector } from 'react-redux';
10 | import { deleteProductInWishlist } from '../store/productSlice';
11 | import { useDispatch } from 'react-redux';
12 | import { useAppDispatch, useAppSelector } from '../hooks/redux-hooks';
13 |
14 |
15 | const WishList: FC = () => {
16 |
17 | const dispatch = useAppDispatch();
18 |
19 | let wishlist : Array
16 |
45 | Get In Touch
17 | 44 |
46 |
47 |
48 |
26 |
62 |
63 |
64 | )
65 | }
66 |
67 | export default WishList
--------------------------------------------------------------------------------
/src/components/Admin/DashMain.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useGetStartisticsQuery } from '../../store/apiquery/usersApiSlice'
3 | import Spinner from '../Spinner';
4 |
5 | const DashMain = () => {
6 |
7 | const { data: starts, isLoading } = useGetStartisticsQuery('api/users');
8 |
9 | const format = (nb : number |string, lenght : number = 2) => {
10 | const value = nb.toString();
11 | return value.padStart(lenght, "0");
12 | }
13 |
14 | return (
15 |
27 |
28 |
29 |
59 |
60 |
61 | | IMAGE | 31 |PRODUCT NAME | 32 |PRICE | 33 |STOCK STATUS | 34 |ADD TO CART | 35 |ACTION | 36 |
|---|---|---|---|---|---|
| {product.name} | 45 |{product.price} | 46 |{"In Stock"} | 47 |dispatch(deleteProductInWishlist(product))} 50 | > | 51 |||
| You have not a product in whilist | 55 |
16 |
61 | )
62 | }
63 |
64 | export default DashMain
--------------------------------------------------------------------------------
/src/Utils/Generals.ts:
--------------------------------------------------------------------------------
1 | import { useLocation, useNavigate } from 'react-router-dom'
2 | import { useAppSelector } from '../hooks/redux-hooks';
3 | import RoutePaths from '../config';
4 | import { ProductType } from '../components/ProductCart';
5 | import Swal from 'sweetalert2';
6 | import { SyntheticEvent } from 'react';
7 |
8 | // export const BASE_URL = 'http://localhost:8000/api/'; // BASE URL FOR API FETCHING
9 | export const BASE_URL = 'https://friedshop.username-blakvghost.com/api'; // BASE URL FOR API FETCHING
10 |
11 | export const BASE_STORAGE_URL = 'https://friedshop.username-blakvghost.com/storage/'; // BASE URL FOR FETCHING MEDIA (image, video, etc.)
12 | // export const BASE_STORAGE_URL = 'http://localhost:8000/storage/'; // BASE URL FOR FETCHING MEDIA (image, video, etc.)
13 |
14 | const active = "d-block p-3 fd-nav-active"; // WHERE MENU IS ACTIVE CLASS
15 |
16 | const inactive = "d-block p-3 text-black"; // WHERE MENU IS NOT ACTIVE CLASS
17 |
18 | export const cartKeyName = 'fd_shoppingcart'; // CART KEY NAME FOR LOCAL STORAGE
19 |
20 | export const wishlistKeyName = 'fd_wishlist'; // WISHLIST KEY NAME FOR LOCAL STORAGE
21 |
22 | export type User = {
23 |
24 | id?: number,
25 | firstname?: string,
26 | lastname?: string,
27 | email?: string,
28 | phone?: string,
29 | address?: string,
30 | password?: string,
31 | password_confirmation?: string,
32 | }
33 |
34 | export const toggleLinkClass = (path : string, activeClass : string = active, inactiveClass : string = inactive) => {
35 |
36 | const currentLink = useLocation().pathname;
37 |
38 | return currentLink === path ? activeClass : inactiveClass
39 |
40 | }
41 |
42 |
43 | export const getItem = (keymane : string) => {
44 |
45 | return localStorage.getItem(keymane)
46 | }
47 |
48 |
49 | export const setItem = (keyname : string, value : string | Object) => {
50 |
51 | return localStorage.setItem(keyname, JSON.stringify(value));
52 |
53 | }
54 |
55 | export const removeItem = (keyname : string) => {
56 |
57 | return localStorage.removeItem(keyname);
58 |
59 | }
60 |
61 |
62 | export const getTotal = () => {
63 |
64 | const state = useAppSelector((state) => state.productCart);
65 |
66 | const total = state.reduce((a, b) => a + (b.price * (b.quantity || 1)), 0);
67 |
68 | return total;
69 |
70 | }
71 |
72 | export const link = (url : string) : string => BASE_STORAGE_URL + url;
73 |
74 | export const checkLogin = () => {
75 |
76 | const isLogged = localStorage.getItem(RoutePaths.token);
77 | return !!isLogged;
78 | }
79 |
80 | type CheckOut = {product_id : number, quantity? : number};
81 |
82 | export const buildCheckoutData = () => {
83 |
84 | const products = useAppSelector((state) => state.productCart);
85 | const user : User = useAppSelector((state) => state.user)
86 |
87 | let checkoutData : CheckOut[] = [];
88 |
89 | products.forEach((product : ProductType) => {
90 | checkoutData.push({
91 | product_id: product.id,
92 | quantity: product.quantity || 1,
93 | })
94 | })
95 |
96 | return {user_id: user.id, commands : checkoutData};
97 | }
98 |
99 | export const inject_headers = () => {
100 |
101 | const _token = getItem(RoutePaths.token) || "";
102 |
103 | const tokenWithoutQuotes = _token.replace('Bearer ', '').replace(/"/g, '');
104 |
105 | const headers = new Headers();
106 |
107 | headers.set('Accept', 'application/json');
108 | headers.set('Authorization', `Bearer ${tokenWithoutQuotes}`);
109 |
110 | return headers;
111 | }
--------------------------------------------------------------------------------
/src/components/ViewSearch.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | import SearchCategory from './SearchCategory';
5 | import { useSearchProductQuery } from '../store/apiquery/productApiSlice';
6 | import { ProductType } from './ProductCart';
7 | import Spinner from './Spinner';
8 |
9 | const ViewSearch = ({ setShow }: { setShow: Function }) => {
10 | const [products, setProducts] = useStateDashboard
17 | { 18 | !isLoading ? 19 |
20 |
:
53 |
54 |
21 |
24 | {format(starts.data.products)}
22 |Total Products
23 |
25 |
28 | {format(starts.data.customers)}
26 |Total Customers
27 |
29 |
32 | {format(starts.data.products)}
30 |Popular Products
31 |
33 |
36 | {format(starts.data.categories)}
34 |Categories
35 |
37 |
40 | {format(starts.data.slides)}
38 |SLIDES
39 |
41 |
44 | 03
42 |Total Posts
43 |
45 |
48 | {format(starts.data.admins)}
46 |Admins
47 |
49 |
52 | {format(starts.data.categories)}
50 |Categories
51 |
58 |
60 | From your admin dashboard you can view your popular products, manage your account and others, and edit your password and account details
59 |
44 |
45 |
78 |
79 | );
80 | };
81 |
82 | export default ViewSearch;
83 |
--------------------------------------------------------------------------------
/src/views/Shop.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import Header from './includes/Header'
3 | import Footer from './includes/Footer'
4 | import Banner from '../components/Banner'
5 | import { Category, PopularProducts, SortProducts } from './includes/Section'
6 | import SearchBar from '../components/SearchBar'
7 | import { CategoryType } from './VirtualData'
8 | import Tags from '../components/Tags'
9 | import Archives from '../components/Archives'
10 | import { useGetAllCategoriesQuery } from '../store/apiquery/categoryApiSlice';
11 | import Spinner from '../components/Spinner'
12 |
13 |
14 | const Shop = () => {
15 |
16 | const {isLoading, data : categoryList, isError } = useGetAllCategoriesQuery("api/categories");
17 |
18 |
19 | const [type, setType] = useState('grid');
20 |
21 | const changeTypeToGrid = () => { setType('grid'); }
22 | const changeTypeToList = () => { setType('list'); }
23 |
24 | return (
25 | <>
26 | SEARCH
45 |
46 |
53 |
47 |
52 |
48 |
49 |
50 |
51 |
54 | {searchQuery && !loading ? (
55 | products.map((product) => (
56 |
60 | {product.name}${product.price}
61 |
62 | ))
63 | ) : (
64 | searchQuery != "" &&
67 |
68 |
77 |
69 |
72 | Recent Searchs
70 |
73 |
76 | Popular Searchs
74 |
29 |
77 |
78 |
79 | )
80 | }
81 |
82 | export default Shop
--------------------------------------------------------------------------------
/src/store/productSlice.ts:
--------------------------------------------------------------------------------
1 | import { PayloadAction, createSlice } from "@reduxjs/toolkit";
2 | import { cartKeyName, getItem, setItem, wishlistKeyName } from "../Utils/Generals";
3 | import { ProductType } from "../components/ProductCart";
4 |
5 |
6 | export const productSlice = createSlice({
7 |
8 | name : 'products',
9 |
10 | initialState : Array
30 |
54 |
76 |
31 |
52 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | Showing 1-17 of 18 Result
40 | 51 |
29 | {!props.reduction ?
30 | SALE
31 | :
32 | {props.reduction} %
33 | }
34 |
58 |
59 | :
60 |
61 |
62 |
35 |
57 |
36 |
37 |
38 |
39 |
56 |
40 | {props.name}
41 |
42 |
43 |
45 |
46 |
49 | ${props.price}
47 |${props.old_price}
48 |{props.desc}
50 |
51 |
52 |
55 |
53 |
63 |
85 | )
86 |
87 | }
88 |
89 |
90 |
91 | export default ProductCart
--------------------------------------------------------------------------------
/src/assets/fonts/OFL.txt:
--------------------------------------------------------------------------------
1 | Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
2 |
3 | This Font Software is licensed under the SIL Open Font License, Version 1.1.
4 | This license is copied below, and is also available with a FAQ at:
5 | http://scripts.sil.org/OFL
6 |
7 |
8 | -----------------------------------------------------------
9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10 | -----------------------------------------------------------
11 |
12 | PREAMBLE
13 | The goals of the Open Font License (OFL) are to stimulate worldwide
14 | development of collaborative font projects, to support the font creation
15 | efforts of academic and linguistic communities, and to provide a free and
16 | open framework in which fonts may be shared and improved in partnership
17 | with others.
18 |
19 | The OFL allows the licensed fonts to be used, studied, modified and
20 | redistributed freely as long as they are not sold by themselves. The
21 | fonts, including any derivative works, can be bundled, embedded,
22 | redistributed and/or sold with any software provided that any reserved
23 | names are not used by derivative works. The fonts and derivatives,
24 | however, cannot be released under any other type of license. The
25 | requirement for fonts to remain under this license does not apply
26 | to any document created using the fonts or their derivatives.
27 |
28 | DEFINITIONS
29 | "Font Software" refers to the set of files released by the Copyright
30 | Holder(s) under this license and clearly marked as such. This may
31 | include source files, build scripts and documentation.
32 |
33 | "Reserved Font Name" refers to any names specified as such after the
34 | copyright statement(s).
35 |
36 | "Original Version" refers to the collection of Font Software components as
37 | distributed by the Copyright Holder(s).
38 |
39 | "Modified Version" refers to any derivative made by adding to, deleting,
40 | or substituting -- in part or in whole -- any of the components of the
41 | Original Version, by changing formats or by porting the Font Software to a
42 | new environment.
43 |
44 | "Author" refers to any designer, engineer, programmer, technical
45 | writer or other person who contributed to the Font Software.
46 |
47 | PERMISSION & CONDITIONS
48 | Permission is hereby granted, free of charge, to any person obtaining
49 | a copy of the Font Software, to use, study, copy, merge, embed, modify,
50 | redistribute, and sell modified and unmodified copies of the Font
51 | Software, subject to the following conditions:
52 |
53 | 1) Neither the Font Software nor any of its individual components,
54 | in Original or Modified Versions, may be sold by itself.
55 |
56 | 2) Original or Modified Versions of the Font Software may be bundled,
57 | redistributed and/or sold with any software, provided that each copy
58 | contains the above copyright notice and this license. These can be
59 | included either as stand-alone text files, human-readable headers or
60 | in the appropriate machine-readable metadata fields within text or
61 | binary files as long as those fields can be easily viewed by the user.
62 |
63 | 3) No Modified Version of the Font Software may use the Reserved Font
64 | Name(s) unless explicit written permission is granted by the corresponding
65 | Copyright Holder. This restriction only applies to the primary font name as
66 | presented to the users.
67 |
68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69 | Software shall not be used to promote, endorse or advertise any
70 | Modified Version, except to acknowledge the contribution(s) of the
71 | Copyright Holder(s) and the Author(s) or with their explicit written
72 | permission.
73 |
74 | 5) The Font Software, modified or unmodified, in part or in whole,
75 | must be distributed entirely under this license, and must not be
76 | distributed under any other license. The requirement for fonts to
77 | remain under this license does not apply to any document created
78 | using the Font Software.
79 |
80 | TERMINATION
81 | This license becomes null and void if any of the above conditions are
82 | not met.
83 |
84 | DISCLAIMER
85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93 | OTHER DEALINGS IN THE FONT SOFTWARE.
94 |
--------------------------------------------------------------------------------
/src/views/includes/Footer.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import NewsLetter from '../../components/NewsLetter'
3 | import { SocialsNetworks } from '../../components/SocialsNetworks'
4 | import { Link } from 'react-router-dom'
5 | import RoutePaths from '../../config'
6 |
7 | const Footer = () => {
8 |
9 | return (
10 |
80 | )
81 | }
82 |
83 | export default Footer
--------------------------------------------------------------------------------
/src/views/ShoppingCart.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import Header from './includes/Header'
3 | import Banner from '../components/Banner'
4 | import Footer from './includes/Footer'
5 | import { productsTest } from './VirtualData'
6 | import NumberCount from '../components/NumberCount'
7 | import { Link } from 'react-router-dom'
8 | import RoutePaths from '../config'
9 | import { ProductType } from '../components/ProductCart'
10 | import { cartKeyName, getItem, getTotal, link } from '../Utils/Generals'
11 | import { useSelector } from 'react-redux'
12 | import { RootState } from '../../store'
13 | import { deleteProductInCart } from '../store/productSlice'
14 | import { useDispatch } from 'react-redux'
15 | import { useAppDispatch, useAppSelector } from '../hooks/redux-hooks'
16 |
17 | const ShoppingCart = () => {
18 |
19 | const shopping : Array
64 |
65 |
69 | {!props.reduction ? SALE :
70 | {props.reduction}
71 | }
72 |
66 |
68 |
75 | {props.name}
76 |
77 |
78 |
80 |
81 |
84 | ${props.price}
82 |${props.old_price}
83 |
30 |
95 |
96 |
97 | )
98 | }
99 |
100 | export default ShoppingCart
--------------------------------------------------------------------------------
/src/components/Admin/BlogMain.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { blogInfo } from '../../views/VirtualData'
3 | import { BlogType } from '../Blog'
4 |
5 |
6 | const AddOrEditBlog = ({ blog }: { blog: null | BlogType }) => {
7 |
8 |
9 | if (!blog) {
10 |
11 | return (
12 |
33 | )
34 | }
35 |
36 | return (
37 |
38 |
61 | )
62 |
63 | }
64 |
65 |
66 | const ListOfBlog = ({ setBlog, setPage }: { setBlog: Function, setPage: Function }) => {
67 |
68 | const parseBlog = (blog: BlogType) => {
69 | setBlog(blog);
70 | setPage('add');
71 | }
72 | let count = 0;
73 |
74 | return (
75 |
31 |
32 |
33 |
65 |
66 | | IMAGE | 35 |PRODUCT NAME | 36 |UNTIL PRICE | 37 |QTY | 38 |SUB TOTAL | 39 |ACTION | 40 |
|---|---|---|---|---|---|
| {product.name} | 50 |{product.price} | 51 |$250 | 52 |dispatch(deleteProductInCart(product))} 55 | > | 56 |||
| You have not a product in shopping cart | 61 |
67 |
70 | {shopping && shopping.length > 0 ?
71 | CONTINUE SHOPPING
68 | UPDATE CART
69 |
72 |
83 |
: null
93 | }
94 |
84 |
86 |
89 |
92 | Order Total
85 |86 |
Sutotal :{total}
87 | Taxes :$0.00
88 | 89 |
Grand Total:{'$' + total}
90 | PROCEED CHECKOUT
91 |
76 |
77 |
78 |
106 |
107 | );
108 | }
109 |
110 | const BlogMain = () => {
111 |
112 | const [page, setPage] = useState('list');
113 | const [currentBlog, setCurrentBlog] = useState(null);
114 |
115 | const changeToList = () => { setPage('add'); setCurrentBlog(null) }
116 | const changeToAdd = () => { setPage('list'); }
117 |
118 | return (
119 | | N° | 80 |TITLE | 81 |SUMMARY | 82 |DATE | 83 |ACTION | 84 |
|---|---|---|---|---|
| {++count} | 92 |{blog.title} | 93 |{blog.content} | 94 |{blog.date} | 95 |96 | parseBlog(blog)}> 97 | parseBlog(blog)}> 98 | 99 | | 100 |
120 |
132 | )
133 | }
134 |
135 | export default BlogMain
--------------------------------------------------------------------------------
/src/views/includes/Header.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, SyntheticEvent, useEffect, useRef, useState } from 'react'
2 | import { Link, Route } from 'react-router-dom'
3 | import { SocialsNetworks } from '../../components/SocialsNetworks'
4 | import ViewCart from '../../components/ViewCart'
5 | import ViewSearch from '../../components/ViewSearch'
6 | import Lang from '../../components/Lang'
7 | import RoutePaths from '../../config'
8 | import { cartKeyName, getItem, toggleLinkClass, wishlistKeyName } from '../../Utils/Generals'
9 | import { ProductType } from '../../components/ProductCart'
10 | import { fillProductsList, fillShoppingCart, fillWishList } from '../../store/productSlice'
11 | import { useAppDispatch, useAppSelector } from '../../hooks/redux-hooks'
12 | import { useGetAllProductsQuery } from '../../store/apiquery/productApiSlice'
13 | import { setUser } from '../../store/userSlice'
14 | import { useGetUserQuery } from '../../store/apiquery/usersApiSlice'
15 |
16 | const navsBar = [
17 | { path: RoutePaths.home, name: 'Home' },
18 | { path: RoutePaths.shop, name: 'Shop' },
19 | { path: RoutePaths.blog, name: 'Blog' },
20 | { path: RoutePaths.contact, name: 'Contact US' },
21 | { path: RoutePaths.team, name: 'Teams' },
22 | ];
23 |
24 | const Header: FC = () => {
25 |
26 |
27 | const wishlist: ProductType[] = useAppSelector((state) => state.productWishlist);
28 | const shoppingcart: ProductType[] = useAppSelector((state) => state.productCart);
29 |
30 | const dispatch = useAppDispatch();
31 |
32 | const [showCart, setShowCart] = useState(false);
33 | const [showSearch, setShowSearch] = useState(false);
34 |
35 | const isLogged = getItem(RoutePaths.token);
36 | const user = !isLogged ? null : JSON.parse(getItem('user') || '');
37 | const { data } = !user ? { data: null } : useGetUserQuery(user.id);
38 |
39 | useEffect(() => {
40 |
41 | if (data) {
42 | dispatch(setUser(data.data));
43 | }
44 | }
45 | , [data]);
46 |
47 | useEffect(() => {
48 |
49 | const wishList = getItem(wishlistKeyName);
50 | const shoppingList = getItem(cartKeyName);
51 | wishList && dispatch(fillWishList(wishList));
52 | shoppingList && dispatch(fillShoppingCart(shoppingList));
53 |
54 | }, [])
55 |
56 | const viewCart = (e: SyntheticEvent) => {
57 | e.preventDefault();
58 | setShowCart(true);
59 | };
60 |
61 | const viewSearch = (e: SyntheticEvent) => {
62 | e.preventDefault();
63 | setShowSearch(true);
64 | };
65 |
66 | return (<>
67 | BLog
121 | 128 |
129 | {page === 'list' ?
131 |
68 |
112 | { showCart?
69 |
78 |
70 | elfriedv16@gmail.com
71 | Cotonou, Bénin
72 |
73 |
74 |
77 |
79 |
98 |
110 |
111 |
31 |
86 |
129 |
130 |
131 | )
132 | }
133 |
134 | export default Checkout
--------------------------------------------------------------------------------
/src/components/Admin/AdminAccount.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react"
2 |
3 | const AddAccount = () => {
4 |
5 |
6 |
7 | return (
8 |
43 | )
44 | }
45 |
46 | const AdminDetails = () => {
47 |
48 | const [formState, setFormState] = useState('disabled');
49 |
50 |
51 | const activeForm = () => {
52 | const inputs = document.querySelectorAll
87 |
128 |
88 |
89 |
95 | Checkout Summary
89 |
90 |
91 |
92 |
93 |
94 | Sutotal :${getTotal()}
91 |
Coupon :$0.00
92 |
Total :${getTotal()}
93 |
96 |
97 | 126 |
127 | Payment Method
97 | 126 |
103 |
104 |
105 |
130 |
131 | );
132 | }
133 |
134 | const AdminAccount = () => {
135 |
136 | const [page, setPage] = useState('list');
137 |
138 | const changeToList = () => { setPage('add'); }
139 | const changeToAdd = () => { setPage('list'); }
140 |
141 | return (
142 | | N° | 107 |LASTNAME | 108 |FIRSTNAME | 109 |PHONE | 111 ||
|---|---|---|---|---|
| {++count} | 116 |KIDJE | 117 |Fortunatus | 118 |elfriedv16@gmail.com | 119 |96457545 | 120 |
| {++count} | 123 |ALASSANE | 124 |Kabirou | 125 |kabirou2001@gmail.com | 126 |51541210 | 127 |
143 |
164 | )
165 | }
166 |
167 | export default AdminAccount
--------------------------------------------------------------------------------
/src/components/ProductDetails.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Reviews from './Reviews'
3 | import NumberCount from './NumberCount'
4 | import { PopularProducts } from '../views/includes/Section'
5 | import { Carousel } from 'react-responsive-carousel'
6 | import AddToCart from './AddToCart'
7 | import { ProductType } from './ProductCart'
8 | import { link } from '../Utils/Generals';
9 | import { Link } from 'react-router-dom'
10 | import RoutePaths from '../config'
11 |
12 | const ProductDetails = ({product} : {product : ProductType}) => {
13 |
14 | return (
15 | Profile
144 |
145 | {
146 | page === 'list' ?
147 | ADD ACCOUNT :
148 | PROFILE
149 | }
150 |
151 | {page === 'list' ?
152 | <>
153 |
155 |
163 | 155 |
List Of All Admins
156 |
16 |
91 | )
92 | }
93 |
94 | export default ProductDetails
--------------------------------------------------------------------------------
/src/components/Admin/CategoryMain.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, SyntheticEvent } from 'react'
2 | import { CategoryType } from '../../views/VirtualData'
3 | import { useGetAllCategoriesQuery,useUpdateCategoryMutation, useCreateCategoryMutation, useDeleteCategoryMutation } from "../../store/apiquery/categoryApiSlice"
4 | import Swal from 'sweetalert2';
5 | import Spinner from '../Spinner';
6 | import { HandleResult } from '../HandleResult';
7 |
8 |
9 | const UpdateCategory = ({category}: {category : CategoryType}) => {
10 |
11 | const [updateData, setUpdateData] = useState(category);
12 | const [updateCategory, udpateResult] = useUpdateCategoryMutation();
13 |
14 | const handleSubmit = (e: SyntheticEvent) => {
15 |
16 | e.preventDefault();
17 | const form = new FormData(e.target as HTMLFormElement);
18 | form.append('_method', 'patch');
19 | updateCategory(form);
20 |
21 | }
22 |
23 | const handleUpdateValue = (e: SyntheticEvent) => {
24 |
25 | const target = e.target as HTMLInputElement;
26 | setUpdateData(prevState => ({ ...prevState, [target.name]: target.value }));
27 |
28 | }
29 |
30 | return (
31 |
54 | )
55 |
56 |
57 | }
58 |
59 | const AddOrEditCategory = ({ category }: { category: null | CategoryType }) => {
60 |
61 | const [data, setData] = useState({});
62 |
63 | const [createCategory, result] = useCreateCategoryMutation();
64 |
65 |
66 | const handleSubmit = (e: SyntheticEvent) => {
67 |
68 | e.preventDefault();
69 |
70 | const form = new FormData(e.target as HTMLFormElement);
71 | createCategory(form);
72 |
73 | }
74 |
75 | const handleValue = (e: SyntheticEvent) => {
76 |
77 | const target = e.target as HTMLInputElement;
78 | setData(values => ({ ...values, [target.name]: target.value }));
79 |
80 | }
81 |
82 |
83 | if (!category) {
84 |
85 | return (
86 |
108 | )
109 | }
110 |
111 | return
17 |
70 |
18 |
27 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
28 | (25 Reviews)
29 |
35 |
39 |
69 | {product.name}
30 |{product.desc}
31 |
32 |
${product.price}
33 |${product.old_price}
34 |35 |
36 |
Categories :
37 | Cover, Seat, Car, Parts
38 | 39 |
40 |
46 | Colors :
41 |
42 |
43 |
44 |
45 |
47 |
55 | SIZE :
48 |
49 | Small
50 | Medium
51 | Large
52 | Extra Large
53 |
54 |
56 |
59 |
68 |
71 |
76 |
83 | 76 |
77 |
82 |
78 |
81 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda iste debitis eum quis vitae dolores sequi, quo vel ratione veniam. Placeat, quos! Consequatur possimus voluptas dolore dignissimos aperiam explicabo sed. Id optio, sapiente quo accusamus quae vel nesciunt adipisci nam eos. Rerum, alias adipisci. Nesciunt esse doloremque odit! Molestiae quia hic maxime voluptas, quos modi. Veniam harum aspernatur incidunt totam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda iste debitis eum quis vitae dolores sequi, quo vel ratione veniam. Placeat, quos! Consequatur possimus voluptas dolore dignissimos aperiam explicabo sed. Id optio, sapiente quo accusamus quae vel nesciunt adipisci nam eos. Rerum, alias adipisci. Nesciunt esse doloremque odit! Molestiae quia hic maxime voluptas, quos modi. Veniam harum aspernatur incidunt totam!
79 |Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda iste debitis eum quis vitae dolores sequi, quo vel ratione veniam. Placeat, quos! Consequatur possimus voluptas dolore dignissimos aperiam explicabo sed. Id optio, sapiente quo accusamus quae vel nesciunt adipisci nam eos. Rerum, alias adipisci. Nesciunt esse doloremque odit! Molestiae quia hic maxime voluptas, quos modi. Veniam harum aspernatur incidunt totam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda iste debitis eum quis vitae dolores sequi, quo vel ratione veniam. Placeat, quos! Consequatur possimus voluptas dolore dignissimos aperiam explicabo sed. Id optio, sapiente quo accusamus quae vel nesciunt adipisci nam eos. Rerum, alias adipisci. Nesciunt esse doloremque odit! Molestiae quia hic maxime voluptas, quos modi. Veniam harum aspernatur incidunt totam!
80 |
84 |
90 |
85 |
88 | Related Products
86 |View All
87 |
165 |
166 |
167 |
180 |
: | N° | 169 |NAME | 170 |DESCRIPTION | 171 |ACTION | 172 |
|---|
193 |
206 | )
207 | }
208 |
209 | export default CategoryMain
--------------------------------------------------------------------------------
/src/views/VirtualData.tsx:
--------------------------------------------------------------------------------
1 |
2 | export type CategoryType = {
3 | id: string | number,
4 | name: string,
5 | desc?: string,
6 | description? : string,
7 |
8 | };
9 |
10 | export type Slide = {
11 | id: number,
12 | image : string,
13 | text: string,
14 | }
15 |
16 | export const apiSlidesInfo = [
17 | { url: '/img/slider3.jpg', alt: 'Banner 1', text: 'Text Slide 1' },
18 | { url: '/img/slider5.jpg', alt: 'Banner 2', text: 'Text Slide 2' },
19 | { url: '/img/slider6.jpg', alt: 'Banner 3', text: 'Text Slide 3' },
20 | { url: '/img/slider4.jpg', alt: 'Banner 3', text: 'Text Slide 4' },
21 | ];
22 |
23 | export const blogInfo = [
24 | {blod_id: 1, date : '21 Dec 2023', img : '/img/blog/1.jpg', title : 'How to manage your e-commerce shopify account ?', content : "Lorem ipsum dolor sit amet consectetur adipisicing elit ...", authorName : 'Elfried KIDJE', authorImg : '/img/author.jpg'},
25 | {blod_id: 2, date : '21 Dec 2023', img : '/img/blog/2.jpg', title : 'How to manage your e-commerce shopify account ?', content : "Lorem ipsum dolor sit amet consectetur adipisicing elit ...", authorName : 'Elfried KIDJE', authorImg : '/img/author.jpg'},
26 | {blod_id: 3, date : '21 Dec 2023', img : '/img/blog/3.jpg', title : 'How to manage your e-commerce shopify account ?', content : "Lorem ipsum dolor sit amet consectetur adipisicing elit ...", authorName : 'Elfried KIDJE', authorImg : '/img/author.jpg'}
27 |
28 | ];
29 |
30 | export const testimonialInfo = [
31 | {authorImg : '/img/1.png', text : "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed earum nemo, officia maiores corporis eveniet ...", authorName : 'Elfried KIDJE', rating : 5},
32 | {authorImg : '/img/1.png', text : "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed earum nemo, officia maiores corporis eveniet ...", authorName : 'Elfried Karl', rating : 5}
33 |
34 | ];
35 |
36 | export const productsTest = [
37 |
38 | {id : 1, img : '/img/product/1.png', reviews : 4, name: 'Product Name 1', price : 90, oldPrice : 100, desc : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos sequi magnam nisi earum, nihil consequuntur harum hic molestias nulla quasi voluptas quae dolor soluta, iusto explicabo, voluptatibus est exercitationem sit.' },
39 | {id : 2, img : '/img/product/2.png', reviews : 4, name: 'Product Name 2', price : 100, oldPrice : 150, reduction: '-33%', desc : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos sequi magnam nisi earum, nihil consequuntur harum hic molestias nulla quasi voluptas quae dolor soluta, iusto explicabo, voluptatibus est exercitationem sit.'},
40 | {id : 3, img : '/img/product/3.png', reviews : 4, name: 'Product Name 3', price : 120, oldPrice : 200, desc : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos sequi magnam nisi earum, nihil consequuntur harum hic molestias nulla quasi voluptas quae dolor soluta, iusto explicabo, voluptatibus est exercitationem sit.'},
41 | {id : 4, img : '/img/product/4.png', reviews : 4, name: 'Product Name 4', price : 120, oldPrice : 200, desc : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos sequi magnam nisi earum, nihil consequuntur harum hic molestias nulla quasi voluptas quae dolor soluta, iusto explicabo, voluptatibus est exercitationem sit.'},
42 | {id : 5, img : '/img/product/5.png', reviews : 4, name: 'Product Name 5', price : 120, oldPrice : 200, desc : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos sequi magnam nisi earum, nihil consequuntur harum hic molestias nulla quasi voluptas quae dolor soluta, iusto explicabo, voluptatibus est exercitationem sit.'},
43 | {id : 6, img : '/img/product/6.png', reviews : 4, name: 'Product Name 6', price : 120, oldPrice : 200, desc : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos sequi magnam nisi earum, nihil consequuntur harum hic molestias nulla quasi voluptas quae dolor soluta, iusto explicabo, voluptatibus est exercitationem sit.'},
44 | {id : 7, img : '/img/product/7.png', reviews : 4, name: 'Product Name 7', price : 120, oldPrice : 200, desc : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos sequi magnam nisi earum, nihil consequuntur harum hic molestias nulla quasi voluptas quae dolor soluta, iusto explicabo, voluptatibus est exercitationem sit.'},
45 | {id : 8, img : '/img/product/8.png', reviews : 4, name: 'Product Name 8', price : 120, oldPrice : 200, desc : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos sequi magnam nisi earum, nihil consequuntur harum hic molestias nulla quasi voluptas quae dolor soluta, iusto explicabo, voluptatibus est exercitationem sit.'},
46 |
47 | ]
48 |
49 | export const dailyTest = { id: 1, img : '/img/product/1.png', reviews : 4, name: 'Product Name 1', price : 90, old_price : 100, desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed earum nemo, officia maiores corporis eveniet ratione magnam facere voluptates consequuntur cumque.", total_quantity: 3
50 | }
51 |
52 |
53 |
54 | export const sortProduct = [
55 |
56 | {id : 1, img : '/img/product/8.png', reviews : 4, name: 'Fresh Red Seedless 1', price : 90, oldPrice : 100 },
57 | {id : 2, img : '/img/product/2.png', reviews : 4, name: 'Fresh Red Seedless 2', price : 100, oldPrice : 150, reduction: '-33%'},
58 | {id : 3, img : '/img/product/7.png', reviews : 4, name: 'Fresh Red Seedless 3', price : 120, oldPrice : 200 },
59 | {id : 4, img : '/img/product/4.png', reviews : 4, name: 'Fresh Red Seedless 4', price : 120, oldPrice : 200 },
60 | {id : 5, img : '/img/product/5.png', reviews : 4, name: 'Fresh Red Seedless 5', price : 120, oldPrice : 200 },
61 |
62 | ]
63 |
64 | export const apiCategory = [
65 | { id: 1, name: 'Vegetals And Fruits', description : 'lorem' },
66 | { id: 2, name: 'Fruits', description : 'lorem' },
67 | { id: 3, name: 'Oil And Vinegar', description : 'lorem' },
68 | { id: 4, name: 'Apple Juice', description : 'lorem' },
69 | { id: 5, name: 'Océan Food', description : 'lorem' },
70 | { id: 6, name: 'Butter & Eggs', description : 'lorem' },
71 | { id: 7, name: 'Fresh Meat', description : 'lorem' },
72 | ]
73 |
74 | export const archives = [
75 |
76 | { archive_id: 1, date: 'September 2021' },
77 | { archive_id: 2, date: 'October 2020' },
78 | { archive_id: 3, date: 'July 2019' },
79 | { archive_id: 4, date: 'September 2021' },
80 | { archive_id: 5, date: 'October 2020' },
81 | { archive_id: 6, date: 'July 2019' },
82 |
83 | ]
84 |
85 | export const tags = [
86 |
87 | { tag_id: 1, name: 'PASTA' },
88 | { tag_id: 2, name: 'RICE' },
89 | { tag_id: 3, name: 'JUICE' },
90 | { tag_id: 4, name: 'NATURAL' },
91 | { tag_id: 5, name: 'FOOD' },
92 | { tag_id: 6, name: 'GRADE' },
93 | { tag_id: 7, name: 'NATURAL' },
94 | { tag_id: 8, name: 'FOOD' },
95 | { tag_id: 9, name: 'GRADE' },
96 |
97 | ]
98 |
99 | export const teams = [
100 | {team_id : 1, img : '/img/team/1.jpg', name: 'Fortunatus KIDJE', role : 'Web Developer'},
101 | {team_id : 2, img : '/img/team/2.jpg', name: 'Fortunatus KIDJE', role : 'Designer'},
102 | {team_id : 3, img : '/img/team/3.jpg', name: 'Fortunatus KIDJE', role : 'Frontend Developer'},
103 | {team_id : 4, img : '/img/team/4.jpg', name: 'Fortunatus KIDJE', role : 'Backend Developer'},
104 | {team_id : 5, img : '/img/team/5.jpg', name: 'Fortunatus KIDJE', role : 'Project Manager'},
105 | {team_id : 6, img : '/img/team/6.jpg', name: 'Fortunatus KIDJE', role : 'DevOps'},
106 | ]
107 |
108 | export const searchData = [
109 | {search_id : 1, name : 'Food'},
110 | {search_id : 2, name : 'Glocery'},
111 | {search_id : 3, name : 'Heatlth'},
112 | {search_id : 4, name : 'Orange'},
113 | {search_id : 5, name : 'Junk'},
114 | {search_id : 6, name : 'Shopping'},
115 | {search_id : 7, name : 'Snack'},
116 | ]
117 |
118 | export const customers = [
119 | {lastname : 'John', firstname : 'Doe', email : 'john@doe.com', address : '123 Main Street'},
120 | {lastname : 'John', firstname : 'Doe', email : 'john@doe.com', address : '123 Main Street'},
121 | {lastname : 'John', firstname : 'Doe', email : 'john@doe.com', address : '123 Main Street'},
122 | {lastname : 'John', firstname : 'Doe', email : 'john@doe.com', address : '123 Main Street'},
123 | {lastname : 'John', firstname : 'Doe', email : 'john@doe.com', address : '123 Main Street'},
124 | ]
--------------------------------------------------------------------------------
Categories
194 |
195 | {
196 | page === 'list' ?
197 | ADD CATEGORY :
198 | CATEGORY LIST
199 | }
200 |
201 |
202 | {page === 'list' ?
205 |