DEV Community: Dezina

Install Redis On Windows 11

Dezina — Tue, 12 Dec 2023 15:55:27 +0000

https://www.youtube.com/watch?v=DLKzd3bvgt8

Postgres with typeorm

Dezina — Tue, 12 Dec 2023 07:06:34 +0000

How to Install PostgreSQL on Windows 11

https://www.youtube.com/watch?v=IYHx0ovvxPs&t=321s

Difference between display:none and visiblity: hidden

Dezina — Wed, 27 Sep 2023 10:12:26 +0000

visibility:hidden hides the element, but it still takes up space in the layout.

display:none removes the element from the document. It does not take up any space.

https://www.w3schools.com/css/tryit.asp?filename=trycss_display

Enable and disable APIs - API Console

Dezina — Tue, 19 Sep 2023 13:23:48 +0000

https://support.google.com/googleapi/answer/6158841?hl=en

Go crazy with react.js

Dezina — Mon, 24 Apr 2023 08:03:51 +0000

public & private routes

https://stackoverflow.com/questions/69923420/how-to-use-private-route-in-react-router-domv6

stripe payment with api

https://www.jsmount.com/react-js-stripe-payment-gateway-integration-with-node-step-by-step-guide/

convert html to pdf

https://pspdfkit.com/blog/2022/how-to-convert-html-to-pdf-using-react/

React useState Hook Typescript

https://codedamn.com/news/reactjs/usestate-hook-typescript

React.Js - Typescript how to pass an array of Objects as props?

https://stackoverflow.com/questions/72713498/react-js-typescript-how-to-pass-an-array-of-objects-as-props#:~:text=You%20can%20just%20replace%20props,from%20there%20in%20your%20UserIListtem

Dates conversion

{Intl.DateTimeFormat("en").format(new Date(2023-04-28T06:07:41.065Z))}
Output: 4/28/2023

Express application generator

Dezina — Mon, 27 Mar 2023 11:02:12 +0000

Create a folder & in the terminal enter npx express-generator
next install dependencies by npm i
Make sure that node.js is installed

Javascript interview preparations

Dezina — Thu, 25 Aug 2022 13:10:00 +0000

There are thousands of self-taught JavaScript programmers looking for web development positions. Unfortunately, self-learning or training classes, often leaves gaps in people’s understanding of the language itself. The problem is that questions testing your understanding of JS are exactly what many tech companies ask in their interviews. Some many know to do coding, but lack a solid grasp of the language. Just writing the some important concepts of js.

Shallow clone(copy) & deep clone(copy)

Shallow copy
copy the original object into the clone object then the clone object has the copy of the memory address of the original object. Means both points to the same memory address. A shallow copy means once we make changes in the clone object it will be reflected back to the original object as well.
_code:_
var obj1 = {
    id: 1,
    company: "GFG"
};
var obj2 = obj1;
obj2.id = 2;
console.log(obj1.id);
console.log(obj2.id);
_output:_
2
2

Deep copy
But in the case of deep copy, changing the value of the cloned object will not reflect into the original object, because the original object has its own reference object and after cloning, the cloned object has its own referenced object. Both are different.
_code:_
var student1 ={ 
    name : "Manish",
    company : "Gfg"

    }
    var student2 =  { ...student1 } ;
    student1.name = "Rakesh"
    console.log("student 1 name is",student1.name)
    console.log("student 2 name is ",student2.name);
_output_
student 1 name is Rakesh
student 2 name is  Manish

Events

Browser events
Js events

Value vs. Reference
Scope
Hoisting
Closures
this
new
apply, call, bind
Prototypes & Inheritance
Asynchronous JS
Higher Order Functions

React js & material UI

Dezina — Thu, 30 Jun 2022 04:08:58 +0000

1. Link

**Parent component**
import { Link } from 'react-router-dom'

<Link
                              to={{
                                pathname: "/dashboard/selectmapsubjctefaculaty",
                                state: { row }
                              }}
                            >
                              <Button
                                size='small'
                                className='mr-1 fullWidth'
                                color="secondary"
                                variant='contained'
                                sx={{ width: "100%", p: "0.1em", borderRadius: "2px" }}
                              >Assign Faculty</Button></Link>

**Child component**

import { useLocation } from 'react-router-dom/cjs/react-router-dom.min'

 const location = useLocation()

  let subject = location.state.row

2. MUI Autocomplete

import { Autocomplete, Box, TextField } from '@mui/material'
import React, { Fragment, useState } from 'react'
import styled from '@emotion/styled';

 const _handleInputChange = (e, data) => {
    if (e.target.value.length > 3) {
      GET_SEARCH_STUDENT(e.target.value)
    }
  }
  const _handleChnage = async (e, value) => {
    let res = await GET_STUDENT_DETAILS(value?.id)
    setStudentDetails(res)
  }
  const _handleAddFee = () => {
    setAddFeeType(!AddFeeType)
  }

  <Autocomplete
        sx={{ boxShadow: 4 }}
        id="auto-com"
        options={searchStudent}
        renderInput={params => (
          <StyledInputBase {...params} label="Search student" />
        )}
        getOptionLabel={option => `${option?.firstname} ${option?.lastname} ${option?.phone}`}
        style={{ boxShadow: 3 }}
        onChange={(e, newvalue) => {
          _handleChnage(e, newvalue)
        }}
        onInputChange={handleInputChange}
      />

How easy to deploy your app on vercel

Dezina — Sun, 17 Apr 2022 07:56:37 +0000

Deploying app to vercel

Login to vercel by git account signup
Go to https://vercel.com/dashboard
Click on Create new project button on top right
Import git repository, (where you have to push your code excluding the node_modules folder)
After importing the git repo of your application, click on Import
Next click on Deploy. (Note – It will take few minutes)
Once deployed, click on the app image on left side to view
To edit the domain, click on domains & edit your domain
Thankyou & enjoy

JS problems

Dezina — Tue, 01 Feb 2022 10:18:44 +0000

1. How to add array to an object

<script>
// JavaScript program to add array into
// an object using push() function

// Creating a JS object to add array into
var Obj = {         
    arrayOne: ['Geeks', 'for', 'Geeks'],
    arrayTwo: []
};

// Array to be inserted
var arraynew = ['Hello', 'World', '!!!'];

// Pushing of array into arrayTwo
Obj['arrayTwo'].push(arraynew); 

alert(Obj.arrayTwo);

</script>

2. Add & Delete dynamic input fields

 const inputArr = [
    {
      type: "time",
      id: 1,
      value: "",

    }
  ];

const [field, setField] = useState(inputArr);
const [tempfield, setTempfield] = useState("");

// Add input field
const addInputField = (e) => {
    e.preventDefault();

      setField(s => {
        const lastId = s[s.length - 1].id;
        const nextId = lastId + 1;
        console.log("lastId", lastId)
        return [
          ...s,
          {
            type: "time",
            id: nextId,
            value: tempfield
          }
        ];
      });
}

 // Delete the input field
  const deleteField = (fieldId) => {

  let filterField = field.filter(arr => arr.id !== fieldId + 1)
      setField(filterField)
}

3. Checkboxes

 const [checked, setChecked] = useState(["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"])

  // Add/Remove checked item from list
  const handleCheck = (event) => {
    var updatedList = [...checked];
    if (event.target.checked) {
      updatedList = [...checked, event.target.value];
    } else {
      updatedList.splice(checked.indexOf(event.target.value), 1);
    }
    setChecked(updatedList);
  };

<div>
              <input
                className="form-check-input"
                value="Monday"
                type="checkbox"
                defaultChecked
                onChange={handleCheck} />
              Monday
</div>

4. Find & replace array object

// can use find or map
 let find = cartData.find((o, i) => {
      if (o.product_id === pid) {
        // cartData[i] =
        //   { name: 'new string', value: 'this', other: 'that' };
        cartData[i].quantity += 1
        return true; // stop searching
      }
    });
    console.log("Replaced data", cartData)

React hooks

Dezina — Sat, 29 Jan 2022 13:46:27 +0000

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. Hooks allow to easily manipulate the state of our functional component without needing to convert them into class components.

useEffect
The first one is a callback (a function), and the second one is the dependency array. It takes the form of an array of variables. The React hooks that have dependency arrays are useEffect, useLayoutEffect, useCallback, useMemo.
https://devtrium.com/posts/dependency-arrays

The dependency array basically tells the hook to "only trigger when the dependency array changes".
useEffect(() => {
// this will run if counter1 OR counter2 changes
console.log('Either counter1 or counter2 changed (or both');
}, [counter1, counter2]);
Empty dependendy array means that the hook will only trigger once when the component is first rendered.
useEffect(() => {
console.log('I will run only once');
}, []);
The rule is: if any variable is used inside the hook but is defined outside of it, then it should go in the dependency array.
The goal of the dependency array is to make the hook trigger when one of the values changes. There's no point putting stuff in there that won't change.

useState
The first parameter is the state & second parameter is used to change/update the state using setState. useState Hook does not update immediately.
const [count, setCounter] = useState(0);
useParams()

The react-router-dom package has useParams hooks that let you access the parameters of the current route. This is only to get the url paramerters. URL parameters are the ones that appear before the ? in the URL.
import {useParams} from "react-router-dom";
const { jobId } = useParams();
console.log("jobId", jobId)

useLocation

The useLocation hook is a function that returns the location object that contains information about the current URL. Whenever the URL changes, a new location object will be returned. It is also used to get query parameter of the url.
Location object properties:

hash: the anchor part (#)
pathname: the path name
search: the query string part
state
key
_example:_
const search = useLocation().search;
const candId = new URLSearchParams(search).get('candId');
console.log("candId", candId)

Node.js interview preparations

Dezina — Sun, 23 Jan 2022 14:40:03 +0000

Backend development
Backend refers to the server-side of an application. It generally includes a web server that communicates with a database to serve requests. Java, PHP, Python, and Node.js are some of the backend development technologies.

Node.js

Node.js is an open-source, cross-platform JavaScript runtime environment and library for applications written in JavaScript language. The Node.js driver uses the asynchronous Javascript API to communicate with your MongoDB cluster.

- Node.js is single-threaded for async processing. It means the web requests and processing runs on the same thread.By doing async processing on a single-thread under typical web loads, more performance and scalability.

- Asynchronous code allows the program to be executed immediately where the synchronous code will block further execution of the remaining code until it finishes the current one. This may not look like a big problem but when you see it in a bigger picture you realize that it may lead to delaying the User Interface. So it does not block the rest of the code from executing and after all the code its execution, it gets pushed to the call stack and then finally gets executed. This is what happens in asynchronous JavaScript.
Asynchronous code example: _
<script>
    document.write("Hi");
    document.write("<br>");

    setTimeout(() => {
        document.write("Test");
    }, 2000);

    document.write("<br>");
    document.write("End");
    document.write("<br>");
</script>
**Output:** 
Hi
End
Test
- Synchronous means to be in a sequence, i.e. every statement of the code gets executed one by one. So, basically a statement has to wait for the earlier statement to get executed.

- Promises
A Promise is an object returned by the asynchronous method call that allows you to access information on the eventual success or failure of the operation that they wrap. The Promise is in the Pending state if the operation is still running, Fulfilled if the operation completed successfully, and Rejected if the operation threw an exception. You can define your own logic that executes once the Promise reaches the Fulfilled or Rejected state by appending the then() method. When you append one or more then() methods to a Promise, each call passes its execution result to the next one. This pattern is called Promise chaining.
_Promise chaining example:_
collection.updateOne({ name: "Mount McKinley" }, { $set: { meters: 6190 } })
  .then(
    res => console.log(`Updated ${res.result.n} documents`),
    err => console.error(`Something went wrong: ${err}`),
  );

the catch() method which accepts a single callback, executed when the Promise transitions to the Rejected state.

_Await:_ If you are using async functions, you can use the await operator on a Promise to pause further execution until the Promise reaches either the Fulfilled or Rejected state and returns. 

- Callbacks
A callback is a method that gets called after another method has finished executing. This allows the enclosing method to continue to execute other commands until the original operation completes. A callback function is called after a given task. It allows other code to be run in the meantime and prevents any blocking.  Being an asynchronous platform, Node.js heavily relies on callback. All APIs of Node are written to support callbacks. Using callback is complex since you end up with several nested callbacks

- asynchronous and non-blocking APIs in Node.js
All Node.js library APIs are asynchronous, which means they are also non-blocking
A Node.js-based server never waits for an API to return data. Instead, it moves to the next API after calling it, and a notification mechanism from a Node.js event responds to the server for the previous API call

commonly used libraries in Node.js

ExpressJS - Express is a flexible Node.js web application framework that provides a wide set of features to develop web and mobile applications. Allows you to define routes of your application based on HTTP methods and URLs. Includes various middleware modules which you can use to perform additional tasks on request and response. Easy to integrate with different template engines like Jade, Vash, EJS etc.
Mongoose - Mongoose is basically a package that serves as a mediator between the NodeJS application and MongoDB server. It is an Object Document Mapper(ODM) that allows us to define objects with strongly-typed-schema that is mapped to a MongoDB document. Mongoose supports all the CRUD operations – Creating, Retrieving, Updating, and Deleting.
body-parser - parses your request and converts it into a format from which you can easily extract relevant information that you may need.
.env file - Its environment variables file. In simple term, it is a variable text file. In this file we set a variable with value that you wouldn’t want to share with anyone, purpose of file is keep as secret and secure because in .env file we store our database password, username, API key etc.
syntax => ENV_VARIABLE=VALUE

modules in Node.js

In Node.js applications, modules are like JavaScript libraries and include a set of functions. To include a module in a Node.js application, we must use the require() function with the parentheses containing the module's name.

- Http (Hypertext Transfer Protocol) methods
HTTP is an asymmetric request-response client-server protocol as illustrated.  An HTTP client sends a request message to an HTTP server.  The server, in turn, returns a response message.  In other words, HTTP is a pull protocol, the client pulls information from the server (instead of server pushes information down to the client). An HTTP client sends an HTTP request to a server in the form of a request message which has a request method indicates the method to be performed on the resource identified by the given Request-URI. The method is case-sensitive and should always be mentioned in uppercase.

GET - The GET method is used to retrieve information from the given server using a given URI. Requests using GET should only retrieve data and should have no other effect on the data.

HEAD - Same as GET, but transfers the status line and header section only.

POST - A POST request is used to send data to the server, for example, customer information, file upload, etc. using HTML forms.

PUT - Replaces all current representations of the target resource with the uploaded content.

DELETE - Removes all current representations of the target resource given by a URI.

CONNECT - Establishes a tunnel to the server identified by a given URI.

OPTIONS - Describes the communication options for the target resource.

TRACE - Performs a message loop-back test along the path to the target resource.

- HTTP response
After receiving and interpreting a request message, a server responds with an HTTP response message:

1. A Status-line

2. Zero or more header

3. An empty line

4. Optionally a message-body

HTTP Status Codes
1xx: Informational
It means the request has been received and the process is continuing.
2xx: Success
It means the action was successfully received, understood, and accepted.
3xx: Redirection
It means further action must be taken in order to complete the request.
4xx: Client Error
It means the request contains incorrect syntax or cannot be fulfilled.
5xx: Server Error
It means the server failed to fulfill an apparently valid request.

*Node.js CRUD Operations Using Mongoose and MongoDB Atlas
*


Install the mongoose and the express module through npm using the below command:

npm install express mongoose --save

Server Setup: Here, we’ll set up our server on port 3000 and call the express function that returns a server object in a variable named app. Then we start the listener saying app.listen with the port address. Finally, we create the /api route which will be triggered once request localhost:3000/api is received from the browser. 
const express=require('express');
const bodyParser=require('body-parser');
const api = require('./api');

const port=3000;
const app=express();

app.listen(port, function() {
    console.log("Server is listening at port:" + port);
});

// Parses the text as url encoded data
app.use(bodyParser.urlencoded({extended: true}));

// Parses the text as json
app.use(bodyParser.json());

app.use('/api', api);

Schema: Schema is a representation of the structure of the data. It allows us to decide exactly what data we want, and what options we want the data to have as an object.

var mongoose=require('mongoose');

var StudentSchema = new mongoose.Schema({
    StudentId:Number,
    Name:String,
    Roll:Number,
    Birthday:Date,
    Address:String
});

module.exports = mongoose.model(
    'student', StudentSchema, 'Students');

-----------------------------------------------------------
**Defining Routes using Express**
app.use("/shop", ShopRoute);
app.use('/receipts', ReceiptRoute);

When you make a request to server api, express will search for api route and execute the api

CRUD OPERATIONS

- Create: using .save() to save it to the database
router.route('/signup').post((req, res) => {

    const newShop = new Shop(req.body);

    newShop.save()
        .then(() => res.json('Shop created successfully.'))
        .catch(err => res.status(400).json('Error : ' + err));

});

- Retrieve: To retrieve records from a database collection we make use of the .find() function.
router.route('/').get((req, res) => {

    Shop.find()
        .then((Shop) => { return res.json(Shop) })
        .catch(err => res.status(400).json('Error: ' + err));
});

- Delete: To delete a record from database, we make use of the function .remove()
router.route('/deleteall').delete((req, res) => {
    Shop.findByIdAndDelete(receipt._id)
        .then(() => res.json('All Shops deleted.'))
        .catch(err => res.status(400).json('Error : ' + err));
})

- Update
router.route('/update/:receiptId').post((req, res) => {

    return Receipt.find({ _id: req.params.receiptId }).then(
        data => {
            let Receipt = data[0];

            Receipt.phoneNo = Receipt.phoneNo;
            Receipt.paymentMethod = req.body.paymentMethod;
            Receipt.return = req.body.return;

            Receipt.save()
                .then(() => {
                    res.json('Receipt updated.');
                })
                .catch(err => res.status(400).json('Error : ' + err));
        }
    )

});

**Mongoose functions**
Mongoose models provide several static helper functions for CRUD operations. Each of these functions returns a mongoose Query object. When executing a query with a callback function, you specify your query as a JSON document.

Model.deleteMany()
Model.deleteOne()
Model.find()
Model.findById()
Model.findByIdAndDelete()
Model.findByIdAndRemove()
Model.findByIdAndUpdate()
Model.findOne()
Model.findOneAndDelete()
Model.findOneAndRemove()
Model.findOneAndReplace()
Model.findOneAndUpdate()
Model.replaceOne()
Model.updateMany()
Model.updateOne()