DEV Community: Dimer Bwimba

Understand React Js Hooks once and for all | part II

Dimer Bwimba — Thu, 10 Jun 2021 13:55:06 +0000

So I really recommend you guys to look at the part one.

let Gooooooo 👴👴👴 .

Let's move on to our next hook use context .

😊 This hook allows you to work with react context API, which itself is a mechanism that allows you to share or scope values throughout the entire component tree.

*😊 Let's imagine we have an object called moods that can be happy or sad. To share the current mood across multiple disconnected components, we can create a context, one part of the application might be happy, So we use a context provider to scope the happy mood there. Now any child component inside of it can inherit that value without needing to pass props down to the children. *

const moods = {
  happy: '😊',
  sad: '😔'
}

const MoodContext =  createContext(moods);

function App(props) {
    return (
       <MoodContext.Provider>
               //your components
       </MoodContext.Provider>
    );
}

And that finally brings us to the useContext hook. It allows us to access or consume the current value from the context provider,😊 which might live many levels higher in the component tree, reading apparent value with useContext is much easier😊 than passing props down through multiple children.

function App(props) {
    return (
       <MoodContext.Provider value={moods.happy}>
               <MoodEmoji/>
       </MoodContext.Provider>
    );
}

function MoodEmoji(){

     //consume value from nearest parent provider

     const mood = useContext(MoodContext);

     return <p>{ mood }</p>

}

_Now if the mood changes from happy to sad in the parent provider, the value here will be updated automatically. _

Now if you've ever used react context in the past, you've likely used the consumer component, the useContext hook is basically a cleaner replacement for the consumer.

And now let's switch gears to `useRef`.

This hook allows you to create a mutable object that will keep the same reference between renders.
It can be used when you have a value that changes kind of like set state, but the difference being that it doesn't trigger a re-render when the value changes.

☝️ For example, if we tried to build a counter button with useRef, we could reference the current count by calling count current.

However,

☝️ when we click the button, the count would never change in the UI, because `useRef` doesn't trigger a re-render, like `setState` does. So this can be useful when you need a mutable😊 value.

🦸But a more common use case for use ref is to grab HTML elements from the DOM, we can start by creating a null reference called my button, then connected to the raw HTML button using the ref attribute.

🦸🦸From there, we can reference the HTML button and a function to call native Dom API's like click in this example, which would programmatically click the button.

The bottom line is that when you need to grab an element from the DOM, use ref is the hook you're looking for.⬅🏃

😈🔥⬅🏃 The next hook we'll look at is a pretty scary one useReducer.

But what it does is actually very similar to setState, it just goes about it in a different way, using the Redux pattern,....

See you in Part_3

Why are functions in programming not considered "mathematical" functions?

Dimer Bwimba — Wed, 12 May 2021 01:19:01 +0000

For the sake of interest I was out looking for a discussion of functions in computer science as generalized functions. I started my search by something such as "computer functions as mathematical functions". NO paper discusses functions in computer science in terms of set theory, and they compare (not equate) mathematical functions and functions in programming. Where did I miss the buss? Mathematics need not be done with numbers, although the largest application of mathematics is to numbers.

Data Structure APIs , A brief overview of APIs as they relate to JavaScript data structures.

Dimer Bwimba — Fri, 07 May 2021 13:53:52 +0000

Two month of data structure and I'm completely lost , i have ADHD and this is my only way to learn this stuff(writing).

anyway 🤭

🤗 I'm a straight up beginner and if I lie in this " article " fill free to correct me.

leeeeet goooo 🦸‍♂️

🦸 Data structures are all about choosing the right tool for the job. Do you need to store data in an ordered way, or do you just need to be able to store it and retrieve it quickly? What’s more important to your use case: how fast the data structure performs, or how much memory it takes up? Different data structures all have advantages, disadvantages, and use cases, and that’s the whole reason that there are different data structures!

🤔Consider the Array in JavaScript. It’s a really great data structure for storing ordered data because you can retrieve elements by index number. If you want the first element of an array, all you need to do is fetch it with index 0: arrayName[0]. It also provides all sorts of helpful methods for manipulating elements, such as .push() , .pop() , .sort() , and more. However, if you want to find out if a particular element exists in an array, you may need to iterate through the entire array.

🦸 What if I asked you to keep track of a series of numbers as I gave them to you, and then asked at the end whether I’d given you a particular number, you could probably do that in your memory. But if I asked you to do that in a computer program, you’d have to make choices about how to store the data. Let’s look at two possibilities of how we’d build storeNumber() and doYouHaveThisNumber() functions. Given the following list of numbers:

1, 250, -42, 0.4, 17

How might you store these numbers if I gave you each at a time? You might use an array:

const listOfNumbers = [];
const storeNumber = num => listOfNumbers.push(num);
const doYouHaveThisNumber = num => listOfNumbers.includes(num);

In this program, storeNumber() adds a number to the array, and doYouHaveThisNumber() returns true if that number exists in the array, and false otherwise. Looks pretty good, but what if you had 10000000 numbers? doYouHaveThisNumber() might start getting pretty slow, since Array.prototype.includes() iterates through the entire array until it finds the input value.

Let’s try using another built-in data type in JavaScript, the Object. Since all we want to keep track of is whether we received a particular number, we can just store those numbers in an object, and set their values to true if we received them:

const receivedNumbers = {};
const storeNumber = num => receivedNumbers[num] = true;
const doYouHaveThisNumber = num => receivedNumbers[num] === true;

In this case, we’ll have the same result on the outside, but because retrieving a value from an object is much faster than iterating through an array, the overall result will be faster.

In both cases, the public API of the code, meaning the parts of the code that we want the end-user to interact with, remained the same: we had two functions, storeNumber() and doYouHaveThisNumber(). The underlying implementation, or the way the functionality was actually achieved, is what altered.

But wait a minute Wth is an API?

API is an acronym for application programming interface. An API allows end-users to access properties and methods of data structures easily and without needing to do the “behind the scenes” work.

For example, if you want to add a new element to the end of an array, you don’t need to loop through the entire array, counting how many elements there are, and then setting myArray[currentCount + 1] equal to the new value. Instead, you can just call .push() with the value you want to add. As a JavaScript programmer, you don’t actually need to know the actual strategy, or the underlying implementation, of how .push() added an element to the end of the array in order to use it.

The API of arrays provides lots of useful functionality, from adding and removing elements to the start and end of the array, to iterator methods that call a function on each element. If you wanted to find the smallest number in an array of numbers, however, you’d have to implement that functionality yourself.

Creating Your Own APIs

As you build your own data structures, you will implement the functionality to create public APIs. As in the example of storeNumber() and doYouHaveThisNumber(), the same public #API can be implemented in different ways, so it’s important to think about the advantages and disadvantages of different implementations.

An #API is like a message to end-users. Some languages have classes that can have methods or fields that are either #public #(can be called from anywhere) or #private #(can only be called from within the class). Public methods are the ones that end-users of that class can call, and #private methods are only used by the class itself. #JavaScript doesn’t really support this concept, so properties that aren’t meant to be #public are often preceded by an underscore _. Let’s look at an example where we want to build a data structure with a restricted API.

A stack is a data structure that only allows data to be added (pushed) or removed (popped) from the “top” of the stack. It just so happens that we could use an array as a stack, since it already has a .push() and .pop() method! However, arrays also allow you to add elements to the beginning or randomly access elements by index.

We’re not going to cover all the ins and outs of the stack data structure right now, but to demonstrate public API vs implementation, let’s build a quick custom Stack class:

class Stack {
  constructor() {
    this._array = [];
  }
}

In Stack, the array itself is stored as _array, so it’s a signal to other developers that to use the Stack as intended, they shouldn’t need to access it directly. From there, we can implement the .push() and .pop() methods:

class Stack {
  constructor() {
    this._array = [];
  }

  push(newValue) {
    this._array.push(newValue);
  }

  pop() {
    return this._array.pop();
  }
}

Now we’ve created a Stack data structure that limits direct interaction with the underlying data to .push() and .pop(). A developer could still access our underlying array to do other manipulation:

const stack = new Stack();
stack._array.unshift('value');

but they would then be breaking the intended behavior of the Stack class. The whole point of a public API is that we offer functionality to other end-users. If somebody were using our Stack class in a program, we could totally change the underlying implementation, and as long as the end-user API remained the same, their program should continue to function.

As you build your own classes and data structures, it’s important to keep in mind this distinction between implementation #(what does this need internally to do its job) and the outside API #(how should users of this actually interact with it?).

My Binary Search Solution is better than yours

Dimer Bwimba — Fri, 07 May 2021 07:57:26 +0000

const binary = (val, arr) => {
  let lower = 0;
  let upper = arr.length - 1;
  while (lower <= upper) {
    console.log("ols");
    const middle = lower + Math.floor((upper - lower) / 2);
    if (val === arr[middle]) {
      return middle;
    }
    if (val < arr[middle]) {
      console.log("right");
      upper = middle - 1;
    } else {
      console.log("left");
      lower = middle + 1;
    }
  }
  return -1;
};

Multiple onClick Events in React (With Examples)

Dimer Bwimba — Thu, 06 May 2021 16:28:28 +0000

There are several ways to call muliple onClick events in React, each with its own pros and cons. Let’s explore each one and learn how they work in React!

1.Call a Function onClick in React
2.Call Multiple Functions onClick in React
3.Write Logic Inside of onClick Event Handler in React

Calling multiple functions after clicking a button is a very common thing for a React developer to want to perform.

As a result, React provides the onClick event handler to attach to a UI element to detect when it is clicked.

Call a separate, single function and include all of your actions inside of that function (Best option).

Use an inline function inside of the onClick event handler and call multiple functions onClick.

Write your logic inside of an inline function that’s inside of the onClick event handler (Worst option).

The first way to perform multiple onClick events in React is to write your logic in a single function, and then call that function inside of the onClick event handler.

The second way to is to call multiple functions inside of the onClick event handler in React.

The third and frankly, worst option, is to write your logic inside of an inline function that’s inside of the onClick event handler. I do not recommend you use this option. I’m only including here so that you know every way to make multiple actions inside of an onClick event handler.

Each solution has its own pros and cons. Let’s take a look at code samples for all three, and the reasons why you’d want to perform each one over the other.

Call a Function onClick in React

✔ Good

The first solution to perform multiple onClick events in React is to include all of your actions inside of a function and then call that single function from the onClick event handler.

Let’s explore how to do that in a React Component:

import React from 'react';

function App() {

  function greeting() {
    console.log('hello!');
    waveHello();
  }

  function waveHello() {
    console.log('👋');
  }

  return (
    <div>
      <button
        onClick={greeting}>
        I'm a button
      </button>
    </div>
  );
}

export default App;

There are several reasons why you’d want to perform multiple onClick events using this method.

Your code is easier to read and understand

Logic code is seperate from view code

The React Component’s onClick handler is not re-compiled when the Component re-renders (unlike with inline functions)

It’s extremely important to remember the second point, that logic code should be separated from view code.

De-coupling view code from logic code is extremely important as there will be a time when your UI changes but your logic does not. Therefore, you won’t need to re-write your components as often if logic code is not closely coupled to view code.

Call Multiple Functions onClick in React

This isn’t the best option out of the three, but there may be situations where it is necessary.

import React from 'react';

function App() {

  function greeting() {
    console.log('hello!');
  }

  function waveHello() {
    console.log('👋');
  }

  return (
    <div>
      <button
        onClick={() => {
          greeting();
          waveHello();
        }}>
        I'm a button
      </button>
    </div>
  );
}

export default App;

The example above may look similar to the first solution, but it’s very different. Take a look at the button onClick event handler. We use an inline function inside of the onClick to call multiple functions.

Write Logic Inside of onClick Event Handler in React

❌ Bad

Your view and logic code should be de-coupled as much as possible. This promotes cleaner, modular code, and allows your View library to be switched out if necessary.

I’m only showing you how to do this so you are aware that writing code like this in React is a bad idea.

import React from 'react';

function App() {
  return (
    <div>
      <button
        onClick={() => {
          console.log('hello!');
          console.log('👋');
        }}>
        I'm a button
      </button>
    </div>
  );
}

export default App;

Well, there you have it. Three solutions to the same problem. Don’t you just love web development?

How to Update or Insert object into a nested array with Mongo DB

Dimer Bwimba — Wed, 28 Apr 2021 09:18:09 +0000

My question is here

Build Your First Reusable Components Using React

Dimer Bwimba — Sat, 24 Apr 2021 16:20:25 +0000

1.What are reusable components?
2.Making a React component reusable
4.Conclusion

What are reusable components?

Reusable components are those React components that can be used multiple times in your application. As a result, they need to be generic enough so that it’s free from complex business logic. If a component contains any complex logic inside it, not only does it become difficult to reuse, it also becomes less maintainable. React Hooks are the perfect fit for reusable component logic.

I'm straight up beginner , So if am lying on this `article` feel free to tell me 😃

Let Goooo!🦸‍♂️

=> For example, the App component below has a button which can’t be reused since it has the onClick prop hardcoded in it:

function handleClick(e) {
 // Some function which does fake API call
 fakeApiCall(e.target.value);
}

function App() {
 return (
   <div className="app">
     <button className="button" onClick={handleClick}>
       Submit
     </button>
   </div>
 );
}

😞 Here, there is no way in which we can modify the text Submit which is rendered on the button.

😊Buuut Iiiif we want to make the above component reusable, we need to make it more generic. First, we can make a separate Button function which can be imported and reused multiple times in our application:

function handleClick(e) {
 // Some function which does fake API call
 fakeApiCall(e.target.value);
}

function Button() {
 return (
   <button className="button" onClick={handleClick}>
     Submit
   </button>
 );
}

Then, we can reuse that Button component multiple times inside our App function:

function App() {
 return (
   <div className="app">
     <Button />
     <Button />
   </div>
 );
}

The above code renders the following user interface like:

|Submit | |Submit |

🤔 As you can see ladyzz and gentlemanzz , we are already reusing one component multiple times. But, we still need to make it more generic because we might want to do different tasks with one click of a button. We can do a form submit, form reset or do another API call to fetch some sh** tone of data, for example.

Let’s extract the handleClick function from our Button component and pass it as a prop. Our Button component will now look like the following:

function Button(props) {
 return (
   <button className="button" onClick={props.handleClick}>
     Submit
   </button>
 );

And our App component will look like the following:

function handleClick(e) {
 // Some function which does fake API call
 fakeApiCall(e.target.value);
}

function App() {
 return (
   <div className="app">
     <Button handleClick={handleClick} />
   </div>
 );
}

As you can see, we can pass any function to the Button component through the handleClick prop. I highly suggest that you check your props using PropTypes.

We can also use multiple Button components inside our App component:

function handleAPICall(e) {
 // Do some API call
}

function handleFormReset(e) {
 // Reset some form data
}

function App() {
 return (
   <div className="app">
     <Button handleClick={handleAPICall} />
     <Button handleClick={handleFormReset} />
   </div>
 );
}

Alright, alright, alright 😎! As you can see, we have made our Button component even more flexible. We can also pass the text which is rendered on the button as a prop.

Our Button component will now look like the following:
🎶🎶Tanrara rara 🎶🎶 😎

function Button(props) {
 return (
   <button className="button" onClick={props.handleClick}>
     {props.label}
   </button>
 );
}

😎 And our App component will look like the following:

function handleAPICall(e) {
 // Do some API call
}

function handleFormReset(e) {
 // Reset some form data
}

function App() {
 return (
   <div className="app">
     <Button handleClick={handleAPICall} label="Submit"/>
     <Button handleClick={handleFormReset} label="Reset"/>
   </div>
 );
}

It renders the following user interface like:

|Submit | |Reset |

It’s already very reusable.
But 🖐️🔊 "hold on wait a minute "🔊⛔, we can also add certain additional props like whether to render an icon before the label of the button as well.

To do that, we can change our Button component to the following:

function Button(props) {
  return (
    <button className="button" onClick={props.handleClick}>
      {props.icon} {props.label}
    </button>
  );
}

And, we need to pass that icon prop from our App component:

<Button
   handleClick={handleAPICall}
   label="Submit"
   icon={<i className="fas fa-arrow-alt-circle-right" />}
 />

The above example uses font-awesome but you can use any font you want zaddy.

👇
Also, it’s a good idea to render the icon prop only if it’s present. To do that, we just need to make the following changes to our Button component:

function Button(props) {
 return (
   <button className="button" onClick={props.handleClick}>
     {props.icon && props.icon} {props.label}
   </button>
 );
}

😎 Our component is very much reusable at this moment. We can also pass another additional prop called type which can control whether the button will be primary or secondary.

We need to make the following changes to our Button component:

function Button(props) {
 const className = `button ${props.type}`

 return (
   <button className={className} onClick={props.handleClick}>
     {props.icon && props.icon} {props.label}
   </button>
 );
}

Here, we will be passing a type prop from our App component which will be passed to the className of the button.

Our App component will now look like the following:

function handleAPICall(e) {
 // Do some API call
}

function handleFormReset(e) {
 // Reset some form data
}

function App() {
 return (
   <div className="app">
     <Button
       handleClick={handleAPICall}
       label="Submit"
       icon={<i className="fas fa-arrow-alt-circle-right" />}
       type="primary"
     />
     <Button handleClick={handleFormReset} label="Reset" type="secondary" />
   </div>
 );
}

We would also need to add a few lines of CSS to our application:

.button.primary {
 background-color: #0886ff;
}

.button.secondary {
 background-color: #73a800;
}

Finally, we can distinguish between our #primary and #secondary buttons. It’s also a good idea now to add a #default #prop to our Button component so that it #renders #secondary buttons by #default. This is really helpful if we #forget to pass the #type #prop to our Button component. We need to make the following changes to our Button component:

function Button(props) {
 const className = `button ${props.type}`

 return (
   <button className={className} onClick={props.handleClick}>
     {props.icon && props.icon} {props.label}
   </button>
 );
}

Button.defaultProps = {
 type: "secondary"
};

Now, if we have another Button component which doesn’t have the type prop, it will be a secondary button:

<div className="app">
 <Button
   handleClick={handleAPICall}
   label="Submit"
   icon={<i className="fas fa-arrow-alt-circle-right" />}
   type="primary"
 />
 <Button handleClick={handleFormReset} label="Reset" type="secondary" />
 <Button handleClick={handleFormReset} label="Click" />
</div>

🤖 "I will be back "

Follow me For Part II Tommmorrrrow , Honestly I just need a friends , but i will be back tho...

Error: createReadStream is not a function

Dimer Bwimba — Mon, 05 Apr 2021 10:27:59 +0000

this is my code click here
When I'm trying to upload a file to Cloudinary using apollo server and react js for the front-end

Fixed sidebar - scrollable content

Dimer Bwimba — Tue, 23 Feb 2021 02:35:17 +0000

A simple Tailwind layout to create a sticky sidebar and scrollable content next to it.

<div class="flex">
    <aside class="h-screen sticky top-0">
        // Fixed Sidebar
    </aside>

    <main>
        // Content
    </main>
</div>

Nuxt.js Smooth Scrolling with Hash Links

Dimer Bwimba — Sun, 21 Feb 2021 07:06:59 +0000

As of Nuxt.js release 1.4.2, the default scroll behavior does not work as expected when using element ID's as hash links in routes (example: about-us/#john).

For reference: Nuxt.js Default Scroll Behavior

When navigated to directly, meaning the user immediately enters through the hash appended route, the browser handles the scroll targeting to the element with the matching ID. This is the expected behavior and works perfectly on initial page loads for completely static pages.

Once the site has loaded, however, the site operates as a single page application (SPA) and the browser stops responding to route changes as those are now handled by the vue-router. This allows for quicker page loads and navigation within the site is more controllable, but the browser no longer handles scrolling to focus on element IDs specified in hash appended routes, which has potential for breaking sites utilizing this functionality.

The solution is to override the default router.scrollBehavior method from within the nuxt.config.js configuration object.

module.exports = {
  /*
  ** Router configuration
  */
  router: {
    scrollBehavior: async (to, from, savedPosition) => {
      if (savedPosition) {
        return savedPosition
      }

      const findEl = async (hash, x) => {
        return document.querySelector(hash) ||
          new Promise((resolve, reject) => {
            if (x > 50) {
              return resolve()
            }
            setTimeout(() => { resolve(findEl(hash, ++x || 1)) }, 100)
          })
      }

      if (to.hash) {
        let el = await findEl(to.hash)
        if ('scrollBehavior' in document.documentElement.style) {
          return window.scrollTo({ top: el.offsetTop, behavior: 'smooth' })
        } else {
          return window.scrollTo(0, el.offsetTop)
        }
      }

      return { x: 0, y: 0 }
    }
  }
}

This configuration override solves two problems. First, it applies smooth to the window.scrollTo action to allow the browser to handle smooth scrolling to the proper element if available.

window.scrollTo({ top: el.offsetTop, behavior: 'smooth' })

Second, it checks for the existence of the element several times (50 to be exact) over the course of several seconds. The default scroll behavior expects the content to be loaded by the time the scroll action is called, but default Nuxt sites load the framework and start initial render before the full content is loaded from the server or CMS. The default script will give up after the first miss, causing the page to stay focused at the top. Rather than giving up after the first failed attempt, this script continues to search the DOM for the expected element every 100 milliseconds for 5 seconds (approximately). There is in theory more programmatic ways to determine when the content has finished loading, but the cost of complexity likely outweighs the fringe cases this code does not cover.

const findEl = async (hash, x) => {
return document.querySelector(hash) ||
  new Promise((resolve, reject) => {
    if (x > 50) {
      return resolve()
    }
    setTimeout(() => { resolve(findEl(hash, ++x || 1)) }, 100)
  })
}

This approach works well in both Nuxt modes and gives a uniform user experience regardless of whether the SPA has finished loading or not.

How to pass dynamic image url in nuxt project . Ultimate Guide .

Dimer Bwimba — Fri, 19 Feb 2021 06:44:33 +0000

As the src properties will replaced by Webpack, you could do require function like this

<templae>
  <div>
    <img :src="imageUrl">
  </div>
</template>

<script>
export default {
  props: {
    imageUrl: {
      type: String,
      default: ''
    }
  }
}
</script>

*ParentComponent.vue

<template>
  <ChildComponentExample :image-url="require('~/assets/myimage.png')" />
</template>

This blog post explains how this works .:) Happy Code :)

How to Indent Your Text Using Tailwind . Ultimate Guide

Dimer Bwimba — Fri, 19 Feb 2021 05:35:39 +0000

You can use one of these two plugins:

https://www.npmjs.com/package/tailwindcss-typography

Use this plugin:

https://www.npmjs.com/package/tailwindcss-text-indent

...and configure it like this:

// tailwind.config.js

module.exports = theme: { textIndent: theme => theme('spacing'), // ... }, // ... }