Hasindu's Diary

  1. Create a Helper File Create a new PHP file to store your helper functions. Laravel doesn't come with a dedicated helper file by default, but you can create one in the app/Helpers directory (or any directory you prefer). Example: bash Copy code mkdir app/Helpers touch app/Helpers/helpers.php 2. Define Your Helper Function Add your function(s) to the new helper file. Example ( app/Helpers/helpers.php ): php Copy code <?php if (! function_exists ( 'greetUser' )) { function greetUser ( $name ) { return "Hello, $name !" ; } } 3. Include the Helper File You need to include this file in the application so that Laravel can load the functions. Option 1: Autoload via composer.json Edit your composer.json file and add the helper file under the autoload section: json Copy code "autoload" : { "files" : [ "app/Helpers/helpers.php" ] } After adding this, run the following command to regenerate...

  // $request->validate([         //     'slip' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',         // ]);         // $imageName = time() . '.' . $request->slip->extension();         // $request->slip->move(public_path('images'), $imageName);         // return back()         //     ->with('success', 'You have successfully uploaded the slip.')         //     ->with('image', $imageName);

 To pass the assigned_users array from a child component to its parent component, you need to follow these steps: Create a callback function in the parent component : This function will be responsible for receiving the assigned_users array. Pass the callback function to the child component as a prop : The child component can then call this function when it wants to send the assigned_users array to the parent. Call the callback function from the child component : Inside the child component, when you want to send the data to the parent (e.g., after updating assigned_users ), you call the callback function with the updated array. Parent Component jsx Copy code import React , { useState } from 'react' ; import ChildComponent from './ChildComponent' ; const ParentComponent = ( ) => { const [assignedUsers, setAssignedUsers] = useState ([]); // Callback function to update the parent state const handleAssignedUsersChange = ( users ) => { setAssig...

`useCallback` is a useful hook for optimizing performance in React applications by preventing unnecessary re-creations of functions. However, you should use it wisely, as it can add complexity and may not always offer a performance improvement in every case. ### 1. **What does `useCallback` do?** `useCallback` returns a memoized version of the callback function that only changes if one of the dependencies has changed. It’s primarily used when passing a function as a prop to child components or using it in an effect (like `useEffect`), where unnecessary re-creations of the function can lead to performance problems. ### 2. **Syntax:** ```javascript const memoizedCallback = useCallback(() => {   // Your callback code }, [dependencies]); ``` - The first argument is the function you want to memoize. - The second argument is an array of dependencies (like `useEffect`). The function will only be re-created if any of these dependencies change. ### 3. **When to use `useCallback`?** You s...

 Implement a real-time, interactive map showing bin locations and status, with color coding to indicate levels (e.g., green for low, red for high). 1. Set Up the Frontend Map Choose a Mapping Library : Use a library like Leaflet.js (open-source and lightweight) or Google Maps API (feature-rich but has usage limits). For example, Leaflet can be integrated with a CDN or npm: < link rel = "stylesheet" href = "https://unpkg.com/leaflet/dist/leaflet.css" /> < script src = "https://unpkg.com/leaflet/dist/leaflet.js" > </ script > https://leafletjs.com/examples/quick-start/ Initialize the Map : Set up a base map centered on the target area (e.g., a city). const map = L. map ( 'map' ). setView ([latitude, longitude], zoomLevel); L. tileLayer ( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , { maxZoom : 19 , }). addTo (map); 2. Backend: Store and Retrieve Bin Data Bin Database : Each bin entry should store at least...

 In React, the setState function is essential for updating the component state. Here are various usage patterns for setState , primarily focusing on functional components with hooks (like useState ), but also touching on class components. 1. Basic State Update In a functional component, you can use setState to update a simple piece of state: const [count, setCount] = useState ( 0 ); const increment = ( ) => { setCount (count + 1 ); }; 2. Functional Update When the new state depends on the previous state, use a functional update: const increment = ( ) => { setCount ( prevCount => prevCount + 1 ); }; 3. Updating Multiple State Variables If you have multiple pieces of state, you can update them separately: const [count, setCount] = useState ( 0 ); const [name, setName] = useState ( "" ); const updateCount = ( ) => { setCount (count + 1 ); }; const updateName = ( newName ) => { setName (newName); }; 4. Using an Object to Manage Sta...