DEV Community: JafetMeza

How to update your .gitignore file

JafetMeza — Thu, 17 Aug 2023 20:41:55 +0000

Problem

I do not know if you have faced this problem before, but if you are in a team maybe some of your colleagues or even you, had uploaded a file into the repository that should not be there, and then we found ourselves asking "What can we do to remove this file?".

First, we had to have put this file or file folder in our .gitignore file so that no one can upload it, not even by mistake. But don't worry we can fix it right away, just follow this simple steps.

Solution

1. Add the file or folder to ignore in your .gitignore file

(This is an example of a change in a .gitignore file)

## ADDING LOG FOLDER TO IGNORE AND ALL ITS FILES (Example)
log*

2. Make a commit with the change of your .gitignore file

git add .
git commit -m ".gitignore updated"

3. Remove the cache in your repository (this command is doing the job we wanted, it will remove all the files uploaded that should have been ignored)

git rm -r --cached .

4. Make a new commit to save the changes in your repository

git add .
git commit -m "Files removed from .gitignore"

And that is all, now you are able of updating any .gitignore file.

How to send data from a child component to a parent component in react with rxjs?

JafetMeza — Wed, 24 Aug 2022 22:54:13 +0000

If you have read my last post, (if you have not I strongly recommend to read it for knowing what I'm talking about) you probably know how to send data from a child component to a parent component, but this time I will show you how to do it in another way using a fantastic library called rxjs, you can read more from the documentation of what this library is about and learn how to use it.

For today's post I will show you how to use a little bit of this library to achieve our goal.

First, let's be clear, this library is using reactive programming, if you don't know what this is, to be short, the reactive programming is a combination of the best ideas of the Observer Pattern, Iterator Pattern and functional programming.

Now, let's define our problem.
We need a button where we show the amount of clicks that the user is making, but in the parent component we also have to display the amount of clicks. It goes something like this:

How can we do that?
Let's code to find out.

Children component

import { useEffect, useState } from "react";
import { Subject } from "rxjs";

// we create and export the observable;
// note the $ character at the end;
// this is the convention for observable variables
export const countObserver$ = new Subject();
export default function CustomButton({
  className,
  action = () => {},
  children,
}) {
  const [count, setCount] = useState(0); 

  useEffect(() => {
    // send [count] in our observable
    countObserver$.next(count); 
  }, [count]);// check all the changes of [count]

  return (
    <button
      className={`button ${className}`}
      onClick={() => {
        setCount(count += 1); // we count the clicks
        action();
      }}
    >
      {children} clicks: {count}
    </button>
  );
}

Parent component

import { useEffect, useState } from "react";
import CustomButton, { countObserver$ } from "../components/customButton";

export default function Example() {
  // we create the same variable as the children component
  const [count, setCount] = useState(0);

  useEffect(() => {
    // subscribe the observable, this function returns 
    // the count that is changing in the child component
    countObserver$.subscribe(setCount);
  }, []);

  const onClick = () => {
    console.log("do some action");
  };

  return (
    <div className="is-flex is-flex-direction-column is-align-self-flex-end">
      <CustomButton action={onClick} className="is-success mb-3">
        Button
      </CustomButton>
      <label className="label">Clicks: {count}</label>
    </div>
  );
}

And finally we'll have something like this:

Conclusion

With this approach we can see a little bit of what rxjs can do, if you want to know more about this library let me know and I'll post more about it, with a different examples.
There are endless possibilities of what we can do, for example if you need the count variable to be multiplied by 10, is just as simple as programming a pipe with a map function inside of it and multiply the data.

countObserver$.pipe(map((data) => data * 10)).subscribe(setCount);

Thank you so much for reading and feel free to contact me if you need anything.

How to send data from a child component to a parent component in react?

JafetMeza — Tue, 23 Aug 2022 19:33:25 +0000

To reach this goal we have to be aware about two different functions in react, useImperativeHandle and forwardRef.
I will not explain what are this function individually, it is better if we see it as a group.

When we use useImperativeHandle, the code will work until you use forwarRef in the same component, you will see an error like this if you are not using it.

To have better explanation of how to do it, let's do some code.

Imagine you need a button and this button have to save the amount of clicks that the user presses but we have to access this information only with another button in the same page, so basically we will have something like this.

First let's create the children component

import { forwardRef, useImperativeHandle, useState } from "react";
import PropTypes from "prop-types";

const CustomButton = forwardRef(
  ({ className, action = () => {}, children }, ref) => {
    const [count, setCount] = useState(0);

    // we are returning a function inside the ref
    // to returning the count of clicks
    useImperativeHandle(ref, () => ({
      getCount() {
        return count;
      },
    }));
    return (
      <button
        className={`button ${className}`}
        onClick={() => {
          setCount((count+= 1)); // we count the clicks
          action();
        }}
      >
        {children}
      </button>
    );
  }
);
// This line is because we get a warning
// When we use forwardRef we always have to have displayName
CustomButton.displayName = "Custom Button";

CustomButton.propTypes = {
  className: PropTypes.string.isRequired,
  action: PropTypes.func.isRequired,
};

export default CustomButton;

If you notice in the useImperativeHandle function we are returning a function call getCount() which returns the amount of clicks, but now maybe you are wondering how to use this component. Let's create the parent component.

import { useRef } from "react";
import CustomButton from "../components/customButton";

export default function Example() {
  // we create a reference to the first button
  const button1 = useRef();

  // function of the first button
  const onClick = () => {
    console.log("do some action");
  };

  // function of the second button
  const onClick2 = () => {
    // we get the count with the reference of the first button
    console.log(ref.current.getCount());
  };

  return (
    <>
      <CustomButton ref={button1} action={onClick} className="is-success">
        Button 1
      </CustomButton>
      <CustomButton action={onClick2} className="is-danger mt-3">
        Get count of button 1
      </CustomButton>
    </>
  );
}

As you can see, the function of the second button gets the count of the first button, but let run it and do some clicks and see the console.

The console says we have press the button 9 times, now let's press the second button.

We get the amount successfully! But let's do some more to see if we still get the right answer.

Conclusion

We can return anything from our children components, like a function as we did, or objects, string, and if you want we can return elements of the DOM or even another references, the power of this is pretty amazing.
There is another approach of passing data from a children to a parent but this is for another post...

Thank you so much for reading and feel free to contact me if you need anything.

useRef, how to make it dynamic?

JafetMeza — Tue, 23 Aug 2022 17:49:37 +0000

Why is necessary to know how to make dynamic the useRef hook?
Well, is necessary for different reasons for example, sometimes we have components that are created by iterations, and we need to have a reference to access the properties of the element.

export default function Component() {
  const list = ["one item", "other item"];
  const accordion = useRef();
  return list.map((item) => (
    <Accordion title="Something" ref={accordion}>
      <p>{item}</p>
    </Accordion>
  ));
}

The code above will not work because we are referencing all the items in the iterations with the same ref, but how to solve it? Is not as complicated as you may think.

First we have to be aware of the function createRef(). The rest is very simple but let's code to have a better explanation.

export default function Component() {
  const list = ["one item", "other item"];
  const elementsRef = useRef(list.map(() => createRef()));
  return list.map((item,index) => (
    <Accordion title="Something" ref={elementsRef.current[index]}>
      <p>{item}</p>
    </Accordion>
  ));
}

The difference between the first and second code is line number 3, where we solve the ref creating a list of references with the size of our list, then when we are using the ref into the component is just as simple as accessing the current property of the variable elementsRef and get the ref with the index of the iteration.