Note: If you are publishing your website to Heroku, Render.com or any other hosting you probably need to follow other steps.
-);
+);
\ No newline at end of file
diff --git a/src/front/js/component/footer.js b/src/front/components/Footer.jsx
old mode 100755
new mode 100644
similarity index 57%
rename from src/front/js/component/footer.js
rename to src/front/components/Footer.jsx
index 670323e091..f06302dbd2
--- a/src/front/js/component/footer.js
+++ b/src/front/components/Footer.jsx
@@ -1,7 +1,8 @@
-import React, { Component } from "react";
-
export const Footer = () => (
+
+ Check the template documentation
Made with 4Geeks Academy
diff --git a/src/front/js/component/navbar.js b/src/front/components/Navbar.jsx
old mode 100755
new mode 100644
similarity index 93%
rename from src/front/js/component/navbar.js
rename to src/front/components/Navbar.jsx
index af4b01e334..30d43a2636
--- a/src/front/js/component/navbar.js
+++ b/src/front/components/Navbar.jsx
@@ -1,7 +1,7 @@
-import React from "react";
import { Link } from "react-router-dom";
export const Navbar = () => {
+
return (
@@ -16,4 +16,4 @@ export const Navbar = () => {
);
-};
+};
\ No newline at end of file
diff --git a/src/front/components/ScrollToTop.jsx b/src/front/components/ScrollToTop.jsx
new file mode 100644
index 0000000000..fe79dc5be2
--- /dev/null
+++ b/src/front/components/ScrollToTop.jsx
@@ -0,0 +1,26 @@
+import { useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+
+// This component allows the scroll to go to the beginning when changing the view,
+// otherwise it would remain in the position of the previous view.
+// Investigate more about this React behavior :D
+
+const ScrollToTop = ({ location, children }) => {
+ const prevLocation = useRef(location);
+
+ useEffect(() => {
+ if (location !== prevLocation.current) {
+ window.scrollTo(0, 0);
+ }
+ prevLocation.current = location;
+ }, [location]);
+
+ return children;
+};
+
+export default ScrollToTop;
+
+ScrollToTop.propTypes = {
+ location: PropTypes.object,
+ children: PropTypes.any
+};
\ No newline at end of file
diff --git a/src/front/hooks/useGlobalReducer.jsx b/src/front/hooks/useGlobalReducer.jsx
new file mode 100644
index 0000000000..6aeb9d768e
--- /dev/null
+++ b/src/front/hooks/useGlobalReducer.jsx
@@ -0,0 +1,24 @@
+// Import necessary hooks and functions from React.
+import { useContext, useReducer, createContext } from "react";
+import storeReducer, { initialStore } from "../store" // Import the reducer and the initial state.
+
+// Create a context to hold the global state of the application
+// We will call this global state the "store" to avoid confusion while using local states
+const StoreContext = createContext()
+
+// Define a provider component that encapsulates the store and warps it in a context provider to
+// broadcast the information throught all the app pages and components.
+export function StoreProvider({ children }) {
+ // Initialize reducer with the initial state.
+ const [store, dispatch] = useReducer(storeReducer, initialStore())
+ // Provide the store and dispatch method to all child components.
+ return
+ {children}
+
+}
+
+// Custom hook to access the global state and dispatch function.
+export default function useGlobalReducer() {
+ const { dispatch, store } = useContext(StoreContext)
+ return { dispatch, store };
+}
\ No newline at end of file
diff --git a/src/front/img/how-to.png b/src/front/img/how-to.png
deleted file mode 100644
index 4c24a76139..0000000000
Binary files a/src/front/img/how-to.png and /dev/null differ
diff --git a/src/front/index.css b/src/front/index.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/front/js/component/scrollToTop.js b/src/front/js/component/scrollToTop.js
deleted file mode 100755
index e491b48d06..0000000000
--- a/src/front/js/component/scrollToTop.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-class ScrollToTop extends React.Component {
- componentDidUpdate(prevProps) {
- if (this.props.location !== prevProps.location) {
- window.scrollTo(0, 0);
- }
- }
-
- render() {
- return this.props.children;
- }
-}
-
-export default ScrollToTop;
-ScrollToTop.propTypes = {
- location: PropTypes.object,
- children: PropTypes.any
-};
diff --git a/src/front/js/index.js b/src/front/js/index.js
deleted file mode 100755
index e46232086b..0000000000
--- a/src/front/js/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-//import react into the bundle
-import React from "react";
-import ReactDOM from "react-dom";
-
-//include your index.scss file into the bundle
-import "../styles/index.css";
-
-//import your own components
-import Layout from "./layout";
-
-//render your react application
-ReactDOM.render(;
-
- return (
-
-
-
-
- Not found!} />
-
-
-
-
-
- );
-};
-
-export default injectContext(Layout);
diff --git a/src/front/js/pages/demo.js b/src/front/js/pages/demo.js
deleted file mode 100755
index 7077ef8e51..0000000000
--- a/src/front/js/pages/demo.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { useState, useEffect, useContext } from "react";
-import { Link } from "react-router-dom";
-
-import { Context } from "../store/appContext";
-
-export const Demo = () => {
- const { store, actions } = useContext(Context);
-
- return (
-
- );
-};
diff --git a/src/front/js/pages/home.js b/src/front/js/pages/home.js
deleted file mode 100755
index 7b0be46a1e..0000000000
--- a/src/front/js/pages/home.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { useContext } from "react";
-import { Context } from "../store/appContext";
-import rigoImageUrl from "../../img/rigo-baby.jpg";
-import "../../styles/home.css";
-
-export const Home = () => {
- const { store, actions } = useContext(Context);
-
- return (
-
-
Hello Rigo!!
-
-
-
- {store.message || "Loading message from the backend (make sure your python backend is running)..."}
-
-
- This boilerplate comes with lots of documentation:{" "}
-
- Read documentation
-
-
-
-
This will show the demo element: {store.demo[params.theid].title}
-
-
-
-
-
- Back home
-
-
-
-
- );
- };
- return StoreWrapper;
-};
-
-export default injectContext;
diff --git a/src/front/js/store/flux.js b/src/front/js/store/flux.js
deleted file mode 100755
index cc56951a22..0000000000
--- a/src/front/js/store/flux.js
+++ /dev/null
@@ -1,54 +0,0 @@
-const getState = ({ getStore, getActions, setStore }) => {
- return {
- store: {
- message: null,
- demo: [
- {
- title: "FIRST",
- background: "white",
- initial: "white"
- },
- {
- title: "SECOND",
- background: "white",
- initial: "white"
- }
- ]
- },
- actions: {
- // Use getActions to call a function within a fuction
- exampleFunction: () => {
- getActions().changeColor(0, "green");
- },
-
- getMessage: async () => {
- try{
- // fetching data from the backend
- const resp = await fetch(process.env.BACKEND_URL + "/api/hello")
- const data = await resp.json()
- setStore({ message: data.message })
- // don't forget to return something, that is how the async resolves
- return data;
- }catch(error){
- console.log("Error loading message from backend", error)
- }
- },
- changeColor: (index, color) => {
- //get the store
- const store = getStore();
-
- //we have to loop the entire demo array to look for the respective index
- //and change its color
- const demo = store.demo.map((elm, i) => {
- if (i === index) elm.background = color;
- return elm;
- });
-
- //reset the global store
- setStore({ demo: demo });
- }
- }
- };
-};
-
-export default getState;
diff --git a/src/front/main.jsx b/src/front/main.jsx
new file mode 100644
index 0000000000..a5a3c781dc
--- /dev/null
+++ b/src/front/main.jsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import './index.css' // Global styles for your application
+import { RouterProvider } from "react-router-dom"; // Import RouterProvider to use the router
+import { router } from "./routes"; // Import the router configuration
+import { StoreProvider } from './hooks/useGlobalReducer'; // Import the StoreProvider for global state management
+import { BackendURL } from './components/BackendURL';
+
+const Main = () => {
+
+ if(! import.meta.env.VITE_BACKEND_URL || import.meta.env.VITE_BACKEND_URL == "") return (
+
+
+
+ );
+ return (
+
+ {/* Provide global state to all components */}
+
+ {/* Set up routing for the application */}
+
+
+
+
+ );
+}
+
+// Render the Main component into the root DOM element.
+ReactDOM.createRoot(document.getElementById('root')).render(
+
Hello Rigo!!
+
+
+
+ {store.message ? (
+ {store.message}
+ ) : (
+
+ Loading message from the backend (make sure your python 🐍 backend is running)...
+
+ )}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/front/pages/Single.jsx b/src/front/pages/Single.jsx
new file mode 100644
index 0000000000..7e68487da3
--- /dev/null
+++ b/src/front/pages/Single.jsx
@@ -0,0 +1,37 @@
+// Import necessary hooks and components from react-router-dom and other libraries.
+import { Link, useParams } from "react-router-dom"; // To use link for navigation and useParams to get URL parameters
+import PropTypes from "prop-types"; // To define prop types for this component
+import rigoImageUrl from "../assets/img/rigo-baby.jpg" // Import an image asset
+import useGlobalReducer from "../hooks/useGlobalReducer"; // Import a custom hook for accessing the global state
+
+// Define and export the Single component which displays individual item details.
+export const Single = props => {
+ // Access the global state using the custom hook.
+ const { store } = useGlobalReducer()
+
+ // Retrieve the 'theId' URL parameter using useParams hook.
+ const { theId } = useParams()
+ const singleTodo = store.todos.find(todo => todo.id === parseInt(theId));
+
+ return (
+
+ {/* Display the title of the todo element dynamically retrieved from the store using theId. */}
+
Todo: {singleTodo?.title}
+
+ Back home
+
+
+
+ );
+};
+
+// Use PropTypes to validate the props passed to this component, ensuring reliable behavior.
+Single.propTypes = {
+ // Although 'match' prop is defined here, it is not used in the component.
+ // Consider removing or using it as needed.
+ match: PropTypes.object
+};
diff --git a/src/front/routes.jsx b/src/front/routes.jsx
new file mode 100644
index 0000000000..0557df6141
--- /dev/null
+++ b/src/front/routes.jsx
@@ -0,0 +1,30 @@
+// Import necessary components and functions from react-router-dom.
+
+import {
+ createBrowserRouter,
+ createRoutesFromElements,
+ Route,
+} from "react-router-dom";
+import { Layout } from "./pages/Layout";
+import { Home } from "./pages/Home";
+import { Single } from "./pages/Single";
+import { Demo } from "./pages/Demo";
+
+export const router = createBrowserRouter(
+ createRoutesFromElements(
+ // CreateRoutesFromElements function allows you to build route elements declaratively.
+ // Create your routes here, if you want to keep the Navbar and Footer in all views, add your new routes inside the containing Route.
+ // Root, on the contrary, create a sister Route, if you have doubts, try it!
+ // Note: keep in mind that errorElement will be the default page when you don't get a route, customize that page to make your project more attractive.
+ // Note: The child paths of the Layout element replace the Outlet component with the elements contained in the "element" attribute of these child paths.
+
+ // Root Route: All navigation will start from here.
+ Not found! } >
+
+ {/* Nested Routes: Defines sub-routes within the BaseHome component. */}
+ Hello Rigo with Vanilla.js
-
-
-
-
-
-
-
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000000..a93495e81e
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,14 @@
+import {
+ defineConfig
+} from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+ plugins: [react()],
+ server: {
+ port: 3000
+ },
+ build: {
+ outDir: 'dist'
+ }
+})
\ No newline at end of file
diff --git a/webpack.common.js b/webpack.common.js
deleted file mode 100644
index e0474e42fc..0000000000
--- a/webpack.common.js
+++ /dev/null
@@ -1,48 +0,0 @@
-const webpack = require('webpack');
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const Dotenv = require('dotenv-webpack');
-
-module.exports = {
- entry: [
- './src/front/js/index.js'
- ],
- output: {
- filename: 'bundle.js',
- path: path.resolve(__dirname, 'public'),
- publicPath: '/'
- },
- module: {
- rules: [
- {
- test: /\.(js|jsx)$/,
- exclude: /node_modules/,
- use: ['babel-loader']
- },
- {
- test: /\.(css|scss)$/, use: [{
- loader: "style-loader" // creates style nodes from JS strings
- }, {
- loader: "css-loader" // translates CSS into CommonJS
- }]
- }, //css only files
- {
- test: /\.(png|svg|jpg|gif|jpeg|webp)$/, use: {
- loader: 'file-loader',
- options: { name: '[name].[ext]' }
- }
- }, //for images
- { test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/, use: ['file-loader'] } //for fonts
- ]
- },
- resolve: {
- extensions: ['*', '.js']
- },
- plugins: [
- new HtmlWebpackPlugin({
- favicon: '4geeks.ico',
- template: 'template.html'
- }),
- new Dotenv({ safe: true, systemvars: true })
- ]
-};
\ No newline at end of file
diff --git a/webpack.dev.js b/webpack.dev.js
deleted file mode 100755
index b5182ec5fc..0000000000
--- a/webpack.dev.js
+++ /dev/null
@@ -1,52 +0,0 @@
-const webpack = require('webpack');
-const path = require('path');
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common.js');
-// const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');
-
-const port = 3000;
-let publicUrl = `ws://localhost:${port}/ws`;
-
-//only for github
-if(process.env.GITPOD_WORKSPACE_URL){
- const [schema, host] = process.env.GITPOD_WORKSPACE_URL.split('://');
- publicUrl = `wss://${port}-${host}/ws`;
-}
-
-//only for codespaces
-if(process.env.CODESPACE_NAME){
- publicUrl = `wss://${process.env.CODESPACE_NAME}-${port}.app.github.dev/ws`;
-}
-
-module.exports = merge(common, {
- mode: 'development',
- devtool: 'cheap-module-source-map',
- devServer: {
- port,
- hot: true,
- allowedHosts: "all",
- historyApiFallback: true,
- static: {
- directory: path.resolve(__dirname, "dist"),
- },
- client: {
- webSocketURL: publicUrl
- },
- },
- plugins: [
- // new FriendlyErrorsWebpackPlugin(),
- // new ErrorOverlayPlugin(),
- // new PrettierPlugin({
- // parser: "babylon",
- // printWidth: 120, // Specify the length of line that the printer will wrap on.
- // tabWidth: 4, // Specify the number of spaces per indentation-level.
- // useTabs: true, // Indent lines with tabs instead of spaces.
- // bracketSpacing: true,
- // extensions: [ ".js", ".jsx" ],
- // jsxBracketSameLine: true,
- // semi: true, // Print semicolons at the ends of statements.
- // encoding: 'utf-8' // Which encoding scheme to use on files
- // }),
- new webpack.HotModuleReplacementPlugin()
- ]
-});
diff --git a/webpack.prod.js b/webpack.prod.js
deleted file mode 100644
index 46a2a2c06b..0000000000
--- a/webpack.prod.js
+++ /dev/null
@@ -1,15 +0,0 @@
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common.js');
-const Dotenv = require('dotenv-webpack');
-module.exports = merge(common, {
- mode: 'production',
- output: {
- publicPath: '/'
- },
- plugins: [
- new Dotenv({
- safe: true,
- systemvars: true
- })
- ]
-});
+