Categories
Learning Tech

Laravel; How to pull existing records on select change event using session type and date passed to dynamic web route in Laravel?

Welcome to Post,

Lets learn how to do the thing in the question, assuming you have basic or advance knowledge or learning something of your own to understand the things or you have got stuck due to simple issues of mistakes.

Using jQuery, HTML, Laravel Blade, Controller, Web Route and AJAX.

Lets begin.

Lets we talk first and defined about the HTML form field and its jQuery functionality. (I will be skipping middle parts of the code what it does and how its populated for the form fields ) and we will be using two fields here to show the example : session_date and session_type, which would look like below in the html code. session_type values would be morning, evening and so on for the day session.

<div class="row">
                            
                            <div class="form-group col-md-3">
                                <label for="session_date">Session Date:<sup>*</sup> </label>
                                <input type="date" name="session_date" id="session_date" class="form-control jsSessionDate" 
                                    value="{{ old('session_date', now()->format('Y-m-d'))}}"    
                                />
                                <!--<div class="text-end"><small class="text-muted"></small></div>-->
                            </div>
                            
                            <div class="form-group col-md-3">
                                <!--<input type="hidden" name="session_type" class="form-control hide mt-1" value="morning" />-->
                                                
                                <label for="session_type">Select Session Type:<sup>*</sup></label>
                                <select name="session_type" id="session_type" class="form-select text-capitalize jsSessionTypeChange" 
                                    >
                                    @foreach ($sessions_types as $ddSession)
                                        <option value="{{ $ddSession }}" {{old('session_type') ==  $ddSession ? 'selected' : ''}}>{{ $ddSession }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

Once we have the basic fields ready in HTML side we can write the jQuery side of it to fetch the records and make the AJAX call our server side of Laravel Controller.

$(document).on('change', '.jsSessionTypeChange', function(e) {
                const { value } = e.target;
                const sessionDateVal = $('.jsSessionDate').val();
                console.log(value)
                
                if(!value) return;
                
                const $this = $(this);
                const payload = { 
                    _token:  $('meta[name="csrf-token"]').attr('content'),
                };
                
                const sessionType = value || 'morning';
                const sessionDate = sessionDateVal ?? {{now()->format('Y-m-d')}};
                
                const baseUrl = window.location.origin+'/ams';
                const url = `${baseUrl}/existing-session/${sessionType}/${sessionDate}`;
                    
                console.log({url, sessionType, sessionDate});
                
                $.ajax({
                    url,
        			type: "get",
        			cache: false,
                }).done(function(resp) {
                    if(resp) {
                          console.log({
                              resp
                          })
                    }
                   })
                   .fail(function(err) {
                     console.error("Existing session fetch  error: ", err, err.responseText);
                });
            });

//IGNORE THE CONSOLE LOGS

Here, I am getting values from date filed and select dropdown for session type, on session type change event forming server side api end point url, not using PHP Laravel Blade example with javascript is its very difficult for blade to understand passing dynamic javascript variable to it.

Because PHP code executed on the page load even we defining the blade {{ }} in onChange event function scope. so its looks for that variable and its goes undefined , tried otherways around the then get the error from rotue generation syntax as route is forming dynamically.

So I thought to set back with simple Javascript code for forming the base URL and its endpoint for ajax call to happen.

Giving you context what I said above and for what thing i was trying to do in Javascript of code using Laravel Blade syntax, which didn’t worked out simply.

Try 1:

const type = value || 'morning';
const url = "{{ route('existing-session', ['sessionType' => '${type}']) }}";

$.ajax({
    url: url,
    // ... rest of your AJAX configuration
});

Try 2:
const type = value || 'morning';
const url = "{{ route('existing-session', ['sessionType' => '${type}']) }}";

$.ajax({
    url: url,
    // ... rest of your AJAX configuration
});

Try 3: Finally
const type = value || 'morning';
const baseUrl = window.location.origin;
const url = `${baseUrl}/existing-session/${type}`;

$.ajax({
    url: url,
    // ... rest of your AJAX configuration
});

Okay, now our HTML and JQUERY code is ready, lets quickly add in to our routes/web.php, dynamic route for ajax to work!

// To get existing Session on Create View
Route::get('existing-session/{sessionType}/{sessionDate}', [App\Http\Controllers\EventSessionController::class, 'existingSession'])->name('existing-session');

Now Finally in Controller side, write as method to get the sessionType and sessionDate and pull it the data from database and return as json response to the ajax call. Then we are good to finish!

public function existingSession($sessionType, $sessionDate) {
    // Fetch session with today's date and specific session type

    if($sessionType  !== '' && $sessionDate !== '') {
        $existingSession = EventSession::with(['members', 'samagams'])->where('session_type', $sessionType)
        ->whereDate('session_date', $sessionDate ?? now()->format('Y-m-d'))
        ->first();

        $response = ["data" => $existingSession, "success" => true, "error" => false, "message" => $sessionType." session found for date ".$sessionDate];
    } else {
        $response = [ "data" => null, "success" => false, "error" => true, "message" => "No existing session found for given session type ". $sessionType ." and date " .$sessionDate];
    }

    return response()->json($response);
}

Voila, your quick AJAX example ready in Laravel with pulling in data with dynamic passing of data to the GET route.

Hope this gives you hints, idea how to do the things in PHP Laravel.

Thanks for reading the post and happy learning!

Categories
Learning Learning Tech

Quick Things Learned about React JS HOOKS in details with the help of AI ChatGPT for Interview Preparations 2023

Hello, welcome to this precious post on learning of most advance and interview questioned ReactJS Hooks

Topics covered to be learned:

We will learn all this in reverse order so it stays the harder ones more in our mind for longer time or get it clear in our mind for ever lasting.
Each topic can help you to understand and learn about why each hook used in react and it purpose and one use case scenario for detail understandings. (topic maybe cut and shorten for its sweetness for you to read and grasp the main understandings)

Let’s Dive into each one by one by one

useDebugValue – Hook

The useDebugValue is not a hook for managing state or performing side effects like other hooks such as useState, useEffect, etc. Instead, it is a hook provided by React that allows you to display custom labels for custom hooks in React DevTools. It’s primarily used for debugging purposes to provide more descriptive labels and information about custom hooks when inspecting them in the browser’s development tools.

Use Case: Custom Hook Labeling for Debugging:

When you create custom hooks, they may appear in the React DevTools as “Custom Hook” by default, which might not be very informative when you have multiple custom hooks in your application. useDebugValue allows you to customize the label displayed in the DevTools for better debugging and understanding.

Here’s an example of how you might use useDebugValue in a custom hook:

import { useEffect, useDebugValue, useState } from 'react';

// Custom hook to fetch data and display debug value
function useDataFetcher(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching data:', error);
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  // Use the custom hook's url as the debug value label
  useDebugValue(url);

  return { data, loading };
}

In this example, we have a custom hook called useDataFetcher, which fetches data from a given URL using the fetch API. By using useDebugValue with the url parameter as an argument, we’re setting the custom label to the url. When you inspect this custom hook in React DevTools, you will see the specified label instead of a generic “Custom Hook.”

Open DevTools in your Browser (Chrome) (Windows Keyboard Shortcut : CTL+SHIFT+I )

Remember that useDebugValue is used only for debugging purposes and has no effect on the actual behavior of the custom hook. It’s a helpful tool for developers to gain more insights into custom hooks during the development process.

Back to Topics

useLayoutEffect – Hook

The useLayoutEffect hook in React is similar to the useEffect hook, but it runs synchronously after the DOM has been updated but before the browser repaints. This makes it suitable for performing DOM manipulations or measurements that require the latest DOM layout information before the user sees the updated content.

Use Case: DOM Measurements and Synchronous Updates:

A common use case for useLayoutEffect is when you need to interact with the DOM, such as reading element measurements (e.g., width, height, position) or updating the DOM synchronously after a render. This is useful when you need to adjust or animate elements based on their current size or position.

Here’s an example to illustrate its use case:

import React, { useState, useLayoutEffect, useRef } from 'react';

function ElementSizeDisplay() {
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);
  const divRef = useRef();

  useLayoutEffect(() => {
    const updateSize = () => {
      if (divRef.current) {
        setWidth(divRef.current.clientWidth);
        setHeight(divRef.current.clientHeight);
      }
    };

    updateSize();

    // Attach a resize event listener to update size on window resize
    window.addEventListener('resize', updateSize);

    // Clean up the event listener on component unmount
    return () => {
      window.removeEventListener('resize', updateSize);
    };
  }, []);

  return (
    <div ref={divRef}>
      <p>Width: {width}px</p>
      <p>Height: {height}px</p>
    </div>
  );
}

In this example, we have a ElementSizeDisplay component that displays the width and height of a div element. We use useLayoutEffect to set up a resize event listener and update the state variables width and height whenever the div element’s size changes. We also trigger the initial update immediately after the component mounts.

Using useLayoutEffect ensures that we get the most up-to-date measurements of the div element before it’s displayed to the user, which is essential when working with layout calculations or animations that rely on accurate dimensions.

Note: The key difference between useEffect and useLayoutEffect is the timing of their execution. While useEffect runs after the render is committed to the screen, useLayoutEffect runs before the actual painting, so it can cause the component to block painting if the logic inside it is too slow. For most cases, useEffect is sufficient, but if you need to make synchronous DOM updates or perform measurements, useLayoutEffect is the appropriate choice. Just be aware of potential performance implications and use it judiciously.

Back to Topics

useImperativeHandle – Hook

The useImperativeHandle hook in React is used to customize the instance value that is exposed when a parent component calls ref on a child component. It allows you to define what properties or functions of the child component’s instance should be accessible from the parent component.

Use Case: Exposing Child Component’s Functionality to Parent Component:

A common use case for useImperativeHandle is when you want to allow the parent component to interact with specific methods or properties of a child component directly. This can be useful when the child component encapsulates certain behaviors or actions, and you want to provide an easy-to-use API for the parent component to access those behaviors.

Let’s see an example to illustrate its use case:

import React, { forwardRef, useImperativeHandle, useRef } from 'react';

// Child component that uses useImperativeHandle
const ChildComponent = forwardRef((props, ref) => {
  const inputRef = useRef();

  // Exposing the focusInput function to the parent component using useImperativeHandle
  useImperativeHandle(ref, () => ({
    focusInput: () => {
      inputRef.current.focus();
    },
  }));

  return <input ref={inputRef} type="text" />;
});

// Parent component
function ParentComponent() {
  const childRef = useRef();

  const handleButtonClick = () => {
    // Using the exposed function to focus the input inside the child component
    childRef.current.focusInput();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleButtonClick}>Focus Input</button>
    </div>
  );
}

In this example, we have a ChildComponent that encapsulates an input element and exposes a focusInput function to the parent component using useImperativeHandle. The useImperativeHandle hook is used to define an object with the properties and functions that the parent component can access through the ref of the ChildComponent.

The ParentComponent renders the ChildComponent and a button. When the button is clicked, the handleButtonClick function is called, and it, in turn, calls the focusInput function exposed by the ChildComponent, focusing the input element inside the child component.

Using useImperativeHandle can be handy when you want to expose specific functionalities of a child component to its parent, especially when dealing with custom components or third-party libraries. However, be cautious when using this pattern, as it might break encapsulation and lead to a less maintainable codebase. Whenever possible, prefer to manage state and interactions through props and callbacks to maintain a more predictable and React-friendly component architecture.

Back to Topics

useRef – Hook

The useRef hook in React is used to create a mutable reference to a value that persists across renders. Unlike state variables (useState), updating a useRef value does not trigger a re-render. This makes useRef suitable for storing and accessing mutable values or accessing DOM elements imperatively.

Use Case: Storing Mutable Values:

One of the primary use cases for useRef is to store mutable values that don’t need to trigger a re-render when updated. Since the component won’t re-render when the useRef value changes, it can be useful for keeping track of some data that doesn’t affect the component’s visual output.

Here’s an example where useRef is used to keep track of a previous value:

import React, { useState, useEffect, useRef } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  const prevCount = prevCountRef.current;

  return (
    <div>
      <p>Current Count: {count}</p>
      <p>Previous Count: {prevCount}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
    </div>
  );
}

In this example, we use useRef to create a prevCountRef that keeps track of the previous value of the count state variable. We update the prevCountRef using the useEffect hook whenever count changes. Since updating prevCountRef does not trigger a re-render, we can safely access its current value without causing an infinite loop.

Use Case: Accessing DOM Elements:

Another common use case for useRef is to access and interact with DOM elements directly. Since React components are typically declarative, there might be cases where you need to manipulate a DOM element imperatively (e.g., focusing an input, measuring its size, etc.).

Here’s an example of using useRef to focus an input element when a button is clicked:

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef();

  const handleButtonClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleButtonClick}>Focus Input</button>
    </div>
  );
}

In this example, we use useRef to create the inputRef, which is attached to the input element through the ref attribute. When the button is clicked, the handleButtonClick function is called, which uses inputRef.current to access the underlying DOM element and invoke the focus() method on it.

Remember that using useRef for accessing DOM elements should be done sparingly, as it goes against React’s declarative approach. Whenever possible, try to manage component state and behavior through props and state variables to maintain the React flow of data and rendering. However, there are cases where direct DOM manipulation with useRef can be necessary or more efficient.

Back to Topics

useMemo – Hook

The useMemo hook in React is used for memoizing expensive computations, so they are only recomputed when their dependencies change. It helps optimize the performance of functional components by avoiding unnecessary re-computations of values that haven’t changed between renders.

Use Case: Memoizing Expensive Computations:

The primary use case for useMemo is when you have a computationally expensive function or calculation that doesn’t need to be re-evaluated on every render, especially if the function relies on some props or state that might remain unchanged for a while.

Let’s see an example to illustrate its use case:

import React, { useMemo, useState } from 'react';

function ExpensiveComponent({ data }) {
  // This is a computationally expensive function that we want to memoize
  const expensiveResult = useMemo(() => {
    let result = 0;
    for (let i = 0; i < data.length; i++) {
      result += data[i];
    }
    return result;
  }, [data]); // The dependency array contains 'data'

  return <div>{expensiveResult}</div>;
}

function App() {
  const [dataArray, setDataArray] = useState([1, 2, 3, 4, 5]);

  return (
    <div>
      <ExpensiveComponent data={dataArray} />
      <button onClick={() => setDataArray([1, 2, 3, 4, 5])}>Update Data</button>
    </div>
  );
}

In this example, ExpensiveComponent takes an array called data as a prop and computes the sum of its elements. The computation can be costly, especially if the data array is large.

By using useMemo with the data array as a dependency, we ensure that the expensiveResult is only recalculated when the data array changes. So, when the parent component (App) renders and updates the dataArray, ExpensiveComponent will not recompute the sum unless the dataArray changes.

useMemo should be used when the computation is relatively expensive and depends on certain inputs (props or state) that might not change often. It’s essential to remember that using useMemo comes with some overhead, so you should only use it when the performance benefits outweigh the costs.

It’s also worth noting that the improvement in performance gained by using useMemo depends on the nature of the computation and the size of the data. For simple or small computations, the performance gain might be negligible, and in such cases, using useMemo might not be necessary. Always profile and measure your application’s performance to determine the most effective optimizations.

Back to Topics

useReducer – Hook

The useReducer hook in React is used for managing more complex state logic in functional components. It is an alternative to using the useState hook when the state has a complex structure or when the state transitions depend on previous state values. useReducer follows the same principles as the standard Reducer concept in JavaScript, similar to how it works with the Array.reduce method.

Use Case: Managing Complex State Logic:

The primary use case for useReducer is when you need to handle state changes that are more involved and involve multiple sub-values or when you have actions that depend on the previous state. It’s beneficial when the state transitions are not straightforward and need to be calculated based on existing state.

Here’s an example to illustrate its use case:

import React, { useReducer } from 'react';

// Reducer function
function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  // useReducer returns the current state and a dispatch function to send actions.
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

In this example, the useReducer hook is used to manage the state of a simple counter component. The reducer function defines how state transitions should happen based on different action types. The state is initialized with { count: 0 }, and clicking the buttons dispatches actions to increment or decrement the count.

useReducer provides a structured way to handle more complex state updates, especially when you need to consider multiple factors before updating the state. It can be particularly useful when working with state machines, form handling, or managing state in contexts and reducers for more extensive applications.

However, for simpler cases where the state doesn’t involve complex transitions or doesn’t depend on the previous state, useState may be more suitable and easier to manage. Choose the right approach based on the specific requirements and complexity of your component’s state management.

Back to Topics

useCallback – Hook

The useCallback hook in React is used to memoize functions, which helps to optimize the performance of functional components that rely on callbacks, especially when passing them down to child components. Memoization means that the function returned by useCallback will only change if its dependencies change, otherwise, the same memoized function instance will be reused.

The syntax of the useCallback hook is as follows:

const memoizedCallback = useCallback(callbackFunction, dependencies);
  • callbackFunction: The function that you want to memoize.
  • dependencies (optional): An array of dependencies. If any of these dependencies change, the memoized callback will be recomputed; otherwise, it will be reused.

Use Case: Preventing Unnecessary Re-renders:

In React, passing down new function references to child components can lead to unnecessary re-renders. For example, consider a parent component rendering multiple instances of a child component, and each child component receives a callback prop from the parent. If the parent component creates a new function instance for the callback prop on every render, each child component will think that its prop has changed, resulting in re-renders even if the actual logic of the callback hasn’t changed.

Using useCallback, you can avoid this behavior by memoizing the callback function:

import React, { useCallback } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const handleClick = useCallback(() => {
    // Callback logic
  }, []);

  return (
    <div>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

By providing an empty dependency array ([]) as the second argument to useCallback, we ensure that the handleClick function remains the same across re-renders, preventing unnecessary re-renders of the child component.

Remember, while useCallback can help with performance optimizations in certain situations, it’s essential to use it judiciously. Overusing useCallback might lead to less predictable behavior and unnecessary overhead. As with all performance optimizations, it’s best to measure and profile your application to identify actual performance bottlenecks before applying optimizations like useCallback.

Back to Topics

Hope this helps you in interview preparation and your successful selection.

Drop us your love and kindness, by sharing this article. Thank you!

Categories
Learning Learning Tech

How to build Android APK/apk from command line interface on windows/mac?

Hello,

If you are looking for, to build or generate the android apk file (in your capacitor project) directly from the command line rather then opening Android Studio and building up.

I will share few steps and challenges face to build android apk from CLI on windows and also would share below the mac version of command line code too incase you are mac user.

First step first,

Before running the CLI command which I will be sharing below, we make sure we add the two things under Environment variables of windows system.

  • Java JDK or JAVA_HOME path
  • zipalign if not set or when you run command your cli throw error not zipalign command (so we need it too in the PATH variable of the windows system)
See last two entries in the image above, second entry were zipalign.exe is available under your real Android Studio folder.

Next, just try out these command you will be good to go

Windows CLI command for Android APK release build
cd android && 
gradlew.bat assembleRelease && 
cd app/build/outputs/apk/release &&
jarsigner -keystore YOUR_KEYSTORE_PATH -storepass YOUR_KEYSTORE_PASS app-release-unsigned.apk YOUR_KEYSTORE_ALIAS &&
zipalign 4 app-release-unsigned.apk app-release.apk

In Code above, note we are using gradlew.bat which is important to note for window users reset is same for MAC command too (didn’t tested on mac, channel of command source from the post), result would working for me on windows!

Note the date and time of output (compare to post date and time, I renamed the file to mdw-app-release.apk for use)
Mac CLI command for Android APK release build
cd android && 
./gradlew assembleRelease && 
cd app/build/outputs/apk/release &&
jarsigner -keystore YOUR_KEYSTORE_PATH -storepass YOUR_KEYSTORE_PASS app-release-unsigned.apk YOUR_KEYSTORE_ALIAS &&
zipalign 4 app-release-unsigned.apk app-release.apk

If you like to generate for debug just changed assembleRelease to assembleDebug and change the file names accordingly, from release to debug or whatever names you would like to prefix or suffix.

Hope this gives ideas and info for the challenge you might facing.

Happy Learning & Thanks for visit.

Categories
Learning Tech

What does this actually means: Warning: The signer’s certificate is self-signed. POSIX file permission and/or symlink attributes detected.

If you encounter this warning message on CLI

What does this actually means: Warning: The signer's certificate is self-signed. POSIX file permission and/or symlink attributes detected. These attributes are ignored when signing and are not protected by the signature.

on after your local Android APK build for release version, basically it means, as learned from AI source to understand it real cause of the warning, so no need to worry much, you can continue reading the details for more understandings.

It indicates that the certificate used to sign the file is self-signed, meaning it was generated by the developer rather than being issued by a trusted certificate authority.

Additionally, the warning mentions POSIX file permission and/or symlink attributes. POSIX refers to the Portable Operating System Interface, which defines a standard set of APIs for compatibility between different Unix-like operating systems. The warning suggests that the file permissions and symbolic links present in the file are ignored during the signing process and are not protected by the digital signature.

This warning is informational and does not necessarily indicate an error or problem. Self-signed certificates are commonly used during development or testing stages, but for production or public distribution, it is recommended to use certificates issued by trusted certificate authorities.

If you are encountering this warning while signing an APK file, you can consider obtaining a certificate from a trusted certificate authority to replace the self-signed certificate. This will provide users with more confidence in the authenticity and integrity of the application. However, if you are using a self-signed certificate for personal or internal use, you can generally ignore this warning as long as you trust the source of the file and its contents.

It’s important to note that the warning regarding POSIX file permission and symlink attributes being ignored during signing does not have a significant impact on the functionality of the signed file. The signature primarily ensures the integrity of the file contents and detects any modifications made after signing.

Happy Learning!

Categories
Javascript Learning Tech

Function getStaticPaths, How to create paths in getStaticProps function If you have no access to create paths in getStaticPaths, NEXTJS

Hello,

Hope this is very interesting question of scenario you might be facing to solve with next js and

  • when you don’t want to use “function getServerSideProps” to pass dynamic (data as) props to the page components
  • when you don’t want too make a extra API calls to generate the paths for products or whatever list of thing you are creating in “function getStaticPaths”

Here is the quick things we need to work out to work this out of box for specially the scenario were are showing product detail view page which is of route like in Nextjs as “page/product/[id].js

First in function getStaticPaths() we just need to do this and pass fallback as “true” as we our dynamic path is not pre-rendered!

export async function getStaticPaths() {
    // Empty array since paths will be dynamically created in getStaticProps
    return {
        paths: [],
        fallback: true, // Set to true if there are dynamic paths that are not pre-rendered !! 
    };
};

Next, we need to edit our “getStaticProps” function and then voila;


export async function getStaticProps({ params }) {
    const product = await getProduct(params && params.id);
    if (!product) {
        return {
            redirect: {
                destination: '/',
                permanent: false,
            },
        }
    }

    return {
        props: {
            product,
            error: resp.error ? true : false
        }
    };
}

Boom you are done, and just use those props in your page component like



return (<PhotoProvider
        key={'photoprovider-key-' + product?.id}
        speed={() => 600}
        easing={(type) => (type === 2 ? '' : 'cubic-bezier(.25, 1, .30, 1)')}>

/*...other codes*/
</PhotoProvider>

you will find you page up and working, fine!

Hope this simple steps helps to solve our complex situations arises in the development work of software building on planet earth!

I would also like to the above situation, why we can’t just do the same thing simply with getServerSideProps in single function, I am facing the issue to build using next build && next export for android package, as dynamics cannot be rendered as html files due to getServerSideProps sitting in between, and also as per the Next JS docs we can’t do anything what I have found of my learnings.

Happy Learning! Thanks for reading.

Keep coding & Develop Wonderful.

To Follow help out to know: uidevwork

Categories
Javascript Learning Tech

What is forwardRef and how its helps in react?

Hello, lets quickly take a review on React forwardRef, what it in actual,

In React, the forwardRef function is a utility that allows you to pass a ref through a component to one of its children. It’s commonly used when you need to access the underlying DOM node or React component instance of a child component from the parent component.

When you create a component using functional components in React, you can use the useRef hook to create a ref object. This ref object can then be passed as a prop to child components. However, when you pass the ref as a prop to a child component, React does not automatically pass it down to the underlying DOM element or custom component. This is where forwardRef comes into play.

By using forwardRef, you can create a component that accepts a ref and forwards it to one of its children. Here’s an example:

const ChildComp = React.forwardRef((props, ref) => {
  // Use the ref object to access the underlying DOM node or component instance
  return <input ref={ref} />;
});

const ParentComp = () => {
  const inputRef = React.useRef(null);

  const handleClick = () => {
    // Access the input element using the ref
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <ChildComponent ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

In the example above, the ChildComponent uses forwardRef to forward the ref prop to the <input> element. In the ParentComponent, a ref is created using the useRef hook and passed to ChildComponent using the ref prop. This allows the ParentComponent to access the input element and call the focus method when the button is clicked.

By using forwardRef, helps to bridge the gap between functional components and the imperative DOM or component operations that sometimes require direct access to child component element.

Note here we are accessing child’s component dom node not child component here as ref object, i.e can be consider as subtle difference to understand for our mind.

Hope this helps to clear out the basic concept behind using forwardRef in React.

Happy Learning!

Categories
Javascript Learning Tech

How to fix nextjs appending http://localhost:3000/_next/image? to the image srcset how to remove for production build for images?

Hello,

Welcome to the question and for the search, facing this issue? lets quickly see how we can fix this, with and in next.config.js file.

In Next.js, when using the next/image component, the src attribute is automatically transformed to a URL that goes through the Next.js image optimization pipeline. During development, this URL may include http://localhost:3000/_next/image? to indicate the local development server.

However, for production images, you can configure Next.js to remove the http://localhost:3000/_next/image? prefix. Here’s how you can achieve that:

Create a custom loader for Next.js images:

  • Open next.config.js and add the following code:
    • module.exports = {
    • images: {
      • loader: 'imgix',
      • path: '', // Remove the path prefix for production images
    • }, };
  • This configuration sets the loader option to use the imgix loader, which removes the http://localhost:3000/_next/image? prefix. The path option is set to an empty string, this will leave the prefix for image urls and left blank

Now you can easily build your project and test to images are loading fine with absolute url path if applied so.

Hope this help to solve the issue.

Happy Learning!

Categories
Learning Learning Tech

How to sync generated next.js out folder build to android/android studio in capacitor?

Hello, Welcome to the feel and question.

Here is a quick way do it out!

Build the Next.js project: Run the build command for your Next.js project, which typically generates a production-ready build in the “out”/ “build” folder.

npx next build && npx next export

Locate the build output: Once the build process is finished, locate the generated “out” folder in your Next.js project directory.

Copy the build output: Copy the entire contents of the “out” folder, including any subfolders and files.

Paste the build output in the Android project: Navigate to the root directory of your Android project in Capacitor. The default location is usually the “android” folder within your Capacitor project.

Paste the build output: Paste the contents of the “out” folder into the appropriate location in your Android project. By default, you can paste it into the “app/src/main/assets/public” directory of your Android project.

Sync the Android project: After pasting the build output, trigger a sync operation in Android Studio to ensure the changes are recognized. This can be done by clicking on the “Sync Project with Gradle Files” button or by selecting “File” -> “Sync Project with Gradle Files” in the Android Studio menu.

Build and run the Android project: Once the sync operation is complete, you can build and run your Android project to deploy the updated Next.js web application within your Capacitor app.

Voila you are done!.

Hope this question and learning helps.

Happy Learning!

Categories
Learning Learning Tech

Laravel getting error: Target class [App\Http\Controllers\GurbaniReadingController::class] does not exist. But file already exists!!

Hello Guys,

Facing this issue and struggling to find the cause?, okay then lets direct jump in to the fix I found or more precisely mistake I found!

In picture you might seeing controller name is different than I have mentioned below; I am changed it to Book, so don’t get confuse.

In my case I was wrapped the loading on controller in web.php route with single quotes!

Line of code causing this error:

Route::get('/book-readings/upload-photos', ['App\Http\Controllers\BookReadingController::class', 'uploadPhotos']);

Very carefully watch in above code code was wrapped in quotes: ‘App\Http\Controllers\BookReadingController::class’,
Controller should be loaded without single quotes;

And second important reason is it, this line should shall fall before the resource route if you have similar to this controller, in my case it was :

Route::resource('/book-readings', App\Http\Controllers\BookReadingController::class); 
// this line was defined before the above route I wanted to work! (I am not sure why this line causing to stop showing the page :/)

Finally I make these changes so everything started working smoothly & all routes loading fine and up!.

// Upload Audio Files:
Route::get('/book-readings/upload-photos', [App\Http\Controllers\BookReadingController::class, 'showPhotos'])->name('book-readings.upload-photos');
Route::post('/book-readings/upload-photos', [App\Http\Controllers\BookReadingController::class, 'uploadPhotos']);
Route::delete('/book-readings/upload-photos/{id}', [App\Http\Controllers\BookReadingController::class, 'destroyPhoto']);

Route::resource('/book-readings', App\Http\Controllers\BookReadingController::class);

Hope this will give you a hint to point the issue you might come up like this mostly when we are new and learning and developing new things!

Happy Learnings

Categories
Javascript Learning

How to fix Uncaught TypeError: Cannot assign to read only property ‘0’ of object occurring in JavaScript?

Hello,

This type error mostly get in scenario when you try to sort the readyonly data array.

For me this was occoured when I tried to sort the direct result from my GraphQL query response data like below:

const sortedData = data.bhangarwalas.sort((a, b) => a?.firstname > b?.firstname ? 1 : -1);

In above, data.bhangarwalas is graphql query response results which is readonly in nature as response.

To fix this issue the solution is quick fix for which I have too google to know the result!

Error Screenshot Uncaught TypeError: Cannot assign to read only property ‘0’ of object ‘[object Array]’

Here is the quick solution:

const sortedData = [...data.bhangarwalas];
      sortedData.sort((a, b) => a?.firstname > b?.firstname ? 1 : -1);

In code above, We need to clone or you in other words, copying the “data.bhangarwalas” into new array variable and then over that variable, we need to perform sorting operation, which results us right response.

Hope this help you to solve the quick error or to know what scenario this type of error is generated.

Thanks for reading.

Happy learning!