DEV Community: Velcruza

How to display different components based on user authentication

Velcruza — Wed, 02 Feb 2022 02:56:16 +0000

Hey there! Ever want to display different components based on whether or not your user is logged in? Well, you're in the right spot. Let's dive right in.

To start off, you're going to want your two different components that you'll be displaying based on user authentication. For this example the two components I'm using are <LoggedOut/> and <LoggedIn/>. Next step is we need a route on the backend to render current user info. For this example the route I used is /me and heres what that looks like in my user controller:

def me
        if current_user
            render json: current_user, status: :ok
        else
            render json: {error: "Not logged in"}, status: :unauthorized
        end
    end

From here, what we're going to be doing is fetching to this route /me to find out if our user is logged in, and if our user is logged in we're going set our current user to that and render our page based on that. That probably didn't make much sense but lets step through the code together.
In our App.js here is what we do:
We're starting off by setting 2 states

const [currentUser, setCurrentUser] = useState(null);

Now we're going to fetch to our /me route to figure out if our user is logged in or not, and based on that info: if the user logged in we're setting our current user to that data, and if not then our current user remains null:

useEffect(() => {
    fetch("/me", {
      credentials: "include",
    }).then((res) => {
      if (res.ok) {
        res.json().then((user) => {
          setCurrentUser(user);
        });
      }
    });
  }, []);

then in our return() we're going to dynamically render the elements based on if currentUser is a truthy value or a falsey value:

return (
      <>
        {currentUser ? (<LoggedIn/>) : (<LoggedOut/>)}
      </>
  );

and that's all you need!

You can change the names for LoggedIn and LoggedOut to be whatever components you want to render based on if you're user is logged in or not. I hope this helped you out in any way and appreciate you following to the end!

How to create simple group chats using Rails

Velcruza — Fri, 28 Jan 2022 07:14:06 +0000

Hey! Have you ever thought about implementing group chats in your project? Well, you're in the right place. I'm going to walk you step by step through the process of creating simple group chats using Rails backend. Let's get right into it.

To start off you're going to want to setup the controllers, models and serializers for your backend using something like:

rails g resource User name
rails g resource Group name
rails g resource Message text references:user references:group

Once you have that setup you want to go over to your User and Group models to make sure to add has_many :messages to their models. After doing that here's what your models should look like.

User:

class User < ApplicationRecord
  has_many :messages
end

Group:

class Group < ApplicationRecord
  has_many :messages
end

Message:

class Message < ApplicationRecord
  belongs_to :user
  belongs_to :group
end

Next you're going to want to setup your Messages Controller with an index and create and it should look like:

class MessagesController < ApplicationController
    def index
        render json: Message.all, status: :ok
    end

    def create
        new_message = Message.create!(message_params)
        render json: new_message, status: :created
    end

    private

    def message_params
        params.permit(:group_id, :text, :user_id)
    end
end

Now on your frontend when you fetch('/messages') with a get request it will return and array of objects (messages) that are already put in order of creation. From here you can filter this on your frontend to figure out what group/user the message belongs to. (on the other hand you can also do this on the backend with setting up custom routes and serializers to allow you to fetch to a route that will return messages that belong to a specific group). When creating a new message you just send a post request to your '/messages' with the user_id, group_id and text in the body object.

Hope this helped you a bit to get started on setting up some group chats!

Using setInterval() in Javascript

Velcruza — Wed, 05 Jan 2022 19:51:59 +0000

In my last project I wanted to set production per second and have my "factories" produce resources on a set time interval. Unfortunately I did not have enough time to figure out then so I decided to go back and look into how to use setInterval() in Javascript.

setInterval() repeatedly calls a function with a fixed time delay between each call. So you can utilize to do something like I mentioned above (producing x amount of resources every x seconds) or for animations! You can use it in a way to have your picture move from one position to the other every x amount of seconds (hint hint... you might maybe see this in our upcoming project).

Let's get into how to use setInterval() in your code now.

setInterval() takes in a callback function and a delay in milliseconds. The method returns an interval ID so you can remove it later by calling clearInterval().

basic example of the syntax:

let intervalId = setInterval(callBackFn, 1000)

function callBackFn(){
   console.log("This message will log every one second")
}

This example would log "This message will log every one second" to the console every one second.

Here is an example of using the clearInterval() method with setInterval() to be able to start/stop the function from executing every x seconds:

let nIntervId;

function changeColor() {
  // check if already an interval has been set up
  if (!nIntervId) {
    nIntervId = setInterval(flashText, 1000);
  }
}

function flashText() {
  const oElem = document.getElementById("my_box");
  if (oElem.className === "go") {
    oElem.className = "stop";
  } else {
    oElem.className = "go";
  }
}

function stopTextColor() {
  clearInterval(nIntervId);
  // release our intervalID from the variable
  nIntervId = null; 
}

document.getElementById("start").addEventListener("click", changeColor);
document.getElementById("stop").addEventListener("click", stopTextColor);

Things to be careful of when using the setInterval() method:
-If you're using it to manipulate data from a fetch request you have to keep in mind that the fetch request itself takes sometime
-Using it to setState can also get really funky (which is what happened with my project, therefore didn't end up using it)

How mapping out project components can help you

Velcruza — Wed, 17 Nov 2021 21:12:26 +0000

I started off doing my react projects on the fly without building out a map for myself of components and where State needs to go and where I'm passing props from/to. I started running into a lot of trouble with where I should be putting my states or where I can pass data from depending on where I fetch it etc. I decided then to learn to map out my components to help me be able to properly understand the structure of project.

Let us use a shopping website as our example. If I wanted to build something like that, it would need a lot of components. Initially what I did was try and think about the layout in my head, so let's try and do that here:
-I need some TopNav and BottomNav that will be rendered on every page/route of my website
-I also need a MainPage which will contain my ShopList, FeaturedList, and RecommendedList.
-Those then will contain their children items such as ShopItems, FeaturedItems, and RecommendedItems.
-I also need a CartPage that will display my cart and cost which will contain InventoryList(which has InventoryItems as a child) and CostDetails as well

Obviously you can keep going with this and it will get really complicated even if you write it out on paper. (That's with me not even mentioned state, props and fetching data... that's a whole other mess)

A much better way to do this is to sketch out a graph of your components and their children. I made a quick sketch of the same example that I used above, and now it will probably make sense.

I used the Drawio extension in VScode which is super easy and really nice to use for project planning. I really recommend you always take some time before starting your project to map out your components and their children and where you want your data to be fetched etc. before even touching a piece of code. This 100% will improve your time efficiency when it comes to actually coding and also your understanding of your own code.

Using setTimeOut() in JavaScript

Velcruza — Wed, 03 Nov 2021 06:31:16 +0000

Sometimes in your code delaying a function's actions can be really useful which is what I'm going to be talking about today!

Imagine the following piece of code:

console.log("Hey, ")
console.log("you?")
console.log("how ")
console.log("are ")

This would return us "Hey, you?how are ". Which doesn't really make any sense. (Obviously, the simplest/quickest fix would be to just reorganize our console.log or even combine it into one line but try to keep an open mind). A JavaScript function called "setTimeOut()" allows us to delay a function's actions after a specified number of milliseconds. setTimeOut() usually takes in a callback function or an anonymous function as one of its parameters and a number as it's other parameter.
For example:

setTimeOut(() => {console.log("delayed message")}, 500)

This would delay our "delayed message" by 500 milliseconds.

So, going back to our initial piece of code that we had used as our example. We can now use setTimeOut() on our console.log("you?") to make sure it gets delayed until after the other two messages have already been logged to our console:

console.log("Hey, ")
setTimeOut(() => {console.log("you?")}, 500)
console.log("how ")
console.log("are ")

Now this should return us "Hey, how are you?".

This was just a simple example of how you can utilize the setTimeOut() function in JavaScript. One thing that I've used it for is delaying a function call until I have fetched all the data from a public api that I was then using in said function. There are many other ways that you can implement this function into your code (if needed) to help you out if you're struggling with anything rendering/executing/etc. before you actually want it to.

One note to make though: figuring out the exact amount of milliseconds you want something to be delayed by can be quite difficult which is a downside of this. In the example I used above, realistically our computer doesn't need 500ms to log the other three messages to our console, but to a human, this isn't very noticeable.

Hope you guys enjoyed my little post about setTimeOut() and hopefully this will be useful to you someday :) !