start 2025 version

app/components/Conditionnal.tsx

@@ -0,0 +1,7 @@
+
+const isLoggedIn = true;
+const element = (
+  <div>
+    {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
+  </div>
+);

app/components/Counter.tsx

@@ -0,0 +1,17 @@
+// File: app/components/Counter.tsx
+import { useState } from 'react';
+
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+
+export default Counter;

app/components/CounterWithReducer.tsx

@@ -0,0 +1,49 @@
+// File: app/components/CounterWithReducer.tsx
+import { useReducer } from 'react';
+
+type State = {
+  count: number;
+};
+
+type Action = 
+  | { type: 'increment' }
+  | { type: 'decrement' };
+
+const initialState: State = { count: 0 };
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'increment':
+      return { count: state.count + 1 };
+    case 'decrement':
+      return { count: state.count - 1 };
+    default:
+      throw new Error('Unknown action type');
+  }
+}
+
+function CounterWithReducer() {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  return (
+    <div className="flex flex-col items-center p-4">
+      <p className="text-xl mb-4">Count: {state.count}</p>
+      <div>
+        <button
+          className="px-4 py-2 bg-blue-500 text-white rounded mr-2"
+          onClick={() => dispatch({ type: 'increment' })}
+        >
+          Increment
+        </button>
+        <button
+          className="px-4 py-2 bg-red-500 text-white rounded"
+          onClick={() => dispatch({ type: 'decrement' })}
+        >
+          Decrement
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default CounterWithReducer;

app/components/CurlyComponents.tsx

@@ -0,0 +1,20 @@
+const name = 'John';
+const element1 = <h1>Hello, {name}!</h1>;
+
+function formatName(user: { firstName: any; lastName: any; }) {
+    return user.firstName + ' ' + user.lastName;
+  }
+
+  const user = {
+    firstName: 'John',
+    lastName: 'Doe'
+  };
+
+  const element2 = <h1>Hello, {formatName(user)}!</h1>;
+
+  const isLoggedIn = true;
+  const element = (
+    <div>
+      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
+    </div>
+  );

app/components/ExampleComponent.tsx

@@ -0,0 +1,17 @@
+// File: app/components/ExampleComponent.tsx
+const ExampleComponent = () => {
+    const element = (
+      <div>
+        <h1>Hello, World!</h1>
+        <p>Welcome to learning JSX with React.</p>
+        <ul>
+          <li>JSX is a syntax extension for JavaScript.</li>
+          <li>It looks similar to HTML.</li>
+          <li>It is used to describe the UI.</li>
+        </ul>
+      </div>
+    );
+    return element;
+  };
+
+  export default ExampleComponent;

app/components/Greetings.tsx

@@ -0,0 +1,12 @@
+Greeting.defaultProps = {
+  name: 'Guest'
+};
+
+type GreetingProps = {
+  readonly name?: string;
+};
+
+export default function Greeting(props: GreetingProps) {
+      return <h1>Hello, {props.name}</h1>;
+    }
+

app/components/MyClassComponent.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default class MyComponent extends React.Component {
+  render() {
+    return <div>Hello, World From Class component !</div>;
+  }
+}

app/components/MyComponent.tsx

@@ -0,0 +1,3 @@
+export default function MyComponent() {
+    return <div>Hello, World!</div>;
+  }

app/components/Navbar.tsx

@@ -0,0 +1,59 @@
+// app/components/Navbar.tsx
+import { Link } from "@remix-run/react";
+import { useState } from "react";
+
+export default function Navbar() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+
+  return (
+    <nav className="bg-blue-600 p-4 shadow-md">
+      <div className="container mx-auto flex justify-between items-center">
+        <div className="text-white text-xl font-bold">MyApp</div>
+        <button
+          className="text-white md:hidden focus:outline-none"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          ☰
+        </button>
+        <ul className={`flex-col md:flex-row md:flex space-y-2 md:space-y-0 md:space-x-4 ${isOpen ? 'flex' : 'hidden'} md:flex transition-all duration-300 ease-in-out`}>
+          <li>
+            <Link to="/" className="text-white hover:text-gray-300 transition-colors duration-200">
+              Home
+            </Link>
+          </li>
+          <li>
+            <Link to="/products" className="text-white hover:text-gray-300 transition-colors duration-200">
+              Products
+            </Link>
+          </li>
+          <li>
+            <Link to="/customers" className="text-white hover:text-gray-300 transition-colors duration-200">
+              Customers
+            </Link>
+          </li>
+          <li className="relative">
+            <button
+              className="text-white hover:text-gray-300 transition-colors duration-200 focus:outline-none"
+              onClick={() => setIsSubmenuOpen(!isSubmenuOpen)}
+            >
+              Dashboard
+            </button>
+            <ul className={`absolute left-0 mt-2 bg-blue-600 rounded shadow-lg ${isSubmenuOpen ? 'block' : 'hidden'} transition-all duration-300 ease-in-out`}>
+              <li>
+                <Link to="/dashboard" className="block px-4 py-2 text-white hover:text-gray-300 transition-colors duration-200">
+                  Dashboard Home
+                </Link>
+              </li>
+              <li>
+                <Link to="/dashboard/settings" className="block px-4 py-2 text-white hover:text-gray-300 transition-colors duration-200">
+                  Dashboard Settings
+                </Link>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  );
+}

app/components/ThemeContext.tsx

@@ -0,0 +1,7 @@
+// File: app/components/ThemeContext.tsx
+import { createContext } from 'react';
+
+export const ThemeContext = createContext({
+  background: 'darkblue',
+  color: 'white'
+});

app/components/ThemedButton.tsx

@@ -0,0 +1,15 @@
+// File: app/components/ThemedButton.tsx
+import { useContext } from 'react';
+import { ThemeContext } from './ThemeContext';
+
+function ThemedButton() {
+  const theme = useContext(ThemeContext);
+
+  return (
+    <button style={{ background: theme.background, color: theme.color }} className="px-4 py-2 rounded">
+      I am styled by theme context!
+    </button>
+  );
+}
+
+export default ThemedButton;

app/components/UseEffect.tsx

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+function Example() {
+  useEffect(() => {
+    document.title = 'Hello, World!';
+  }, []);
+
+  return <div>Hello, World!</div>;
+}

app/dao/customer.dao.ts

@@ -0,0 +1,100 @@
+// app/dao/customer.dao.ts
+import { pool } from '~/utils/db.server';
+
+// Define a Customer type
+// This interface represents the structure of a customer object in our database.
+export interface Customer {
+  id: number;
+  name: string;
+  email: string;
+}
+
+// Function to create a new customer
+// This function takes a name and email as input, inserts a new customer into the database,
+// and returns the newly created customer object.
+export async function createCustomer(name: string, email: string): Promise<Customer | null> {
+  try {
+    // Execute the SQL query to insert a new customer and return the inserted row.
+    const res = await pool.query(
+      'INSERT INTO customers (name, email) VALUES ($1, $2) RETURNING *',
+      [name, email]
+    );
+    // Return the first row of the result, which is the newly created customer.
+    return res.rows[0];
+  } catch (error) {
+    // Log any errors that occur during the query execution.
+    console.error('Error creating customer:', error);
+    // Return null if an error occurs.
+    return null;
+  }
+}
+
+// Function to get all customers
+// This function retrieves all customers from the database and returns them as an array.
+export async function getCustomers(): Promise<Customer[]> {
+  try {
+    // Execute the SQL query to select all customers.
+    const res = await pool.query('SELECT * FROM customers');
+    // Return the rows of the result, which are the customers.
+    return res.rows;
+  } catch (error) {
+    // Log any errors that occur during the query execution.
+    console.error('Error fetching customers:', error);
+    // Return an empty array if an error occurs.
+    return [];
+  }
+}
+
+// Function to get a customer by ID
+// This function takes a customer ID as input, retrieves the corresponding customer from the database,
+// and returns the customer object.
+export async function getCustomerById(id: number): Promise<Customer | null> {
+  try {
+    // Execute the SQL query to select a customer by ID.
+    const res = await pool.query('SELECT * FROM customers WHERE id = $1', [id]);
+    // Return the first row of the result, or null if no customer is found.
+    return res.rows[0] || null;
+  } catch (error) {
+    // Log any errors that occur during the query execution.
+    console.error('Error fetching customer by ID:', error);
+    // Return null if an error occurs.
+    return null;
+  }
+}
+
+// Function to update a customer
+// This function takes a customer ID, name, and email as input, updates the corresponding customer in the database,
+// and returns the updated customer object.
+export async function updateCustomer(id: number, name: string, email: string): Promise<Customer | null> {
+  try {
+    // Execute the SQL query to update a customer and return the updated row.
+    const res = await pool.query(
+      'UPDATE customers SET name = $1, email = $2 WHERE id = $3 RETURNING *',
+      [name, email, id]
+    );
+    // Return the first row of the result, which is the updated customer.
+    return res.rows[0];
+  } catch (error) {
+    // Log any errors that occur during the query execution.
+    console.error('Error updating customer:', error);
+    // Return null if an error occurs.
+    return null;
+  }
+}
+
+// Function to delete a customer
+// This function takes a customer ID as input, deletes the corresponding customer from the database,
+// and returns the deleted customer object.
+export async function deleteCustomer(id: number): Promise<Customer | null> {
+  try {
+    // Execute the SQL query to delete a customer and return the deleted row.
+    const res = await pool.query('DELETE FROM customers WHERE id = $1 RETURNING *', [id]);
+    // Return the first row of the result, which is the deleted customer.
+    return res.rows[0];
+  } catch (error) {
+    // Log any errors that occur during the query execution.
+    console.error('Error deleting customer:', error);
+    // Return null if an error occurs.
+    return null;
+  }
+}