Forem: Danish

SQL In One Go - Hands on Guide

Danish — Tue, 26 Aug 2025 11:06:20 +0000

This is a practical, one sitting tour of SQL using a simple store: users, products, and orders. You will read, join, group, filter, and update data with queries you can run right now.

Use the online compiler to practice queries side by side:
onecompiler

What is a database

A database is an organized way to store information so you can ask questions and get reliable answers.
In our store:

users: people who place orders
products: things we sell
orders: which user bought which product, and whether it was paid

Database design in plain words

What data are we storing
users, products, orders
What properties do they have
users: first name, last name
products: name, department, price, weight
orders: user id, product id, paid flag
What types are those properties
text: names and departments
number: price and weight
boolean: paid

Create the tables

We will use three tables and keep the design simple.

Why this design

Each table has a primary key called id so every row is unique.
orders.user_id points to users.id.
orders.product_id points to products.id.
paid says whether the order is completed.

CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  first_name VARCHAR,
  last_name  VARCHAR
);

CREATE TABLE products (
  id SERIAL PRIMARY KEY,
  name       VARCHAR,
  department VARCHAR,
  price      INTEGER,
  weight     INTEGER
);

CREATE TABLE orders (
  id SERIAL PRIMARY KEY,
  user_id    INTEGER REFERENCES users(id),
  product_id INTEGER REFERENCES products(id),
  paid       BOOLEAN
);

Practice all queries side by side

Open One Compiler or any other sql compiler of your own choice.
Create the three tables
Go to this link and copy the dummy data for tables we are going to use in our journey
Dummy Data Docs
Paste and run the queries as you learn.

Relationships you should know

one to many
One user can have many orders. users.id → many orders.user_id.
many to one
Many orders belong to one product. orders.product_id → products.id.
one to one
Not in this design, but an example would be users and a user_profiles table with the same id.
primary keys
id in each table. They uniquely identify rows.
foreign keys
orders.user_id references users.id.
orders.product_id references products.id.
foreign key delete rules
Default is restrict (Postgres uses NO ACTION), which prevents deleting a user if there are orders pointing to them.
If you want to delete a user and also delete their orders:

-- Option A: define with cascade from the start
CREATE TABLE orders (
  id SERIAL PRIMARY KEY,
  user_id    INTEGER REFERENCES users(id) ON DELETE CASCADE,
  product_id INTEGER REFERENCES products(id),
  paid       BOOLEAN
);

-- Option B: add a named FK later with cascade
ALTER TABLE orders
ADD CONSTRAINT fk_orders_user
FOREIGN KEY (user_id) REFERENCES users(id)
ON DELETE CASCADE;

If you want to keep orders but clear the link when a user is deleted:

ALTER TABLE orders
ADD CONSTRAINT fk_orders_user_setnull
FOREIGN KEY (user_id) REFERENCES users(id)
ON DELETE SET NULL;

Insert data

You can paste bulk sample data to save time.

Go to this link and copy the dummy data for tables we are going to use in our journey
https://docs.google.com/document/d/1mA7tXgljt5bVGMMg2fCybyeon3PF3UJzPFz8iXfPzLw/edit?usp=sharing

After inserting, a quick sanity check:

Why: confirm rows exist.

SELECT COUNT(*) AS users, 
       (SELECT COUNT(*) FROM products) AS products, 
       (SELECT COUNT(*) FROM orders)   AS orders;

Example result

users	products	orders
50	100	300

Update rows

Why: fix a typo or move a product to a new department.

UPDATE products
SET department = 'Home'
WHERE id = 11;  -- Fantastic Metal Chair

Result idea: 1 row updated.

Delete rows

Why: remove a test user that has no orders.

DELETE FROM users
WHERE id = 51;  -- only if it exists and has no related orders

If a user has orders and you did not set ON DELETE CASCADE, the delete will fail to protect data integrity.

Retrieve data with SELECT

1) Simple SELECT

SELECT id, first_name, last_name
FROM users
LIMIT 3;

Example result

id	first_name	last_name
1	Iva	Lindgren
2	Ignatius	Johns
3	Jannie	Boehm

2) Calculations in SELECT

Why: show price with a simple sales tax preview.

SELECT id, name, price,
       ROUND(price * 1.15) AS price_with_tax
FROM products
ORDER BY id
LIMIT 3;

Example result

id	name	price	price_with_tax
1	Practical Fresh Shirt	876	1007
2	Gorgeous Steel Towels	412	474
3	Rustic Plastic Bacon	10	12

3) String operations

Why: display a friendly full name.

SELECT id,
       first_name || ' ' || last_name AS full_name,
       UPPER(last_name)               AS last_upper
FROM users
LIMIT 3;

Example result

id	full_name	last_upper
1	Iva Lindgren	LINDGREN
2	Ignatius Johns	JOHNS
3	Jannie Boehm	BOEHM

4) WHERE filter

SELECT id, name, department, price
FROM products
WHERE department = 'Toys' AND price > 800
ORDER BY price DESC;

Example result

id	name	department	price
33	Handcrafted Concrete Bike	Toys	748
31	Sleek Granite Towels	Toys	797
9	Generic Fresh Computer	Toys	926

5) Compound WHERE with OR

SELECT id, name, department, price
FROM products
WHERE department = 'Sports' OR department = 'Baby'
ORDER BY department, price DESC
LIMIT 5;

6) WHERE with lists

SELECT id, name, department
FROM products
WHERE department IN ('Home','Garden','Electronics')
ORDER BY department, id
LIMIT 5;

Joins

Why joins exist: data lives in separate tables. Joins bring them together.

1) INNER JOIN

Question: show paid orders with customer and product name.

SELECT o.id AS order_id,
       u.first_name || ' ' || u.last_name AS customer,
       p.name AS product,
       p.price,
       o.paid
FROM orders o
JOIN users u    ON u.id = o.user_id
JOIN products p ON p.id = o.product_id
WHERE o.paid = TRUE
ORDER BY o.id
LIMIT 5;

Example result

order_id	customer	product	price	paid
1	Arely McGlynn	Practical Steel Shoes	947	true
2	Ignatius Johns	Generic Fresh Computer	926	true
3	Jannie Boehm	Licensed Steel Towels	939	true
4	Iva Lindgren	Gorgeous Concrete Towels	328	true
5	Kailee Jacobson	Fantastic Soft Fish	10	true

(Your rows will differ. This is a shape preview.)

2) LEFT JOIN

Question: list users and whether they have any orders.

SELECT u.id,
       u.first_name || ' ' || u.last_name AS customer,
       COUNT(o.id) AS order_count
FROM users u
LEFT JOIN orders o ON o.user_id = u.id
GROUP BY u.id, customer
ORDER BY order_count DESC, u.id
LIMIT 5;

3) JOIN with extra WHERE

Question: paid orders for the Sports department.

SELECT u.first_name || ' ' || u.last_name AS customer,
       p.name AS product,
       p.department,
       p.price
FROM orders o
JOIN users u    ON u.id = o.user_id
JOIN products p ON p.id = o.product_id
WHERE o.paid = TRUE
  AND p.department = 'Sports'
ORDER BY p.price DESC;

Aggregations

1) GROUP BY

Question: revenue by department for paid orders.

SELECT p.department,
       SUM(p.price) AS revenue,
       COUNT(*)     AS orders_count
FROM orders o
JOIN products p ON p.id = o.product_id
WHERE o.paid = TRUE
GROUP BY p.department
ORDER BY revenue DESC
LIMIT 5;

Example result

department	revenue	orders_count
Home	4300	6
Sports	2850	4
Toys	2600	3
Beauty	1800	3
Baby	1700	3

(Numbers are illustrative. Run it to see your data.)

2) Aggregation functions

COUNT, SUM, AVG, MIN, MAX

SELECT
  COUNT(*)              AS total_products,
  AVG(price)            AS avg_price,
  MIN(price)            AS min_price,
  MAX(price)            AS max_price
FROM products;

3) The COUNT with null gotcha

COUNT(column) ignores nulls. COUNT(*) counts rows.

SELECT
  COUNT(*)      AS rows_considered,
  COUNT(paid)   AS paid_not_null
FROM orders;

If any paid is null, paid_not_null will be smaller. With our seed, paid is set to true or false, so both counts often match.

4) Filter groups with HAVING

Question: show only departments with at least 5 paid orders.

SELECT p.department,
       COUNT(*) AS paid_orders
FROM orders o
JOIN products p ON p.id = o.product_id
WHERE o.paid = TRUE
GROUP BY p.department
HAVING COUNT(*) >= 5
ORDER BY paid_orders DESC;

Group by with joins: useful patterns

Top 5 customers by total spend on paid orders

SELECT u.id,
       u.first_name || ' ' || u.last_name AS customer,
       SUM(p.price) AS total_spent,
       COUNT(*)     AS orders_count
FROM orders o
JOIN users u    ON u.id = o.user_id
JOIN products p ON p.id = o.product_id
WHERE o.paid = TRUE
GROUP BY u.id, customer
ORDER BY total_spent DESC
LIMIT 5;

Average price per department for paid orders

SELECT p.department,
       AVG(p.price) AS avg_paid_price
FROM orders o
JOIN products p ON p.id = o.product_id
WHERE o.paid = TRUE
GROUP BY p.department
ORDER BY avg_paid_price DESC
LIMIT 5;

ORDER BY, LIMIT, OFFSET

Question: show the 5 most expensive products, then the next 5.

-- top 5
SELECT id, name, department, price
FROM products
ORDER BY price DESC
LIMIT 5;

-- next 5
SELECT id, name, department, price
FROM products
ORDER BY price DESC
LIMIT 5 OFFSET 5;

UNION, INTERSECT, EXCEPT

Think in sets of user ids.

1) Users who ordered from Sports or Baby

SELECT DISTINCT o.user_id
FROM orders o JOIN products p ON p.id = o.product_id
WHERE p.department = 'Sports'
UNION
SELECT DISTINCT o.user_id
FROM orders o JOIN products p ON p.id = o.product_id
WHERE p.department = 'Baby';

2) Users who ordered from Sports and also from Baby

SELECT DISTINCT o.user_id
FROM orders o JOIN products p ON p.id = o.product_id
WHERE p.department = 'Sports'
INTERSECT
SELECT DISTINCT o.user_id
FROM orders o JOIN products p ON p.id = o.product_id
WHERE p.department = 'Baby';

3) Users who have orders but no paid orders

SELECT DISTINCT user_id
FROM orders
EXCEPT
SELECT DISTINCT user_id
FROM orders
WHERE paid = TRUE;

Subqueries

What is a subquery

A query inside another query. You can use its result as a value, a list, or a table.

Three shapes:

single value: one row one column
list: many rows one column
table: many rows many columns

Tip: always give subqueries an alias when used as a table.

1) Subquery in SELECT (single value)

Question: show price and how it compares to the average price.

SELECT id, name, price,
       (SELECT ROUND(AVG(price)) FROM products) AS avg_price_all
FROM products
ORDER BY id
LIMIT 3;

2) Subquery in WHERE (list)

Question: users who bought Toys.

SELECT DISTINCT u.id, u.first_name || ' ' || u.last_name AS customer
FROM users u
WHERE u.id IN (
  SELECT o.user_id
  FROM orders o
  JOIN products p ON p.id = o.product_id
  WHERE p.department = 'Toys'
)
ORDER BY u.id
LIMIT 5;

3) Subquery as a table in FROM or JOIN

Question: top 3 departments by paid revenue, then list their orders.

WITH top_depts AS (
  SELECT p.department, SUM(p.price) AS revenue
  FROM orders o
  JOIN products p ON p.id = o.product_id
  WHERE o.paid = TRUE
  GROUP BY p.department
  ORDER BY revenue DESC
  LIMIT 3
)
SELECT td.department,
       u.first_name || ' ' || u.last_name AS customer,
       p.name AS product,
       p.price
FROM top_depts td
JOIN products p ON p.department = td.department
JOIN orders   o ON o.product_id = p.id AND o.paid = TRUE
JOIN users    u ON u.id = o.user_id
ORDER BY td.department, p.price DESC
LIMIT 10;

4) Correlated subquery

Question: for each user, count their paid orders without a GROUP BY on users.

SELECT u.id,
       u.first_name || ' ' || u.last_name AS customer,
       (
         SELECT COUNT(*)
         FROM orders o
         WHERE o.user_id = u.id AND o.paid = TRUE
       ) AS paid_orders
FROM users u
ORDER BY paid_orders DESC, u.id
LIMIT 5;

DISTINCT

Question: list all unique product departments.

SELECT DISTINCT department
FROM products
ORDER BY department;

Utility operators: GREATEST and LEAST

Question: simple shipping rule

base fee is 100
weight fee is weight × 10
charge the greater of the two

SELECT id, name, weight,
       GREATEST(100, weight * 10) AS shipping_fee
FROM products
ORDER BY id
LIMIT 5;

Question: cap a discount at 20

SELECT id, name, price,
       LEAST(price * 0.10, 20) AS discount_preview
FROM products
ORDER BY id
LIMIT 5;

CASE

Question: bucket products by price.

SELECT id, name, price,
       CASE
         WHEN price >= 800 THEN 'Premium'
         WHEN price >= 300 THEN 'Standard'
         ELSE 'Budget'
       END AS price_band
FROM products
ORDER BY price DESC
LIMIT 10;

How queries are executed

Logical order in most SQL engines:

Always remember source - From where the data is coming (table/tables) - is always made first

FROM
JOIN
WHERE
GROUP BY
HAVING
SELECT
DISTINCT
ORDER BY
LIMIT and OFFSET

This order explains many surprises. For example, WHERE runs before grouping, while HAVING filters after grouping.

If you have any questions, comment down.

Happy Learning.

Learn Typescript with me - Part 2

Danish — Tue, 31 Dec 2024 11:20:53 +0000

In our previous article we learnt the basics of typescript, if you haven't read it please do before reading this.

1- Learn typescript with me - 1

ENUM

Enums provide a way to define a set of named constants. By default Enum values start with 0, but we can override them.

enum Color { Red = "RED", Green = "GREEN", Blue = "BLUE", };

const getColorMessage = (color: Color): string => { 
      return You selected ${color};
 }; 

console.log(getColorMessage(Color.Red));

Arrays

Arrays in typescript allow you to define collections of elements of the same types, you can think of them like list of some sort even in python it is called a list type.

const numbers: number[] = [1, 2, 3, 4];

numbers.push(5);

console.log(numbers);

now if I try to add a string in numbers array typescript will complain

number.push("five") // type string is not assignable to type number

Tuple

Tuples are a special array type in typescript that allow you to define an array with fixed sizes and types. Tuples are used where we exactly know the shape of our data, then by using tuples we will have performance gains in reading the data.

const user: [number, string] = [1, "Alice"];

console.log(user);

Object

Objects in typescript allow you to define the structure of an object with types. We can type object like this, more on objects in type alias topic

const user: { id: number; name: string } = { id: 1, name: "Alice" }; 

console.log(user.name);

Type Alias

Type aliases allow you to define custom types in typescript for better code reuse and readability. Now we can type our object as Type Alias UserType

Note: Don't use words like type in your real projects.

type UserType = { id: number; name: string; };

const user: UserType = { id: 1, name: "Alice" };

console.log(user.id);

Optional Properties

Optional properties allow you to define object properties that may or may not exist. In our previous example if we thought that the user will only have id and name may or may not exist. We can add ? before : to denote that this is an optional properties

type UserType = { id: number; name?: string; };

const user: User = { id: 1 };

console.log(user.name ?? "Name not provided");

Narrowing / Type Guard

Type guard allows you to narrow the type of a value within a specific block of code. So as we know our user have name as an optional property, if we now try to print the name of user it will show undefined which we don't want to show to our customers so we make sure the user name is a string before showing it

if (typeof user.name == 'undefined') {
   console.log("Welcome", user.name)
}  else {
   console.log("Welcome Guest")
}

Okay folks in our next article we will start covering functions and type assertions.

Danish Ali

Learn Typescript with me (Part 1)

Danish — Fri, 27 Dec 2024 11:32:52 +0000

Lets recap basics of typescript, I know most of you already know the basics.

Basic types
string
number
boolean
any

These are basic types you will be seeing everywhere, here is example

const name: string = 'Danish' //  a string

let a: number = 23

let b: string = 'somestring'

let e: boolean = false

Now when you use these variables typescript will assist you in using them, see if I multiply or divide a with b it will complain, or even when I try to assign a = "Danish" it will complain

Next comes Union types

*Union types * are the mixing of the basic types like string and number, or boolean and number, basically a variable can be both a number or string.

let employeId: string | number
let isSuccess: number | boolean

here we are assuming that employeId can be string or number, but if we assign boolean to it, typescript will complain

Infer Types, Now typescript infer types based on the value you assigned to the variable. If the value given initially to variable is false let isLoading = false now the infer type of isLoading will be boolean so typescript will complain if we try to do something like isLoading = "ok" .

Likewise if you don't know the type of some third party package you can just hover over it in your IDE and it will tell you the type.

So this was the basics recap, in next article we will see object, tuple array, optional properties, narrowing and enum.

Danish Ali.

Ultimate Guide To Write Reusable Components In React

Danish — Sun, 03 Jul 2022 14:20:05 +0000

Peace be upon you :) السلام عليكم

At Glance:

The Why & Whats ?
The Solutions - When and where to use or not to use.
Wrap up - Revision

The Why & Whats

Why should we worry about reusability in the first place ? Isn't it a thing that only UI Library authors should do ?

Let me answer it the other way around, you should not worry about reusability only if you are developing something on which no more features are to be added.

Hmmm, but we need to add features on pretty much every project right ? Yes then we should start thinking about reusability as early as possible.

What should we think about

Remember these basics

Component = UI + Functionality
Two ways to control component's UI & Functionality, Props & States.

Props are controlled by whoever is using the component and states are controlled by component itself, So the more the component depends on props for its ui and functionality the more general it is and hence Reusable. Tada!

Now what we have to think is, How to make a component more dependent on props? Right.

Do we want to make it dependent on compile-time or run-time i.e statically or dynamically?

The Solutions

The questions that are asked above are the scenario you, me and every developer comes across, our solutions, The [X] Pattern, answers for us these questions, lets dive into the patterns then

The Container-View Pattern

The all time famous pattern, coined by dan abramov, whenever we need to achieve reusability, the first try is this pattern.

Container: is a component which handles the functionality, all the side effects are written here i.e Controls the behaviour.

View: is a component which handles the ui rendering based on props. We should always try to make view generic.

UI Code does not changes on any change in business logic.

Here is the basic structure


const Container = () => {

      // all the side effects 
      // states
      return (<View {...states}/>);

}

const View = (props) => {
      return ( UI that depends on props );
}

Example: See followers list on XYZ social media


// so we make a view component, try to make it generic one

const RenderList = ({data}) => {

      <ul>
      {data.map((item) => (
      <li key={item.id}>
          {item.name}
      </li>
      ))}
  </ul>

}

const RenderFollowers = () => {

 // const [followers, setFollowers] = useState([])

 //get followers logic using useEffect or ReactQuery

 return (
     <RenderList data={followers}/>
 );
}

Here we have made our list component reusable, it will remain same if in future we need to add some functionality like search features it will only increase code in the Container component.

Pros

Easy to write and understand
Makes the UI reusable
Separates the UI and Logic concerns beautifully

Cons

Can not reuse functionality

The Higher Order Component Pattern

The higher order or enhancer pattern, used to share functionality.

Higher Order Component is a component which receives a component, enhance it and returns enhanced component.

Structure


const withHOC = (Component) => (props) => {

 // The reusable functionality comes here

 return <Component {...props}/>

}

const EnhancedComponent = withHOC(ComponentThatNeedsEnhancing)

So continuing our followers example, what if we decided to add something like if the followers list is empty then show this, if it's loading show loader, if there is some error show error i.e general validations.

we will add our logic in RenderFollowers() component right ? now we decided to make some other lists, that are in need of these general validations too ... hmm ? HOC to rescue


const withGeneralValidations = (Component) => (props) => {

      {props.isLoading && <LoadingComp />}
      {props.error && <ErrorComp {...props}/>}
      {!props.data.length && <EmptyListComp />}


      return (

         <Component {...props} />

       );
}

//we can wrap our RenderList Component in //withGeneralValidations(), and then render enhancedRenderList //in RenderFollowers Component.

const EnhancedRenderList = withGeneralValidations(RenderList);

// Change RenderList to EnhancedRenderList inside of RenderFollowers Component.

}

Here we have written reusable functionality, which we can use with other lists too.

HOC Pattern is heavily used in Redux and also Middleware in backend are a type of HOC usage.

Pros

HOC's are highly composable, that means we can add more functionality by using compose.
HOC's have accessibility to its children props, that can be a huge plus in some scenarios.

Cons

The functionality is applied in a static way i.e at compile time, so we can not do some dynamic stuff.
Props Collision

The Component With Render Callbacks/Render Props

Now there is a shared piece of state/information that needs to be used dynamically.

So What do you do ? You Surrender the render :)

Render Props: means the component to be rendered are passed via props, and are called Parent will only call props.render() inside its return.

Structure:


const Parent = (props) => {

  //Shared States

  return props.children(sharedStates);


}

//we can also pass a prop render then call props.render(sharedStates)

//Usage

<Parent>

  {(sharedStates) => {

    //Work with sharedStates
    //here the user of Parent Component have freedom to render any ui

    return ComponentsWhichNeedsSharedStates;

  }}

</Parent>

Example: assuming the same case as HOC


const RenderFollowersList = (props) => {

      //get followers and set the states here
      const {isLoading, error, data} = getFollowers();

      return (

        {isLoading && <LoadingComp />}
        {error && <ErrorComp {...props}/>}
        {!data.length && <EmptyListComp />}

        props.children(data)

       );
}

//it is doing the same as hoc right ? its power comes at use time

<RenderFollowersList>
 {(data) => {

   return(
     <>
       <RenderList data={data} />
     </>
   );

 }}

</RenderFollowersList>

//Now we want also to show count of followers and also perform some search on the followers

//we just add these inside our return 

  ...
  return(
     <> 
       <SearchBar data={data}/>
       <Count count={data.length} />
       <RenderList data={data} />

     </>
   );
  ...

//Simple right we can add our features on the go.

Pros

Gives freedom to user of code

Cons

Adds extra layer of complexity

The Compound Component

Compound Components: are components which are separate in their logic and ui but uses same state or Multiple components that work together to achieve single task.

To share the state between components, ContextApi is used

Structure:


   //CompoundComp.js

   const SharedContext = createContext()

   export default ParentComp = (props) => {

     const [sharedState, setSharedState] = useState(false)

     return (
       <SharedContext.Provider value={{ sharedState, setSharedState }}>
         {props.children}
       </SharedContext.Provider>
     );


   }

//Now we create as many pieces as we like

const ComponentThatNeedsContext = () => {
  const { sharedState, setSharedState } = useContext(SharedContext);

  return (
    <div onClick={() => changeSharedState()}>
      {//something that uses sharedstate}
    </div>
  );
}

ParentComp.ComponentThatNeedsContext = ComponentThatNeedsContext;


//otherFile.js

// To use our compound component

import Parent from 'CompoundComp.js';

...
<Parent>
   <ComponentThatNeedsContext />
<Parent>
...

Example:

there can be many use cases like the nav hamburger or accordions, UI libraries make use of this heavily, but i will change our list component


//so we can make Followers data as context 

const FollowersContext = useContext()

const RenderFollowers = (props) => {

 const [followers, setFollowers] = useState([]);

 //Getting and setting the followers

 return(

  <FollowersContext value={{followers, setFollowers}}>
     {props.children}
  </FollowersContext>

 );

const RenderFollowersList = () => {
 const { followers } = useContext(FollowersContext);

 return <RenderList data = {followers}/>
}

RenderFollowers.RenderFollowersList = RenderFollowersList

const RenderSearch = () => {
 const { followers, setFollowers } = useContext(FollowersContext);

 const filterFollowers = (e) => {
   const query = e.target.value;
   //filter logic
   setFollowers(filteredFollowers)
 }

 return <Search data = {followers} onChange={filterFollowers}/>
}

RenderFollowers.RenderSearch = RenderSearch;


const RenderFollowersCount = () => {
 const { followers} = useContext(FollowersContext);

 return ({`Followers: followers.count`})
}}

RenderFollowers.RenderFollowersCount = RenderFollowersCount;


//Now we can make it a whole component

const Followers = () => {

  <RenderFollowers>
     <RenderFollowers.RenderSearch />

     <RenderFollowers.RenderFollowersList />

     <RenderFollowers.RenderFollowersCount />

  </RenderFollowers>

}

//Sorry for the naming :P

Pros

Avoids Props Drilling
Complexity is reduced as compare to other patterns

Cons

Only direct children can have access to shared state.

Wrap up

Wrapping it all up, there are no perfect solutions so pick and weigh all your pros and cons and then apply it. You will only see affects after some time in a project.

Container/View is very good and easy, we should try to apply it everywhere except when the needs arise.
HOC are very good at sharing functionalities, are highly composable, that means where ever you need to enhance functionalities you should apply. Whenever there is a need in sharing the behaviour, use HOC until the need arise.
Render Props pattern is heavily focused on giving as much as possible freedom to the user of the code. So if you don't know how a functionality is to be used you should 'surrender the render' .
Compound Components are great at sharing the functionality with reduced complexity.

Note: There may be issues with the examples in other ways, I tried to make it as real as possible, if you find any mistakes or any good practices, I will be more than happy to do post scripts.

All of the above, is what I have learned from others so I feel heavily in dept, and also to get better insight see there work too

Credits

Searchable list modal component in vanilla js.

Danish — Tue, 28 Jun 2022 01:54:41 +0000

Peace be upon you - السلام عليكم

The Why

I was using a dropdown to search data of about 22k to 52k of size, dropdown was hanging as it rendered 22k list items at once.

So, I wanted to create my custom searchable list like Trading View's Search, on clicking the input a modal appears and we can search the data, then click on the searched value and it appears on our initial input.

The Steps

Create input.
Create modal.
Bind modal show event to input.
Create search input.
Create list element.
Populate list.
Bind listeners to list's element.
Bind search functionality to search input and list.

Technologies used

Bootstrap 4
Vanilla JS
jQuery

Implementation

First: Create a simple input element and give it a unique id.

This input is used for opening up the selector modal and showing the selected value from the modal.

<input type="text" class="form-control" placeholder="Select Item From List" id="searchModalOpener">

Second: Create a modal, give it a unique id.

<div class="modal " id="searchModalOpener-modal" data-backdrop="static">
    <div class="modal-dialog modal-lg" style="height: 600px">
        <div class="modal-content h-100 rounded-4">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body"> </div>
        </div>
    </div>
</div>

Note: Add the modal as direct child to body or inside a div which is direct child to body.

Third: Bind show event to open modal when clicked on input.

document.getElementById("searchModalOpener").onclick = () => { 
    $(`searchModalOpener-modal`).modal("show"); 
}

Fourth and Fifth: Adding search input and list (with unique id's) in modal body

<div class="modal-body">
    <input type="text" class="form-control" style="text-align: center" placeholder="Search Symbol" id="searchModalOpener-search">
    <div id="searchModalOpener-list" style="height: 400px" class="overflow-auto pb-5"></div>
</div>

Sixth: Populate the list with your data

There can be dozens of ways to achieve it and mine may not be the best so you can be creative in here, I am iterating over the data array and on each iteration I create a p element, style it, add its text value and attach event listener to it so that on click its value gets set on our initial input element, and at last I append it to our list element.


//data: string[] = ["1", "2", "3"];

let list = document.querySelector(`#searchModalOpener-list`);

const addItemToList = (val) => {

    let tag = document.createElement("p");
    tag.id = "p-symbol"
    tag.classList.add(...["my-2", "border-bottom", "py-1"])
    let text = document.createTextNode(val);
    tag.appendChild(text);
    list.appendChild(tag);

}

function populateList() {

    data.forEach((val, index) => {
        addItemToList(val);
    });
}


//Call populateList Method when you are opening the modal, i.e bind it to the shown event of modal

//Above code becomes

$(`searchModalOpener-modal`).on('show.bs.modal', function() {
    listPopulate();
}).modal("show");

Seven: Add listener to list item

// Create a function and bind it to p tag before appending it to the list

let firstInput = document.querySelector("#searchModalOpener");

cost itemOnClick = (val) => {
    firstInput.setAttribute("value", val);

}

// Add this next line in addItemToList Function just before appending it

tag.onclick = () => itemOnClick(val);

Eight: Bind search functionality to search bar.

const searchBar = document.querySelector(`#searchModalOpener-search`);

searchBar.addEventListener('input', function(e) {
  const query = e.target.value;
  if (query.length > 0) {
    list.innerHTML = ``;

    const filteredList = data.filter(val => val.trim().startsWith(query.toUpperCase()));

    filteredList.forEach((val, index) => {
      addItemToList(val);
    });

}

Puff! All done, Feel free to ask anything. Thanks.

PS: After's Joel's comment, it is highly recommended now to just use Vanilla JS, my reason to use jquery was only for modal events, they were not running with document method.

Happy Coding 👋🏻

Basic Unit Test- Starting with testing with jest, Explained.

Danish — Fri, 05 Feb 2021 10:02:37 +0000

Testing using jest

Unit Test

Unit test refers to testing a unit of code any function or class
without external influence, just the functionality of single >piece of code.

Prereq -> make a npm project by creating a folder(testing) and in cmd write npm init --yes

Let's assume a simple js function absolute for testing purpose.

absolute.js

function absolute(number){      
       if(number > 0){
            return number;
       }else if(number < 0) {
            return -number;
       }else{ 
            return 0;
       }

}

module.exports.abs = absolute;

Its a simple function which returns absolute of any given number.

Okay now lets install jest

npm i jest --save-dev

Yup! Install it as dev dependencies

now go into package.json file of your project

//You will see these lines

...//Above Code

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

...//Below Code

Change it to

 "scripts": {
    "test": "jest"
  },

Concept

Before writing test we need to ask a crucial question
How many test I should write to properly test my code ?

And the answer is
Depends on code(function) execution paths

For example in our absolute function we have three execution >paths
Execution Path -> In how many ways a function exits i.e return >statements
To properly test it we have to write three tests !

One to check the positive number case
Second to check the negative number case.
Third to check the zero case.

*by default jest looks for a test or tests folder in the project directory or files ending with somename.spec.js or somename.test.js either inside the test folder or in the project directory.

Jest Concepts and functions

Functions

test("First Parameter is the name of test", ()=>{//second is function where test logic is written.})
expect(takes result of the function to be tested)
toBe(takes the expected output of the function)

Describe is used to group the similar tests,

describe("First parameter is the name of test",()=>{//Series of test})

it() is the function which we write instead of test in describe block.

Lets make a folder and a file.

test/absolute.test.js

Now lets write some tests !

const lib = require("../absolute");

describe("absolute", () => {
  it("will return positive number if input is positive", () => {
    const result = absolute(1);
    expect(result).toBe(1);
  });

  it("will return positive number if input is negative", () => {
    const result = absolute(-1);
    expect(result).toBe(1);
  });

  it("will return zero if input is zero", () => {
    const result = absolute(0);
    expect(result).toBe(0);
  });
});

So we wrote test now lets run them
In the command prompt write npm test

Thanks for reading till here :)
Keep Coding.

100 Algorithm Challenge - Explained and solved- Algorithm 1(Easy)

Danish — Thu, 04 Feb 2021 10:09:46 +0000

Problem - AbsoulteValuesSumMinimization

Given a sorted array of integers a, find an integer x from a such that the value of

abs(a[0] - x) + abs(a[1] - x) + ... + abs(a[a.length - 1] - x)

is the smallest possible,If there are several possible answers, output the smallest one.

Example

For a = [3, 5, 9], the output should be
absoluteValuesSumMinimization(a) = 5.

For a = [2, 4, 7, 6], the output should be
absoluteValuesSumMinimization(a) = 4.

For a = [2, 4, 7, 6, 6, 8], the output should be
absoluteValuesSumMinimization(a) = 7.

Understanding the problem

abs stands for absolute.

Simply above problem states, we have to pick a
number (x) from sorted array (a) so that if we sum the
absolute of difference of every element in a array with x,
that sum number will be minimum as compare to every other x.

Explaining the english with example

a = [3, 5, 7]

First we pick x, lets pick every element
let x = a[0] = 3;
lets calculate the abs of difference of every element with x

abs(a[0]-x) + abs(a[1]-x) + abs(a[2]-x)
abs(3-3) + abs(5-3) + abs(7 - 3) => 0 + 2 + 4 => 6
we got 6 by picking x as 3.

a = [3, 5, 7]

Now let x = a[1] = 5;
lets calculate the abs of difference of every element with x

abs(a[0]-x) + abs(a[1]-x) + abs(a[2]-x)
abs(3-5) + abs(5-5) + abs(7 - 5) => 2 + 0 + 2 => 4
we got 4 by picking x as 5.

Now let x = a[2] = 7;
lets calculate the abs of difference of every element with x

abs(a[0]-x) + abs(a[1]-x) + abs(a[2]-x)
abs(3-7) + abs(5-7) + abs(7 - 7) => 4 + 2 + 0 => 6
we got 6 by picking x as 7.

So Hope you understood the problem, In the above case, the number which yeilds minimum result is the absoluteValuesSumMinimization i.e 5,

_Oh! Wait, Wait, Wait... But this thing has a name which we all understand.... *MEAN Value_*

Yup that is mean value

Okay lets Solve it !! Using TS Code

Algorithm

To find mean value array must be sorted, which is in our case

Next we find if total numbers of element in array are even or
odd,On dividing with 2, if even then we have two mean values, we > take the smaller one, if odd then there is only one mean value.

if odd then we will get the value in fraction,
Math.floor() to rescueeee !!

TS Code

Okay! Lets code.

function absoluteValuesSumMinimization(a: number[]): number {
  //Find if the total numbers are ever or not.
  const isEven = a.length % 2 === 0;


  return isEven ? a[a.length / 2 - 1] : a[Math.floor(a.length / 2)];
}

Dry Run (Testing)

a = [3, 5, 7]
absoluteValuesSumMinimization(a);

isEven = 3 % 2 = 1 === 0 => False

then,

the false part of the statement return will run,

a[Math.floor(1.5)] => a[1] => 5

returns 5;

so the mean is 5

Okay thats it, Thank you.
Keep Coding.

Refrence

This is the course I am taking on udemy, I am writing these series for my better understanding.
100 Algorithm Challenge Course

Redux A short intro.

Danish — Sun, 20 Sep 2020 10:14:01 +0000

Redux - A short introduction

From the documentation , Redux is a predictable state container for JavaScript apps.To put simply its a JS App Data Flow Architecture.

Modern UI Libraries in order to entertain cool UI Features make use of states(States are just like variables, but variables on which a ui component depends). Redux is a data flow architecture which allows us to handle app state in rather easy and well to maintain way.

NOTE : Redux is used for larger apps i.e where there is a lot of UI Components involved and their change depends on data.

Redux Building Blocks

Store

Store is the object that holds the application state.

Yup ! The entire state of an app is represented by store. The store provides some methods to interact, Dispatch actions, Register any listeners e.t.c.

Actions

Simply, Actions are events.

Store is only changed by actions, actions are basically requests which sends data to store and then from store app access the states.

Reducers

Reducers are pure functions which based on actions returns the next state.

*This is the most basics of redux. To know more hop over to the links below.

Useful Links

Generator Functions JavaScript(Examples & Usage in Redux Saga Asynchronous Api Call)

Danish — Thu, 17 Sep 2020 11:11:59 +0000

Tutorial Roadmap

Generator Functions & Iterators?
Usage in Asynchronous Programming(Api Calling)

Generator Functions & Iterators

A generator function is a function which allows us to control the execution of statements in it. i.e can be stopped mid way and continue from where it left

Yup! We can take out any values out of function at any time using yeild and whats more awesome is we can also pass some values in the function during its execution.

yeild 'Anything' // returns anything and pauses

This control in flow of statements is made possible by Iterators Objects.

To put Iterators in plain english it is

Process of looping over custom objects.

Okay Lets See Above Theory In Action

//Normal JS Function
function myName(){
   //Statements
   return 'Danish Ali';
   return 'Unreachable statement';
}

const Name = myName();
console.log(Name) // Danish Ali

This is a working of normal function in JS, It runs till end following run to completion model.

//This is generator function in work

function* myNameGenerator(){

    yeild 'My'
    yeild 'Name is'
    yeild 'Danish'
    return 'Ali'

}

const nameGenerator = myNameGenerator
console.log(nameGenerator) //{[Iterator]} 
console.log(nameGenerator.next()) // {value:'My', done: false}

Yes a generator function returns an Iterator (an Object)
Iterator has an next method
next() returns an object
{value: Any, done: true | false}
value is the next value from generator and done tells us if generator function is capable of generating more values. i.e when done is true there are no more values to be generated.

//Continuing previous code...
console.log(nameGenerator.next()) // {value:'Name is', done: false}
console.log(nameGenerator.next()) // {value:'Danish', done: false}
console.log(nameGenerator.next()) // {value:'Ali', done: true}

At return statement the done is set to true, after that generators cannot further generate.

Diagram : Normal Function Vs Generator Function

Usage in Asynchronous Programming(Api Calling)

Redux Saga a Middle Ware For Redux is developed by using the functionality offered by generators to achieve asynchronity.

Example of Generators used in redux saga

function* loginRequest(obj) {
  //console.log('loginRequest Generator Function Called');

  const response = yield anyRequestFunction(data, 'Url');

  //console.log('Login Request Working', response);

  if (response.status === 200) {
    yield put(loginSuccess(response));
  } else if (response.status === 400) {
    yield put(loginFaliure(response));
  } else {
    yield put(loginFaliure(response));
  }
}

Here when api is called it pauses and executes in background while the control is transferred to next statement after generator call.

Thanks for reading until end, hope it was useful to you.
Happy Coding :)