Forem: Collins Mutai

Upload image files with Multer

Collins Mutai — Fri, 26 Jan 2024 05:56:24 +0000

Multer is a nodejs middleware for uploading files in a nodejs application (Express Multer Middleware, n.d.).
To use multer install the package using

npm install multer

Once it is installed, import the package using this command

const multer = require("multer")

Next is configuring the files' storage destination and preferred filenames. A callback function is used to create the filenames for each of the file uploads.

const storage = multer.diskStorage({
  destination: "./images",
  filename: (req, file, cb) => {
    return cb(
      null,
      `${file.fieldname}_${Date.now()}`
    );
  },
});

After configuring the storage location and the filename, add the storage object to a multer instance.

const upload = multer({ storage: storage });

The middleware is then added to the request to process any incoming file from the request body. A post request to the route "/upload" will upload a single image file from a multi-part form field named product and save it inside a folder called images.

app.post("/upload", upload.single("product"), (req, res) => {
  res.json({
  file_info: req.file,
});

To access the file details, we can use the output of the res.file object and return it in json format.

{
  "file_info": {
    "fieldname": "product",
    "originalname": "img3.jpeg",
    "encoding": "7bit",
    "mimetype": "image/jpeg",
    "destination": "./upload/images",
    "filename": "1706247839665_img3.jpeg",
    "path": "upload/images/1706247839665_img3.jpeg",
    "size": 107421
  }
}

This is an easy way to upload files in a nodejs application. With more configurations, you can specify the required file types and so on.
Credits:

GreatStack. (2024, January 2). How to create full stack E-Commerce website using React JS, MongoDB, Express & Node JS 2024 [Video]. YouTube. https://www.youtube.com/watch?v=y99YgaQjgx4
Express multer middleware. (n.d.). https://expressjs.com/en/resources/middleware/multer.html

React useContext to Manage State

Collins Mutai — Sun, 03 Dec 2023 21:44:57 +0000

I struggled with useContext before I could wrap my head around it. It turns out it's really a simple and elegant way to persist data in a react application.
To create a context we need to import from react.
import {useContext} from 'react';
Then create an instance of the context.
export const UserContext = useContext.create({})
Then create a wrapper and export it because we'll need to wrap the context around all our components.
const [name, setName]=(null) export function ContextProvider({children}){ return ( <UserContext.Provider value={name,setName}> {children}</UserContext.Provider> ) }
This makes it possible to provide for any of our routes, the value inside our context. So wrapping the ContextProvider in top level component is key. We can do so in the root file. <ContextProvider><App/></ContextProvider>
We can also wrap the context around our routes. <ContextProvider><Routes><Route path={'/'} element={<Home/>}/></Routes></ContextProvider>
For instance when a user logs in we can set the name of the user inside the context therefore making it accessible from any component that might require it.
import {useContext,useState} from react'; const {UserContext} = './UserContext' const [username, setUsername] = useState('') const {setName} = useContext(UserContext); setName(username)
Let say inside our header component we need to find out the name of the currently logged user. We can do so by tapping into the context and reading the name that's currently stored.

import {useContext,useState} from react';
const {UserContext} = './UserContext'
const Header = ()=> {
const {name} = useContext(UserContext)

return (
<>
{name && (
<p></p>
)}

</>
)
}

As you can see the useContext hook is really powerful and comes handy in small to medium size applications where you don't need redux or other state management tools to manage complex state. Thanks all for checking this out. Happy coding 🧑‍💻

React useEffect Hook

Collins Mutai — Sun, 03 Dec 2023 20:34:18 +0000

A react hook that runs after component's first render. It has to be called inside a component function like all react hooks.

import {useEffect} from 'react';

useEffect(()=> {
console.log('useeffect running')
},[])

The useEffect is useful when we want to perform an action when the state of our application changes. For example when getting user input. The state change will trigger the useEffect hook to rerun. The state acts as a dependency.

```import {useState} from 'react';

const [userInput, setUserInput]= useState('')

useEffect(()=> {
console.log('useeffect running')
}, [userInput])



Finally the useEffect allows us to run cleanup actions. The clean up function runs right after the dependencies change but before the useEffect is triggered by the new dependency.

useEffect(()=> {
console.log('useeffect running')

return ()=> {
console log('cleanup function')
}
})



Together with other react hooks, useEffect hook is a powerful tool to build react applications.

React useEffect Hook

Collins Mutai — Sun, 03 Dec 2023 20:33:31 +0000

A react hook that runs after component's first render. It has to be called inside a component function like all react hooks.

import {useEffect} from 'react';

useEffect(()=> {
console.log('useeffect running')
},[])

```import {useState} from 'react';

const [userInput, setUserInput]= useState('')

useEffect(()=> {
console.log('useeffect running')
}, [userInput])



Finally the useEffect allows us to run cleanup actions. The clean up function runs right after the dependencies change but before the useEffect is triggered by the new dependency.

useEffect(()=> {
console.log('useeffect running')

return ()=> {
console log('cleanup function')
}
})



Together with other react hooks, useEffect hook is a powerful tool to build react applications.

React useEffect Hook

Collins Mutai — Sat, 18 Nov 2023 20:53:45 +0000

A react hook that runs after component's first render. It has to be called inside a component function like all react hooks.

import {useEffect} from 'react';

useEffect(()=> {
console.log('useeffect running')
},[])

import {useState} from 'react';

const [userInput, setUserInput]= useState('')

useEffect(()=> {
console.log('useeffect running')
}, [userInput])

Finally the useEffect allows us to run cleanup actions. The clean up function runs right after the dependencies change but before the useEffect is triggered by the new dependency.

useEffect(()=> {
console.log('useeffect running')

return ()=> {
console log('cleanup function')
}
})

Together with other react hooks, useEffect hook is a powerful tool to build react applications.

Template driven forms in Angular

Collins Mutai — Wed, 15 Mar 2023 12:52:48 +0000

To use template driven approach to handle forms. We assign a name to the form using the NgForm directive. We then use a submit event handler, to listen to a submit event. Since our form button is of type submit, a submit event is triggered every time a user submits the form.

<form (submit)="onAddPost(postForm)" #postForm="ngForm">
    <input type="text" ngModel name="title" #title="ngModel">
    <textarea rows="4" ngModel name="content"  #content="ngModel"></textarea>
    <button type="submit"> Save Post </button> 
</form>

The NgForm creates an instance of the form and binds to the form in the template. To access the forms inputs we call the form instance and its value property.

onAddPost(form: NgForm) {
    console.log(form, form.value, form.value.title, form.value.content);
}

Zuri internship August 2021 Cohort

Collins Mutai — Mon, 16 Aug 2021 08:10:06 +0000

My name is Collins Mutai, a fullstack software engineer from Kenya. I am on the backend development track for the August 2021 Zuri internship cohort. Zuri internship ia a 3 month long remote internship that enables participants to learn and improve their skills by working on real-world projects.
Upon successful completion of the Zuri internship, I hope to achieve the following goals.

Gain hands-on experience in a real work environment setting.
Build a portfolio of real-world projects.
Widen my network and collaborate with other students across the globe.
Gain mentorship from industry experts.

To all newbies, entry levels, intermediate and experts this is an opportunity to improve your knowledge and advance your career. Checkout the link attached to learn more. [https://internship.zuri.team/]

Below is some helpful beginner-friendly tutorial to get you up-to speed on the technologies that will be used during the internship period; Figma, Git and Python.
Figma tutorial
[https://www.youtube.com/watch?v=c9Wg6Cb_YlU]
Git tutorial
[https://www.youtube.com/watch?v=8JJ101D3knE]
Python tutorial
[https://www.youtube.com/watch?v=8ext9G7xspg&t=1195s]

Get in touch and feel free if you have any questions, will be happy to help. Happy coding!

Basic Git Commands

Collins Mutai — Tue, 25 Aug 2020 04:46:26 +0000

In this brief intro, we'll be diving into Git and learn basic git commands. Git is a version control system which comes handy when you're writing code as a team or independently. Some features that git allows includes; creation, merging, and deletion of multiple local branches that can be entirely independent of each other.

installation

[https://git-scm.com/downloads]
Use the git installer and follow the steps.
Check for successful installation and version

git --version

Set global configurations

Now lets configure git by running the following global commands.

git config --global user.name "user name" git config --global user.email "email address"

git init

Initializes your local git repository as your master.

git add . or git add "file name"

To add all the files to staging area, run

git add .

or add specific file using

git add <file name>

git commit -m "commit message"

To save the changes to your repository with a message which describes the commit.

git remote add origin "repository URL"

When you have an online repository and would like to link it to your local repository, you can do so by running.

git remote add origin <repository URL>

git push -u origin master

To push the local repository to the online repository.

git remote rename origin upstream

Running this command will rename the online repository. Then add the new URL using "git remote add origin <repository URL" and push the local to the online using "git push -u origin master"

git clone "repository URL"

To clone an online repository to your local machine.

git revert

Will reverse changes made by an earlier commit.

git status

To view the current status of the repository.

git checkout

View file from last commit and add it to staging area.

git restore --staged

Unstage files from last commit.

git restore

Restore file to original last commit.

git log --online

Show all commits.

git log

Display detail information about all commits.

git -b "branch name"

Running this command will create a new branch.

git branch -a

Show all branches.

git checkout "branch name"

Will move git from the master branch to the new branch.

git merge "branch name"

If there are new changes that needs to be added to the master, you can do so by switching back to the master branch.

git branch -a

To list branches.

git pull

To match the remote repository to the local.

Render Media List Component With Reactstrap

Collins Mutai — Wed, 01 Jul 2020 17:22:50 +0000

Reactstrap

Reactstrap makes it easy to use Bootstrap 4 components in a react application. Media is one of the components, and we'll use it to display a list of items in a simple react application. The list items will consist of an image, heading, & a paragraph.

Installation

To configure our project to use reactstrap, type the following at the terminal to install reactstrap, and Bootstrap 4 via either NPM or Yarn.

npm install --save bootstrap react-popper reactstrap

yarn add bootstrap react-popper reactstrap

Adding a Menu Component

Now inside our App.js let's import the menu component with the following code

import { Media } from "reactstrap";

The Media has properties including list, tag, object, heading, & body. List encloses all the list items, tag encloses each list item, object encloses the image while the heading & body encloses the list heading and body respectively. With that explanation out the way lol 😉, let's add the code snippet below in the App.js to see this in action.



export default function App() {
const Example = () => {
return (
<div>
   <Media list>
      <Media tag="li">
         <Media left top href="#">
            <Media
               object
               src="http://place-puppy.com/100x200"
               alt="place-puppy image"
               />
         </Media>
         <Media body>
            <Media heading>Top aligned media</Media>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
            scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
            in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
            nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
         </Media>
      </Media>
      <Media tag="li">
         <Media left middle href="#">
            <Media
               object
               src="http://place-puppy.com/200x200"
               alt="place-puppy image"
               />
         </Media>
         <Media body>
            <Media heading>Middle aligned media</Media>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
            scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
            in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
            nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
         </Media>
      </Media>
      <Media tag="li">
         <Media left bottom href="#">
            <Media
               object
               src="http://place-puppy.com/300x200"
               alt="place-puppy image"
               />
         </Media>
         <Media body>
            <Media heading>Bottom aligned media</Media>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
            scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
            in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
            nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
         </Media>
      </Media>
   </Media>
</div>
);
};
return (
<div className="App">
   <Example />
</div>
);
}

In essence we're declaring a function component called Example which returns three list items, each item has an image with a heading and body text.
Please checkout reacstrap documentation below for more examples on how to implement the Media component in a react application.

Reference [https://reactstrap.github.io/components/media/]

Passing Props in React

Collins Mutai — Sat, 20 Jun 2020 06:56:57 +0000

Components & Props

Props are inputs which are passed into Components and return React elements describing what should appear on the screen. Components helps with re-usability, by splitting the UI into independent sections.

With this in mind let's use a simple app that returns a div element with an h1 that displays a title and a p tag that displays the content.

const App = () => {
        return (
            <div>
                <h1>Changes in Service</h1>
                <p>We just updated our privacy policy here to better service our customers.</p>
            </div>
        );
    }

    // Renders the App component into a div with id 'root'
    ReactDOM.render(<App />, document.querySelector('#root'));
</script>


<!--The App component above will be rendered into this-->
<div id="root"></div>

Passing a Prop to a Component

Next we'll define a function component called Message which accepts a single "props"(properties). The Message component will be used to extract the h1 and p as a separate reusable entity in our app.

const Message = (props) => {
        return (
            <div>
                <h1>{props.title}</h1>
                <p>{props.content}</p>
            </div>
        );
    }

 // Renders the App component into a div with id 'root'
    ReactDOM.render(<App />, document.querySelector('#root'));
</script>


<!--The App component above will be rendered into this-->
<div id="root"></div>

Rendering a Component

Now we can swap out the hard coded h1 title and p content by calling our Message component inside our app.

const App = () => {
        return (
            <div>
                <Message title="Changes in Service" content="We just updated our privacy policy here to better service our customers." />
            </div>
        );
    }

    const Message = (props) => {
        return (
            <div>
                <h1>{props.title}</h1>
                <p>{props.content}</p>
            </div>
        );
    }


    // Renders the App component into a div with id 'root'
    ReactDOM.render(<App />, document.querySelector('#root'));
</script>


<!--The App component above will be rendered into this-->
<div id="root"></div>

The h1 and p is being passed as a single object which we refer to it as props.

That's all for today, thank you guys for following along till the end. For more detail explanation, please checkout React Docs, link attached below. Happy coding. 😎
Reference [https://reactjs.org/docs/components-and-props.html]

How to automate git commits

Collins Mutai — Wed, 27 May 2020 11:17:18 +0000

Create a folder with a file name "push.bat" and save the file type as All files, then add the following code.

git add .
git commit -m %1
git push

Next configure the path by opening Environment Variables on your machine then edit path, under path section, add the path to the "push.bat" file and click ok to exit.
Now we can push changes to a remote repository using a single line of code like so.

push "commit message"

That's it guys, this was a time saver for me because I'm currently taking a course on Bootstrap 4 and I have to regularly do commits. Happy coding 🤓

Credit [https://medium.com/@cibiaananth/how-to-add-commit-and-push-to-git-using-one-command-on-windows-25d756f444b7]

Controlled Components - React Forms

Collins Mutai — Tue, 21 Apr 2020 05:34:52 +0000

HTML forms elements like input,textarea, and select typically re-renders every time a user submits an input. However with React, we can keep the state of the input form element in the component that renders it and only update it using useState().

With this capability in mind, we can get the value that the user inputs and use it anywhere else on our web application. This makes React state be the "single source of truth". We now can get the value of the input element by looking at our state at that current moment.

A good example would be something like a login screen, once the user submits their login credentials and is verified, the welcome screen will display a welcome text with their name on it.

To illustrate this in action we going to be using a div container with an h1 that updates it's innerText with the word "Hello" plus the name submitted on the input field when the user clicks submit.

<div className="container">
      <h1>Hello</h1>
      <input
        type="text"
        placeholder="What's your name?"
       />
      <button>Submit</button>
    </div>

Now let's create an event handler which handles onChange events on our input field. The handleChange() will get called when a user starts typing and logs the value to the console.

function handleChange(event) {
    console.log(event.target.value); // Prints the value from the input field
  }

<div className="container">
      <h1>Hello</h1>
      <input
        onChange={handleChange}
        type="text"
        placeholder="What's your name?"
        />
      <button>Submit</button>
    </div>

In order to control the state of our input element, we'll need to declare a useState() and set the value of the input as the state variable.

const [name, setName] = useState("");

  function handleChange(event) {
    setName(event.target.value);
    console.log(name); // Prints the value from the input field
  }

At this point everything is working great, we now have access to our state and we know for sure what the value is for our input by checking at our state variable.

But we far from over , remember our goal was to be able to update the h1 innerText dynamically when the user submits an input. We need to find a way to keep track of our submit button so that every time the user clicks Submit, the h1 is automatically updated. Thankfully, there's an onClick event type that we can tap into.

Now we're getting close.😜 Using the onClick event, let's create another event handler that gets called whenever the submit button is clicked.

function handleClick(event) {
    console.log("I got clicked!"); //Prints I got clicked!
   }
<div className="container">
      <h1>Hello</h1>
      <input
        onChange={handleChange}
        type="text"
        placeholder="What's your name?"
        value={name}
      />
      <button onClick={handleClick}>Submit</button>
    </div>

Since the h1 will constantly change depending on the input value, we'll need to keep track of it. And an easy way to do that is by using useState() like so.

const [headingText, setHeading] = useState("");

Next we'll assign the h1 text as the state variable called "headingText, then set headingText as the name variable from our first useState function. In this case the name variable which corresponds to the value of the input field will now be set to the state of our h1. So technically, we are getting the value from the input field and adding it to our h1 text like so.

const [headingText, setHeading] = useState("");

function handleClick(event) {
    setHeading(name);
 }

<div className="container">
      <h1>Hello {headingText}</h1>
      <input
        onChange={handleChange}
        type="text"
        placeholder="What's your name?"
        value={name}
      />
      <button onClick={handleClick}>Submit</button>
    </div>

Our final code snippet will look like this

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");
  const [headingText, setHeading] = useState("");

  function handleChange(event) {
    setName(event.target.value);
    console.log(name);
  }
  function handleClick(event) {
    setHeading(name);
    // event.preventDefault();
  }
  return (
    <div className="container">
      <h1>Hello {headingText}</h1>
      <input
        onChange={handleChange}
        type="text"
        placeholder="What's your name?"
        value={name}
      />
      <button onClick={handleClick}>Submit</button>
    </div>

  );
}

export default App;

To summarize, we turned the input element into a controlled component, by making the React state be the input’s value . This allowed us to pass the value to other UI elements too like the h1.

Read more about Controlled Components 🤓 [https://reactjs.org/docs/forms.html#controlled-components]