DEV Community: JC

Part 2. Sharing data between siblings components using Context in React with Hooks

JC — Mon, 31 Jan 2022 04:50:45 +0000

Once we've got a context provider defined and in place it's time to make the data available on any child component. For this we will use a hook called useContext.

"useContext accepts a context object and returns the current context value for that context. The current context value is determined by the value prop of the nearest above the calling component in the tree". What this means is this hook will give us access to the prop passing the context defined by the context function and wrap in the provider. Let's see it in the component.


import React, { useContext } from "react";



function Profile()  {

    const pots = useContext(PostContext)
    const setPots = useContext(PostDispatchContext)



   return (
        <> 
   {posts.map(post => <h2>{post}</h2>)}
       </> 

      );
}

export { Profile }

First we import useContext from the react library. Then we define our props calling the hook and passing the context created for the prop. In this case for posts we created PostContext to query the context state and PostDispatchContext to mutate the context state. This will give us access to the props state set as an empty array at first.

And finally we can return the data we need. It's important to notice that setPosts is a function as de-structured. When using it to update posts it expects an object that we can easily iterate as a list of posts.

Context provides a way to pass data through the component tree from parent to child components, without having to pass props down manually at each level. It's specially useful to pass data deeply and great tool as a global state management.

While React Context is native and simple to set, it isn’t a dedicated state management tool like Redux, however it can be really useful for prop drilling.

Thanks for reading..

Sharing data between siblings components using Context in React with Hooks

JC — Mon, 31 Jan 2022 03:30:59 +0000

Context in react was designed to share data or props in your app making this info available globally for a tree of components. In few words allows you to pass this info between any component without having to explicitly pass a prop through every level of the tree, like from parents to child for example. Before using Context is important to know that it's generally used when some data needs to be accessible by many components at different nesting levels. So how we use it?

Let's say we need a prop called posts that needs to be available in few components of your app. The first thing will be to create a folder in your application called context which will contain your PostContext .jsx or .js file. Let's also say that we need to set the initial State of this prop as an empty array. So we can have something like this:

import React, { createContext, useState } from "react";


const PostContext = createContext(null);
const PostDispatchContext = createContext(null);

function PostProvider({ children }) {
    const [posts, setPosts] = useState([]);

    return (
      <PostContext.Provider value={posts}>
        <PostDispatchContext.Provider value={setPosts}>
          {children}
        </PostDispatchContext.Provider>
      </PostContext.Provider>
    );
  }

  export { PhotoProvider, PhotoContext, PhotoDispatchContext };

We import createContext & useState from the react library. This will allow us to create two const, first the Postcontext itself which allows to query the context state and the PostDispatchContext to mutate the context state. We can set that to null or undefined.

Now we just need to create a function to define our provider and pass the children components that will use the data we are trying to share. It's important to mention that a "provider" is used to encapsulate only the components that needs the state in this context. we will see that later on. Finally we assign the state using the useState Hook and set an empty array as shown. Once this logic is defined we render the value of the context and wrap the values we need to expose later through the children components. It might sounds complicated but all we are doing here is to share the initial state of our prop and make it available through the provider. Once this is set It's time to export the provider PostProvider.

Let's wrap the components that will use the posts and setPosts as Props.


function App() {
  return (
    <>
      <PostProvider>
        <User />
        <Comments />
     </PostProvider>
    <>
  );
}

Now posts is available globally in your app and useful for the components wrap with the provider. Due the nature of react context It is really important to make this props available on the components that really need them only. This is to avoid any performance drain in your app. Check the second part where I explain how to finally set the data for each components using useContext hook.

Happy Coding

Photo App on React and Ruby on Rails...

JC — Sun, 30 Jan 2022 03:26:44 +0000

The scope of this project was to implement React as front-end to my photo app Ruby of rails backend. So the app allows you to upload photos.

Also you can create an account logging . Once you Sign in and create an account you will be able to add photos and delete them. This is all possible thanks to Ruby on Rails and React.

An API was created to display the data. JWT was implemented to keep the data safe when created.

React handles the Front-end and a user authentication was build with React/Redux to easily handle our JWT.

Check it out and have a look at the code. It might be fun.

What I learn:

Complete and run a whole project in React and Ruby on rails.

Integrate Redux to my react application and use it to handle a user JWT authentication.

Create an app that serves as a community to add photos and share them.

The implementation of useContext as a hook to help sharing data throughout different components in the app.

The use of Hooks on functional components as well as managing states and props.

Check the repo and have fun. Questions, concerns or issue can be manage though GitHub.

You can find the Front-end here:

35mm front-end

and Backend here:

35mm Backend

Please follow the instructions to install and ..Happy Coding

Thanks for reading ..

Fun Ruby CLI project if you like Weather Stuff

JC — Sun, 21 Nov 2021 15:41:56 +0000

Weather Today in a Ruby CLI

So I made my first gem Yay. It was challenging. It was hard. It took me a long time.

I decided to build an app that took data from three different APIs. Why? Well I wanted to make it a bit challenging.

This CLI was built to give a quick update of the weather either by your current location or any location you ask for. Also It provides headlines of BBC news as a plus.

Check it out

So how do I build it?

The first step was to identify the API's to use:
so I signed for these awesome ones:

OPENWEATHERMAP. To get the good weather data.
NEWSAPI. To get the news.
Abstract. To get a precise timeZone on the location enquiry. They've got a free plan too. So all cool.

So let's write the code:

I needed to get the data for the weather first so I built one Class for the IP location and one Class for a city search. I used HTTParty to get the data and JSON to parse it.

def self.api_location(unit)
response = HTTParty.get("https://api.openweathermap.org/data/2.5/weather?lat=#{lat}&lon=#{lon}&appid=#{ENV['API_KEY']}&units=#{unit}")
        data = JSON.parse(response.body, symbolize_names: true)
        @weather_today = self.new
        @weather_today.location = data[:name]
        @weather_today.time = Time.at(data[:dt])
        @weather_today.temp = data[:main][:temp].to_i

same for the search per city.

def self.select_name(units, location)
response = HTTParty.get("http://api.openweathermap.org/data/2.5/weather?q=#{location}&appid=#{ENV['API_KEY']}&units=#{units}")
      data = JSON.parse(response.body, symbolize_names: true)
      @weather_today = self.new
      @weather_today.response_code = data[:cod]
      if @weather_today.response_code === "404"
        spinner = TTY::Spinner.new("[:spinner] cod")
        spinner.error("404")
        return
      else
      @weather_today.location = data[:name]

Once I located all data I needed for current weather and also forecast I started bulding my CLI. I wanted to get the following results:

Check the current weather at current location and Forecast for the next 5 days
Check the current weather and Forecast for the next 5 days at any city you name in the world plus a link to the city location on Google Maps. It only will work with city names.
It gives you 3 unit system to choose from:
- Default (temperatures in Kelvin)
- Metric (temperatures in Celsius)
- Imperial (temperatures in Fahrenheit)
Read and open in your browser the latest world headlines from BBC News.
Gives you a funny quote according to weather conditions courtesy of the AUTHENTIC WEATHER APP.
Also a Big GoodBye.

"Voila" you are ready to check the weather and news.

Well not so Easy. I wanted to make it more user friendly so on my CLI I added a few TTY components that are really handy.
Especially TTY-Prompt, TTY-Box & TTY-Tables. Want to check them all click Here. They are easy to implement and you can find plenty of documentation online. So give it a try if you like them.

class WeatherToday::CLI

    $prompt = TTY::Prompt.new(active_color: :cyan)

    def call
        welcome
    end

    def welcome
        puts Rain.go 
        puts Intro.go 
        sleep (3)
        puts"
                                             .-. .-.  ,---.   ,-.     ,-.      .---.   
                                             | | | |  | .-'   | |     | |     / .-. )  
                                             | `-' |  | `-.   | |     | |     | | |(_) 
                                             | .-. |  | .-'   | |     | |     | | | |  
                                             | | |)|  |  `--. | `--.  | `--.  \ `-' /  
                                             /(  (_)  /( __.' |( __.' |( __.'  )---'   
                                            (__)     (__)     (_)     (_)     (_)     
    ".colorize(:cyan)
         units_selection
         puts ''
         puts "World's News"

All right. Once my CLI was running and the hard part of the project was done I decided to add some art ;). Well not exactly but something like a ASCII art. There are plenty of resources online so you won't get lost.

Well I know it is a lot but It was fun. What I learn:

API can be tricky and hard to work with but once you are in the Matrix It becomes easier.
I need to improve my level of abstraction but for the first project I wasn't so bad I believe.
There is so much you can do but overtime. It's hard to learn all at once.
Finally it is cool to add something else you love ... like Art for example. It makes coding more enjoyable.

Thanks for reading ..

So long

Simple and Fun Sinatra Project

JC — Sun, 21 Nov 2021 15:38:24 +0000

My Weather BE Sinatra Project

As I like weather Stuff, my Sinatra project was an extension and improvement of my CLI Project. I kept working in refactoring the code and also adding some cool API's.

The scope was to create a good user experience and great look. So the app allows you to check the weather at your location and find and update to any other location in the world. Also give you News of the day and a gallery of photos from the city you are connected. Once you Sign in and create an account you will be able to add different locations, modify and also delete them.

Check it out and have a look at the code. It might be fun.

What I learn:

APIs are fun to work with and also a great source of interesting data.
You can add some JS script if you dare to improve the user experience.
Sinatra is simple to use and friendly. It was hard to find a lot of info online though.
It is kind of cool to work out of your comfort zone and add new stuff like JS. It will help you for your future projects.

Thanks for reading ..

Easy Weather check on JavaScript and Rails as Backend.

JC — Thu, 04 Nov 2021 21:42:06 +0000

So I made my fourth app Yay. It was challenging. It was hard. It took me a long time. Basically I build my Backend on Ruby on Rails and the Frontend on JS.

I decided to build an app that took data from the Open Weather map API. Why? Well I like weather stuff :)

This app was built to give a quick update of the weather either by your current location or any location you ask for.

Check out the Frontend

& Backend

So how do I build it?

The first step was to identify the API's to use:
so I signed for this awesome one:

OPENWEATHERMAP. To get the good weather data. So all cool.

So let's write the code:

I needed to get the data for the weather first so I built my backend on rails and fetch the weather. I used rails to get the data and JSON to parse it.

class Location < ApplicationRecord
    belongs_to :user

    def self.search_location(location_query)
        results = Geocoder.search(location_query)
        if  results === []
            begin
              raise Error
              rescue Error => e
                puts e.message
              end
              return
         end 
        response = results.first.coordinates  
        lat = response[0]
        lon = response[1]
        self.search(lat, lon)  
    end 

    def self.location_query(location_query)
        results = Geocoder.search(location_query)
        response = results[0]
    end


    def self.search(lat, lon)
        response = HTTParty.get("https://api.openweathermap.org/data/2.5/onecall?lat=#{lat}&lon=#{lon}&exclude=minutely&appid=#{ENV['API_KEY']}&units=metric")
        data = JSON.parse(response.body) 
    end 

   etc..............

Once I located all data I needed for current weather I started building my app. I wanted to get the following results:

Check the current weather at any location
Be able to give users the option to store a weather card on their accounts.
It will give the current temperature and conditions.
Fetch all this data and building my Frontend application with JavaScrip.

To fetch the data a create a Class API and add some async functions for this goal like so:

class Api {
    constructor() {
        this.baseURL = "http://localhost:7000/"
    }

    async fetchUsers() {
        let response = await fetch(this.baseURL + `/users`)
        let data = await response.json()
        return data
    }

    async postUser(email, password, registerUser) {
        let data = {
          user: {
            email,
            password
          }
        }


        let configObj = {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              Accept: "application/json"
            },
            body: JSON.stringify(data)
          }
          const fetchURL = registerUser ? `${this.baseURL}users` : `${this.baseURL}login`;

          fetch(fetchURL, configObj)
            .then(resp => resp.json())
            .then(data => { 
                if (data.errors) {
                email = '';
                password = '';
                alert(data.errors);
              } else {
                window.sessionStorage.currentUsername = data.user.username;
                window.sessionStorage.currentUserId = data.user.id;
                loginButton.remove();
                userLogin.remove();
                welcomeLoggin();
                allLocation(data.user.id);
                displayForm()  
            }
        });  
    }


    async createUser(username, email, password, registerUser) {
        let data = {
          user: {
            username,
            email,
            password
          }
        }
        console.log(data)

        let configObj = {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              Accept: "application/json"
            },
            body: JSON.stringify(data)
          }
          const fetchURL = registerUser ? `${this.baseURL}login` : `${this.baseURL}users`;

          fetch(fetchURL, configObj)
            .then(resp => resp.json())
            .then(data => { 
                if (data.errors) {
                username = '';
                email = '';
                password = '';
                alert(data.errors);
              } else {
                window.sessionStorage.currentUsername = data.user.username;
                window.sessionStorage.currentEmail = data.user.email;
                window.sessionStorage.currentUserId = data.user.id;
                loginButton.remove();
                userLogin.remove();
                welcomeLoggin();
                allLocation(data.user.id);
                displayForm()  
            }
        });  
    }


    async fetchURL() {
        const fetchURL = registerUser ? `${this.baseURL}users` : `${this.baseURL}login`;
        let response = await fetch(fetchURL)
        console.log(response)    
}

"yeah" you are ready to check the weather at any location.

Well not so Easy. I wanted to make it more user friendly so added some extras for users on JS. So I created an User Class and a Basic Authentication connected to my backend on Rails...

class Weather{
    constructor(){
        this.login = new Login()
    }
}

..........


async function validateLoginForm() {
        const loginemail = document.getElementById("logEmail").value;
        const loginpassword = document.getElementById("logPassword").value;

        if (loginemail == "" || loginpassword == "") {
            document.getElementById("errorMsg").innerHTML = "Please fill the required fields"
            return false;
        }

        else if (loginpassword.length < 2) {
            document.getElementById("errorMsg").innerHTML = "Your password must include atleast 8 characters"
            return false;
        }
        else {
            const data = await api.postUser(loginemail, loginpassword, false);
            // alert("Successfully logged in");
            return true;
        }
    }

.. Etc

All right. Once my app was running and the hard part of the project was done I decided to add a face for each weather query... meaning a "Weather Card" ;)

Well I know it is a lot but It was fun. What I learn:

APIs can be tricky and hard to work with but once you are in the Matrix It becomes easier.
JS could be really challenging fetching elements from and API. Using Classes simplify the job.

Thanks for reading ..

So long

35mm a Rails App for your pictures...

JC — Mon, 20 Sep 2021 02:10:08 +0000

As I like photo Stuff, my Ruby on Rails project was uploading photos and sharing through an application. I kept working in refactoring the code and also adding some cool stuff.

The scope was to create a good user experience and great look. So the app allows you to upload photos, add tags like or not like them. Also you can create an account logging with your Facebook credential, cool right?? . Once you Sign in and create an account you will be able to add photos, modify and also delete them as well as check other users pictures and comment on them. This is all possible thanks to Ruby on Rails.

Check it out and have a look at the code. It might be fun.

35mm

What I learn:

Complete and run a whole project in Ruby on rails.
Integrate varius Gems like Device and Omniauth and Shrine to enhance the user experience of your app.
Create an app that serves as a community to add photos and share them.
It is kind of cool to work out of your comfort zone and add new stuff like JS. It will help you for your future projects.

Thanks for reading ..