DEV Community: Touhidul Shawan

Need help

Touhidul Shawan — Wed, 19 May 2021 04:16:04 +0000

I am creating a helper function to get weather data using open-weather api

require("dotenv").config();
import axios from "axios";

export const getWeatherData = async (cityName: any) => {
  let getData = {};
  try {
    const response = await axios.get(
      `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${process.env.WEATHER_API_KEY}&units=metric`
    );
    const data = await response.data;
    getData = {
      forecast: data.weather[0].description,
      cityName: data.name,
      coordinate: data.coord,
    };
    return getData;
  } catch (err) {
    // console.log("Something Wrong!! Try again later.");
    console.log(err);
  }
};

This function receives a cityName. now I am calling this function on another file to get data

app.get("/weather", (req, res) => {
  if (!req.query.location) {
    return res.send({
      error: "You must give an address",
    });
  }
  const data = getWeatherData(req.query.location);
});

Here in data variable is showing that it is promise rather than object that I return from getWeatherData function.

How can I get the object that I want to get from getWeatherData?

Build Fun Translation App with React

Touhidul Shawan — Fri, 05 Mar 2021 10:42:52 +0000

What is it?

This app takes some text as input from the user then translates it according to character language. Suppose we want to translate some text to minion's language then

We have to select the Minion option from the home page first
Then we have to enter our expected text in the textbox field
Then we have to submit the form then it will be translated by expected character language

Steps

Create a new react app called funtranslation with
npx create-react-app funtranslation
Add react-router-dom for our navigation

yarn add react-router-dom or
npm install react-router-dom
Wrap BrowserRounter in index.js file

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
  <Router>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Router>,
  document.getElementById("root")
);

Create 6 different navigation item for our translator type like yoda, minion, dothraki, valyrian, mandaloriyan, shakespeare

NavBar.jsx

import NavItem from "./NavItem";

const NavBar = () => {
  return (
    <nav>
      <ul>
        <NavItem path="/yoda" linkName="Yoda" />
        <NavItem path="/minion" linkName="Minion" />
        <NavItem path="/dothraki" linkName="Dothraki" />
        <NavItem path="/valyrian" linkName="Valyrian" />
        <NavItem path="/mandalorian" linkName="Mandalorian" />
        <NavItem path="/shakespeare" linkName="Shakespeare" />
      </ul>
    </nav>
  );
};

export default NavBar;

NavItem.jsx

import { NavLink } from "react-router-dom";
const NavItem = ({ path, linkName }) => {
  return <NavLink to={path}>{linkName}</NavLink>;
};

export default NavItem;

Now setup route for all the components App.jsx

import { Route, Switch } from "react-router-dom";
import Home from "./containers/Home";
import Yoda from "./containers/Yoda";
import Minion from "./containers/Minion";
import Dothraki from "./containers/Dothraki";
import Valyrian from "./containers/Valyrian";
import Mandalorian from "./containers/Mandalorian";
import Shakespeare from "./containers/Shakespeare";

const App = () => {
  return (
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/yoda" exact component={Yoda} />
      <Route path="/minion" exact component={Minion} />
      <Route path="/dothraki" exact component={Dothraki} />
      <Route path="/valyrian" exact component={Valyrian} />
      <Route path="/mandalorian" exact component={Mandalorian} />
      <Route path="/shakespeare" exact component={Shakespeare} />
    </Switch>
  );
};
export default App;

create custom hooks that will handle our userInput Text on all 6 different components [ Yoda, Minion, Dothraki, Valyrian, Mandalorian, Shakespeare ]

useTranslateText.jsx

import { useReducer, useState, useEffect } from "react";

const textReducer = (state, action) => {
  switch (action.type) {
    case "ENTER_TEXT":
      return action.payload.text;
    default:
      return state;
  }
};

export const useTranslateText = (translator) => {
  const [textToTranslate, dispatch] = useReducer(textReducer, "");
  const [translatedContent, setTranslatedContent] = useState({});

  useEffect(() => {
    let isActive = true;
    const startTranslation = async () => {
      if (textToTranslate !== "") {
        const response = await fetch(
          `https://api.funtranslations.com/translate/${translator}.json?text=${textToTranslate}`
        );
        const data = await response.json();
        const content = await { ...data.contents };
        if (isActive) {
          setTranslatedContent(content);
        }
      }
    };
    startTranslation();
    return () => {
      isActive = false;
    };
  }, [textToTranslate, translator]);

  return [translatedContent, dispatch];
};

Create a TextField Component that will be responsible to take user input

TextField.jsx

import { useState } from "react";

const TextField = ({ dispatch }) => {
  const [userText, setUserText] = useState("");

  const handleChange = (evt) => {
    setUserText(evt.target.value);
  };

  const handleSubmit = (evt) => {
    evt.preventDefault();
    dispatch({ type: "ENTER_TEXT", payload: { text: userText } });
    setUserText("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        onChange={handleChange}
        placeholder="Enter your text here"
        max={50}
        value={userText}
      />
      <button type="submit">Translate</button>
    </form>
  );
};

export default TextField;

Now Create all 6 types of translator components **Yoda.jsx**

import TranslateCard from "../components/TranslateCard";
import { useTranslateText } from "../customHooks/useTranslateText";
import TextField from "./TextField";
import Layout from "../components/Layout";

const Yoda = () => {
  const [translatedContent, dispatch] = useTranslateText("yoda");
  return (
    <Layout>
      <TextField dispatch={dispatch} />
      {translatedContent.translated ? (
        <TranslateCard {...translatedContent} />
      ) : null}
    </Layout>
  );
};
export default Yoda;

**Minion.jsx**

import TranslateCard from "../components/TranslateCard";
import { useTranslateText } from "../customHooks/useTranslateText";
import TextField from "./TextField";
import Layout from "../components/Layout";

const Minion = () => {
  const [translatedContent, dispatch] = useTranslateText("minion");
  return (
    <Layout>
      <TextField dispatch={dispatch} />
      {translatedContent.translated ? (
        <TranslateCard {...translatedContent} />
      ) : null}
    </Layout>
  );
};
export default Minion;

**Dothraki.jsx**

import TranslateCard from "../components/TranslateCard";
import { useTranslateText } from "../customHooks/useTranslateText";
import TextField from "./TextField";
import Layout from "../components/Layout";

const Dothraki = () => {
  const [translatedContent, dispatch] = useTranslateText("dothraki");
  return (
    <Layout>
      <TextField dispatch={dispatch} />

      {translatedContent.translated ? (
        <TranslateCard {...translatedContent} />
      ) : null}
    </Layout>
  );
};
export default Dothraki;

**Valyrian.jsx**

import TranslateCard from "../components/TranslateCard";
import { useTranslateText } from "../customHooks/useTranslateText";
import TextField from "./TextField";
import Layout from "../components/Layout";

const Valyrian = () => {
  const [translatedContent, dispatch] = useTranslateText("valyrian");
  return (
    <Layout>
      <TextField dispatch={dispatch} />
      {translatedContent.translated ? (
        <TranslateCard {...translatedContent} />
      ) : null}
    </Layout>
  );
};
export default Valyrian;

**Mandalorian.jsx**

import TranslateCard from "../components/TranslateCard";
import { useTranslateText } from "../customHooks/useTranslateText";
import TextField from "./TextField";
import Layout from "../components/Layout";

const Mandalorian = () => {
  const [translatedContent, dispatch] = useTranslateText("mandalorian");
  return (
    <Layout>
      <TextField dispatch={dispatch} />
      {translatedContent.translated ? (
        <TranslateCard {...translatedContent} />
      ) : null}
    </Layout>
  );
};
export default Mandalorian;

**Shakespeare.jsx**

import TranslateCard from "../components/TranslateCard";
import { useTranslateText } from "../customHooks/useTranslateText";
import TextField from "./TextField";
import Layout from "../components/Layout";

const Shakespeare = () => {
  const [translatedContent, dispatch] = useTranslateText("shakespeare");
  return (
    <Layout>
      <TextField dispatch={dispatch} />
      {translatedContent.translated ? (
        <TranslateCard {...translatedContent} />
      ) : null}
    </Layout>
  );
};
export default Shakespeare;

All done. Now App is good to go.
For style the app I use Tailwindcss
Fun Translation API Fun Translation API

Todo using useReducer in React

Touhidul Shawan — Tue, 02 Mar 2021 21:22:54 +0000

What is React?

React is a javaScript library that use to build our user interface for applications.

What is `useReducer`

useReducer is a react hook that is used to implement our complex state of applications.

In this simple todo app I have used react with typescript template

Step 1:

First of all, create a project called todo using create-react-app
npx create-react-app todo --template typescript
After creating the project cd to todo folder then run
npm start or yarn start

Step 2:

Create two folder called containers , components
Create a file called Todos.tsx in containers
Import Todos.tsx file in App.tsx and use it

import * as React from "react";
import Todos from "./container/Todos";

const App: React.FC = () => {
  return <Todos />;
};
export default App;

Create an interface that will represent the blueprint of a todo item in Todos.tsx file

export interface TodosProps {
  id: string;
  todoName: string;
  isComplete: boolean;
}

Create interfaces for various activities of the app like add todo item, remove todo item and toggle the todo to check that todo item is completed or not

interface AddTodoAction {
  type: "ADD_TODO";
  payload: { name: string };
}

interface ModifyTodoAction {
  type: "TOGGLE_TODO" | "DELETE_TODO";
  payload: { id: string };
}

action type

export type TodoAction = AddTodoAction | ModifyTodoAction

Create a reducer function called todoReducer that is used with useReducer to control the state with action.

const todoReducer = (todos: Array<TodosProps>, action: TodoAction) => {
  switch (action.type) {
    case "ADD_TODO":
      return [...todos, newTodo(action.payload.name)];
    case "TOGGLE_TODO":
      return todos.map((todo) => {
        if (todo.id === action.payload.id) {
          return { ...todo, isComplete: !todo.isComplete };
        }
        return todo;
      });
    case "DELETE_TODO":
      return todos.filter((todo) => todo.id !== action.payload.id);
    default:
      return todos;
  }
};

Create a new todo item structure with this function

const newTodo = (todoName: string): TodosProps => {
  return { id: uuidv4(), todoName: todoName, isComplete: false };
};

Todos.tsx

import * as React from "react";
import { useReducer } from "react";
import { v4 as uuidv4 } from "uuid";
import Todo from "../components/Todo";
import TodoInput from "../components/TodoInput";

export interface TodosProps {
  id: string;
  todoName: string;
  isComplete: boolean;
}

interface AddTodoAction {
  type: "ADD_TODO";
  payload: { name: string };
}

interface ModifyTodoAction {
  type: "TOGGLE_TODO" | "DELETE_TODO";
  payload: { id: string };
}

export type TodoAction = AddTodoAction | ModifyTodoAction;

const todoReducer = (todos: Array<TodosProps>, action: TodoAction) => {
  switch (action.type) {
    case "ADD_TODO":
      return [...todos, newTodo(action.payload.name)];
    case "TOGGLE_TODO":
      return todos.map((todo) => {
        if (todo.id === action.payload.id) {
          return { ...todo, isComplete: !todo.isComplete };
        }
        return todo;
      });
    case "DELETE_TODO":
      return todos.filter((todo) => todo.id !== action.payload.id);
    default:
      return todos;
  }
};

const newTodo = (todoName: string): TodosProps => {
  return { id: uuidv4(), todoName: todoName, isComplete: false };
};

const Todos: React.FC = () => {
  const [todos, dispatch] = useReducer(todoReducer, []);

  const renderTodos = todos.map((todo) => (
    <Todo
      key={todo.id}
      id={todo.id}
      todoName={todo.todoName}
      isComplete={todo.isComplete}
      dispatch={dispatch}
    />
  ));

  console.log(todos);

  return (
    <div>
      <TodoInput dispatch={dispatch} />
      {renderTodos}
    </div>
  );
};

export default Todos;

Create a file called TodoInput.tsx in components folder

TodoInput.tsx

This component is responsible for rendering a form with an input field and a submit button

import * as React from "react";
import { useState } from "react";
import { TodoAction } from "../container/Todos";

interface TodoInputProps {
  dispatch: React.Dispatch<TodoAction>;
}

const TodoInput: React.FC<TodoInputProps> = ({ dispatch }) => {
  const [todoName, setTodoName] = useState("");

  const handleChange = (evt: React.FormEvent<HTMLInputElement>) => {
    setTodoName(evt.currentTarget.value);
  };
  const handleSubmit = (evt: React.FormEvent) => {
    evt.preventDefault();
    dispatch({ type: "ADD_TODO", payload: { name: todoName } });
    setTodoName("");
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Type your todo...."
        value={todoName}
        onChange={handleChange}
      />
      <button type="submit">Add Todo</button>
    </form>
  );
};

export default TodoInput;

Display all todo item in Todo.tsx file in components folder

import * as React from "react";
import { TodosProps, TodoAction } from "../container/Todos";

export interface Props extends TodosProps {
  dispatch: React.Dispatch<TodoAction>;
}

const Todo: React.FC<Props> = ({ dispatch, id, isComplete, todoName }) => {
  const handleDelete = (id: string) => {
    dispatch({
      type: "DELETE_TODO",
      payload: { id: id },
    });
  };
  const handleToggle = (id: string) => {
    dispatch({
      type: "TOGGLE_TODO",
      payload: { id: id },
    });
  };
  return (
    <div>
      <div>
        <p style={{ textDecoration: `${isComplete ? "line-through" : ""}` }}>
          {todoName}
        </p>
      </div>
      <div>
        <button onClick={() => handleToggle(id)}>Toggle</button>
        <button onClick={() => handleDelete(id)}>Delete</button>
      </div>
    </div>
  );
};

export default Todo;

Need Help about AR in React

Touhidul Shawan — Tue, 05 Jan 2021 14:06:28 +0000

Is there any way to implement AR in reactjs?

Better Pattern in fetching API data?

Touhidul Shawan — Mon, 26 Oct 2020 18:10:04 +0000

I am fetching jokes data on the first time component rendered in useEffect hooks. But after that, I want to get new jokes data when the Want more button will be clicked, so I am handling that in handleNewJoke function. But here is the problem I am repeating same code. What approch should I take here?

import * as React from "react";
import { useState, useEffect } from "react";
import axios from "axios";
import Jokes from "./components/Jokes";

export interface JokesProp {
  id: number;
  type: string;
  setup: string;
  punchline: string;
}

const App: React.FC = () => {
  const [jokes, setJokes] = useState<JokesProp>({
    id: 166,
    type: "general",
    setup: "What did one wall say to the other wall?",
    punchline: "I'll meet you at the corner!",
  });

  useEffect(() => {
    const getJokes = async () => {
      const response = await axios.get(
        "https://official-joke-api.appspot.com/random_joke"
      );
      setJokes(response.data);
    };
    getJokes();
  }, []);

  const handleNewJokes = async () => {
    const response = await axios.get(
      "https://official-joke-api.appspot.com/random_joke"
    );
    setJokes(response.data);
  };

  return (
    <main>
      <h1>Jokes</h1>
      <Jokes jokes={jokes} />
      <button onClick={handleNewJokes}>want more</button>
    </main>
  );
};

export default App;

My journey in Hacktoberfest

Touhidul Shawan — Fri, 23 Oct 2020 10:05:08 +0000

whoami

Hi, My name is Touhiudl Shawan. I am a self-taught Web Developer. Currently, I am a front-end developer but also have the interest to learn backend development. I build UI components using modern front-end technology like React. Already, I have worked as a freelancer on Fiverr. I have become a one-level seller on Fiverr. Also, I am a Computer Science and Engineering Student.

Background

I am new to the open-source community. As being a student of Computer Science I have already joined some online and offline Programming contest. In a contest, I have become 20th around 400 contestants. I have solved many Programming challenges in an online platform like urionlinejudge. I am developing and working as a front-end web developer for 3 years. I already have worked as a freelancer in Fiverr and become a one-level-seller. I am continuously learning front-end development every day. This is my Story.

Progress

In the #hacktoberfest challenge this year I already have completed my four successful pull requests. That means I have already contributed a very little amount of contribution to the open-source community

Contributions

Submit an Interactive Quiz App build with `React`

Interactive Quiz App

Submit a desktop Application called Blood Donor Management developed with `Java`

Blood Management

Submit a system that showed statistics report about covid19 written in `python`

Coror Statistics Shower

This is repo just want my some information so I just submit some info about myself in here

Some Info

Reflections

It was my first hactoberfest. So I tried to do some contribution to the open-source community. It helps me to understand how I should work on an open-source project. I hope next time I will contribute a more valuable contribution to open source projects.

Thanks, Everyone
#Happy Coding 🙂 #hacktoberfest

Need help to fix a problem

Touhidul Shawan — Thu, 24 Sep 2020 15:53:58 +0000

I am understanding the error in my code that string can not be used as an index of type {username: string; password: string;}. But how can I fix this now? I want to handle multiple input element value on change, how can I do this here in my code on handleChange function. !! warning I am new in typescript.
Here is my code for Login.tsx

import * as React from "react";
import { useState } from "react";
import InputField from "./InputField";

interface User {
  username: string;
  password: string;
}

const Login: React.FC = () => {
  // account state
  const [account, setAccount] = useState<User>({
    username: "",
    password: "",
  });

  function handleChange(evt: React.FormEvent<HTMLInputElement>) {
    // extract name and value property of current input element
    const { name, value } = evt.currentTarget;
    const accountCopy = { ...account }; // make copy of current account;
    accountCopy[name] = value; // update value from input element value
    setAccount(accountCopy);
  }

  function handleSubmit(evt: React.FormEvent<HTMLFormElement>) {
    evt.preventDefault();
    alert(`Hi ${account.username} with pass ${account.password}`);
  }

  return (
    <div className="col-8 m-auto mt-4 py-2">
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <InputField
          label="Username"
          name="username"
          type="text"
          value={account.username}
          onChange={handleChange}
        />
        <InputField
          label="Password"
          name="password"
          type="password"
          value={account.password}
          onChange={handleChange}
        />
        <button type="submit" className="btn btn-primary">
          Login
        </button>
      </form>
    </div>
  );
};

export default Login;

Code for InputField.tsx

import * as React from "react";

interface Props {
  name: string;
  label: string;
  value: string;
  type: string;
  onChange: (evt: React.FormEvent<HTMLInputElement>) => void;
}

const InputField: React.FC<Props> = ({
  name,
  label,
  value,
  type,
  onChange,
}) => {
  return (
    <div className="form-group">
      <label htmlFor="name">{label}</label>
      <input
        name={name}
        id={name}
        type={type}
        className="form-control"
        value={value}
        onChange={(evt) => onChange(evt)}
        required
      />
    </div>
  );
};

export default InputField;

Need feedback

Touhidul Shawan — Mon, 03 Aug 2020 17:27:16 +0000

I need feedback from the developer. How`s my personal portfolio look like? Please give me any suggestion if you want to give
https://touhidulshawan.github.io/touhidulshawan

Give some ideas

Touhidul Shawan — Sat, 01 Aug 2020 11:38:09 +0000

Can you guys give me ideas to design the skill page for my personal portfolio website 🤔?
Here is the link for my website

[Final Year Project]

Touhidul Shawan — Wed, 20 May 2020 11:03:04 +0000

Fun eSchool

This is an online platform for kids. This project is currently under development. I will love to get ideas about the features of an online platform from you.

Link to Code

Github: https://github.com/touhidulShawan/funEschool

DEV Community: Touhidul Shawan

Need help

Build Fun Translation App with React

Source Code

Live Preview

What is it?

Steps

Todo using useReducer in React

What is React?

What is `useReducer`

Step 1:

Step 2:

TodoInput.tsx

Need Help about AR in React

Better Pattern in fetching API data?

My journey in Hacktoberfest

whoami

Background

Progress

Contributions

Submit an Interactive Quiz App build with `React`

Submit a desktop Application called Blood Donor Management developed with `Java`

Submit a system that showed statistics report about covid19 written in `python`

This is repo just want my some information so I just submit some info about myself in here

Reflections

Need help to fix a problem

Need feedback

Give some ideas

[Final Year Project]

Fun eSchool

Link to Code

DEV Community: Touhidul Shawan

Need help

Build Fun Translation App with React

Source Code

Live Preview

What is it?

Steps

Todo using useReducer in React

What is React?

What is useReducer

Step 1:

Step 2:

TodoInput.tsx

Need Help about AR in React

Better Pattern in fetching API data?

My journey in Hacktoberfest

whoami

Background

Progress

Contributions

Submit an Interactive Quiz App build with React

Submit a desktop Application called Blood Donor Management developed with Java

Submit a system that showed statistics report about covid19 written in python

This is repo just want my some information so I just submit some info about myself in here

Reflections

Need help to fix a problem

Need feedback

Give some ideas

[Final Year Project]

Fun eSchool

Link to Code

What is `useReducer`

Submit an Interactive Quiz App build with `React`

Submit a desktop Application called Blood Donor Management developed with `Java`

Submit a system that showed statistics report about covid19 written in `python`