Forem: Anoop Francis V H

How Do You do Documentation In Your Company/Project?

Anoop Francis V H — Fri, 07 Apr 2023 06:51:54 +0000

Hi Guys, To give you guys context, recently I was talking with my colleague on how we don't have a proper documentation on how we have done our code/solution/infra (basically everything). I wanted fix this so planned on creating a way we could document all things related to developing a feature/solution.
So I decided on doing two things

Create a documentation to serve as knowledge Hub
- which could be used by any member in the company, and would be subjected to constant review and updates as our collective knowledge grows.
Create a documentation template for individual projects
- which could be forked by any project to mcreate their on documentation.

So I planned on acheiving this using docusauraus for static site generator, and github and github pages for reviewing and deploying purposes.

But before I proceed further, I thought it's best to ask what other companies do so I could make a better decision. so here I am.

So I would like to know what you guys do interms of documenting. for instance.

What tools do you use for documentation (if it's free, then great)
Is there a template on how you create a documentation. like technical documentation would contain certain topics it should cover like what it does, To DO, limitations etc.
How do you document technical document and non-technical document.
Do your company have a repository of shared knowledge. if so what it does and how it is done and maintained

Any advice is welcome and thanks for your replies

Where can I deploy my web app for free, any suggestions?

Anoop Francis V H — Sat, 31 Dec 2022 06:55:53 +0000

I am trying to learn how to build and deploy a webapp using following stack

Frontend - React ^18.2.0
Backend - Node.js v16.13.0 [Rest API]
Database - Mysql 8.0+
Can you guys where I can host for free. Help appreciated

How Would You Make It: Efficient and optimized way of tracking unread message per user

Anoop Francis V H — Tue, 23 Aug 2022 12:12:00 +0000

Recently at work we encountered an issue where the inbox Api for an application we were building was slow and we realized it's not scalable.

So when we diagnosed we came up with 3 solutions we can implement
which can take out complex where clause or optimize the table which read info was taken from or both,you must be wondering how complex is this where clause, it went something like this

WHERE receiver ->'$.permission' = ${permissionValue}
      AND (CASE
        WHEN receiver->'$.userType' = ${userType}
        THEN receiver->'$.sendOfficeUser' = true
        WHEN receiver->'$.moduleType' = 'reviewApproval'
        THEN JSON_UNQUOTE(receiver->'$.pLevel') IN ('${permList.review.join("','")}')
        WHEN receiver->'$.moduleType' = 'actions'
        THEN JSON_UNQUOTE(receiver->'$.pLevel') IN ('${permList.action.join("','")}')
        WHEN receiver->'$.moduleType' = ''
        THEN JSON_UNQUOTE(receiver->'$.pLevel') = ''
        ELSE true
        END)
      AND (CASE
        WHEN receiver->'$.grant' IS NOT NULL
        THEN receiver->'$.grant' = '${grant}'
        ELSE true
        END)`

Modify the current implementation of how information is stored in NotificationRead - table used to track all read status
Ditch the NotificationRead table altogether and hence the Join query as well and introduce two new columns, Owner and read, will contain an array of userId's, this method will reduce not only the join but a complex WHERE clause which relied on JSON column reciever as shown above
And Finally a hybrid of the two with solutions earlier, we will have owner column to recognise who can see it but read information will be queried from NotificationRead table

I will talk in detail about the first implementation and remaining two which are straight forward will be given a breif description

1st implementation

Columns

notification_id
- Data Type - bigint
- Foreign key Constraint - Notification.notification_id
- Composite Key
user_id
- Data Type - varchar(50)
- Foreign key Constraint - Users.username
- Composite Key
mark_all
- Data Type - bit(1)
- Can be Null
last_id_marked
- Data Type - bigint
- Foreign key Constraint - Notification.notification_id
- Can be Null

This Table Will be Populated when a user clicks on a inbox notification or clicks on Mark all read

The composite Keys In this tables are straight forward, _notification_id_is the notification read and _user_id_is the user who read it

_mark_all_will be used as a flag of sorts to show that it was marked all from that Id onwards, means that let's say a user with username 'anoop' clicks mark all, and let's say the latest notification's _notification_id_is 800
NotificationRead record will look like this

{
"NotificationRead": [
    {
        "notification_id" : 800,
        "user_id" : "anoop",
        "mark_all" : 1,
        "last_id_marked" : null
    }
]}

What this means is:

1. that while querying the Notification table we will assume that all notifications below 800 is read by the user, this is possible because _notification_id _in Notification table is auto increment.
2. What this means is that we will only need to store one record in case when a mark all is performed, rather than store all records

last_read_id(probably not the accurate name to it's purpose it serves) will used to store the last_id in a consecutive list of id's marked as read, let me explain
if users mark a set of consecutive mark all akin to something like check box in Gmail which shows 50 at a time, let's say notification_id's 851 to 801 and try to mark them as read our db won't store 50 records instead only one record. and it will look like this

{
"NotificationRead": [
    {
        "notification_id" : 851,
        "user_id" : "anoop",
        "mark_all" : null,
        "last_id_marked" : 801
    }
]}

what this means:

that while querying the Notification table we will assume that all notifications between 851 and 801 is read by the user
What this means is that we will only need to store one record instead of 50

The Query

let us look at sample query resulting from this pattern of data, I made a demo table and tested, and it works fine

SELECT n.notification_id , (CASE WHEN nr.notification_id IS NOT NULL THEN true ELSE false END) AS hasRead
FROM Notification n
LEFT JOIN NotificationRead nr ON nr.user_id = 'anoop' AND (nr.mark_all = 1 AND nr.notification_id >= n.notification_id) 
OR (n.notification_id = nr.notification_id) 
OR (nr.last_id_marked IS NOT NULL AND n.notification_id BETWEEN nr.last_id_marked AND nr.notification_id) 
WHERE {condition}

and now we come to last peice in puzzle (actually the first)...

Data Insertion

Query all notifications id applicable to user with current read status like shown in the sample query in earlier section
map the result and update the read status of the FE provided id(s) to true, so far straight forward

const newlyReadData = currentReadData.map((currentRead) => {
    return {
             ...currentRead,
             isRead: currentRead.isRead ? true: ids.includes(currentRead.id)
           }
})

Now the crux of data insertion logic starts here. we will reduce the resultant array after mapping and break it into an new array of array of all the id's that has isRead true status, breakdown of the array of array's (we can call it grouping , batching something like that). would be like this:
let's say a user had 10 notification's 1-10, and the resultant array map of is read is like this = 1,2,3,5,8,9, the reduced array batch will look like this [[1,2,3],[5],[8,9] we will batch all consecutive read notification into one array as you must have deduced from example below. to demonstrate further let's take a look at another example
same scenario as earlier but read one's are like this 1,2,5,6,7,8,9,10 the batch array will look like [[1,2],[5,6,7,8,9,10]]

const batchingNotificationsRead = (notification) => {
    const batchArray = []
    let individualBatch = []
    for (const [index,notified] of notification.entries()) {
        if (notified.isRead){
            individualBatch.push(notified.id)
        }
        else if (!notified.isRead && individualBatch.length > 0) {
            batchArray.push(individualBatch)
            individualBatch = []
        }
        if (index === notification.length -1 && individualBatch.length > 0){
            batchArray.push(individualBatch)
            individualBatch = []
        }
    }
    return batchArray
}

finally let's say we have all 10 as read batch array will look like [[1,2,3,4,5,6,7,8,9,10]] .
Now from the batch array we prepare data to be inserted to data for the batching [[1,2,3],[5],[8,9] we will have three records in DB as follows

[

{   
    "notification_id" : 1,
    "user_id" : "anoop",
    "mark_all" : null,
    "last_id_marked" : 3
},
{  
     "notification_id" : 5,
    "user_id" : "anoop",
    "mark_all" : null,
    "last_id_marked" : null
},
{
    "notification_id" : 8,
    "user_id" : "anoop",
    "mark_all" : null,
    "last_id_marked" : 9
}
]

for the batching [[1,2],[5,6,7,8,9,10] we will have two records in DB as follows

[

{   
    "notification_id" : 1,
    "user_id" : "anoop",
    "mark_all" : null,
    "last_id_marked" : 2
},
{  
     "notification_id" : 5,
    "user_id" : "anoop",
    "mark_all" : 1,
    "last_id_marked" : null
}
]

for the batching [[1,2,3,4,5,6,7,8,9,10] we will only have one records in DB as follows

[
    {  
         "notification_id" : 1,
        "user_id" : "anoop",
        "mark_all" : 1,
        "last_id_marked" : null
    }
]

const prepareNotificationReadForDb = (data ) => {
    let dbData = []
    for (let j = data.length - 1; j>=0; j--) {
        const batch = data[j]
        if (batch[batch.length - 1] === notification[notification.length - 1].id && batch.length > 1) {
            let insertData = {
                "notification_id" : data[j][0],
                "user_id" : "anoop",
                "mark_all" : 1,
                "last_id_marked" : null
            }
            dbData.push(insertData)
        }else if (batch.length > 1) {
            let insertData = {
                "notification_id" : batch[0],
                "user_id" : "anoop",
                "mark_all" : null,
                "last_id_marked" : batch[batch.length - 1]
            }
            dbData.push(insertData)
        }else {
            let insertData = {
                "notification_id" : data[j][0],
                "user_id" : "anoop",
                "mark_all" : null,
                "last_id_marked" : null
            }
            dbData.push(insertData)
        }
    }
    return dbData
}

Last step is deleting all previous records under the username and inserting the newly formed records, since we are doing deletion before updating we have to do unitofworktransaction method as it will be really dangerous to delete and us not being able update.

What this batching means is that we will have maximum n records for 2n-1 notification a user has (if the user read all notifications alternatively). and if they press mark all it reduces to 1 record per user this reduced records in the table speeds up the query.

So Now I would Like to know, how would have you done it, will you guys choose any one of the options mentioned above or you guys have a solution of your own. Please share...

How Would you make this React code with dynamic filtering more optimized

Anoop Francis V H — Wed, 08 Jun 2022 05:28:23 +0000

I was given a task of optimizing our dashboards performance this week. And to be honest I wasn't really sure what is it means by optimization. On googling I found that one way to optimize is reducing unnecessary re-render and aviding unnecessary API calls.

so I set the my goals like this:

To have Fewer Render hence better performance (possibly by introducing useRef instead of useState if possible)
Eliminating Unnecessary API calls (when applying the same filter or when clicking reset again and again shouldn't trigger an API call)
Right way to use useReducer and check for anti-patterns in my
custom hook

And I came up with the minimal, workable example and here is the working demo

I was only half successful in acheiving my optimization:

Once I apply filter and then apply it again it doesn't call the mock api
Once I change resultLimit to same value it doesn't call api Here is how I did it

    const [page,setPage] = useState(1)//current page filter
    const [resultLimit,setResultLimit] = useState(10) //result limit filter,currently not implemented
    const [totalCount,setTotalCount] = useState(0) // total result count filter
    const [filters,setFilters] =useState<IFilterBugData>({
        platform:[],
        rootCause: [],
        reportedBy: [],
        assignedTo: [],
        status: [],
        defectCategory: [],
        severity: [],
        priority: [],
    })//filter options

    const [bugsData,setBugsData] = useState<IBug[]>([]) //bugs result

    const handleFilterDispatch = (state:IKeyValue[],payload:IFilterPayload) => {
        let _temp = [...state]
        switch(payload.action){
            case 'add':
                return _temp
            case 'reset':
                return []
            default:
                return _temp
        }
    }// use reducer for handling function temp filter state

    // const filterState = useRef<IKeyValue[]>([])
    const [filterState,filterDispatch] = useReducer(handleFilterDispatch,[])//temp filter state
    const [finalFilterState,setFinalFiterState] = useState<IKeyValue[]>([])//input filter state

    const memoizedInput:IInputBugData = useMemo(() => {
        return {
            filters:finalFilterState,
            page,
            resultLimit
        }
    },[finalFilterState,page,resultLimit])

    const getBugsData = useCallback(() =>   {
        console.log('inside memoized callback',memoizedInput)

        return getBugs(memoizedInput)
    }, [memoizedInput])

and calling the memoized function getBugsData in useEffect although I have doubt that memoizedInput is not necessary here

    useEffect(() => {
        console.log('rendering dataaaaaa')
        let {resultCount,currentPage,bugs,filters} = getBugsData()
        setBugsData(bugs)
        setFilters({...filters})
        setPage(currentPage)
        setTotalCount(resultCount)
    },[getBugsData])

But What it failed to do is

It stills call api when I deselect and select the same option resulting in same filterstate
clicking reset always calls api (even if there is no filter applied)
even if I haven't changed my filters when I click apply it re-renders (only once)

so my question is how would you guys do it differently.

Note: you guys can also point out the anti-patterns I have done, as I am not sure if I am doing custom hooks or useReducer/useCallback/useMemo the correct way

How I Created a Custom Carousel In React using useRef and useState in Typescript

Anoop Francis V H — Tue, 16 Nov 2021 16:39:08 +0000

Hello world...
This is my first post hoping I can write more. quick intro about me, I have been a developer for 2 years and one year as a Front-End developer, working on react.
I try to create fun react component from scratch rather than relying on a package or some library like material UI or Ant Design. By this post I aim to explain How I created a custom carousel using react hooks some css and typescript.

How It Works:

Before we start I want to show you how it looks in code and how it looks in action

            <Carousel
            heading="demo"
            n={2}
            g="12px"
            >
             {[...Array(10)].map((_val,index) => {
                    return(
                        <FlexBoxTitleCard
                        title={`item ${index+1}`}
                        key={`item ${index+1}`}
                        />
                    )
                })}
            </Carousel>

This is How It is in action:
Carousel Demo

CODE:

this is the code for my carousel component we will break it down step by step:
this is how the carousel.tsx looks like

import { useRef, useState } from 'react'

interface CarouselProps {
    heading:string,
    children:JSX.Element[]
    n?:number,
    g?:string,
}

export const Carousel = (props:CarouselProps) => {

    const [active,setActive] = useState(0)

    const carouselRef = useRef<HTMLDivElement>(null)


    const scrollToNextElement= () => {
        if(carouselRef.current){
            if(active < carouselRef.current.childNodes.length - (props.n?props.n:3)){
                carouselRef.current.scrollLeft = (carouselRef.current.childNodes[active + 1] as HTMLElement).offsetLeft - (carouselRef.current.parentNode as HTMLElement).offsetLeft;
                setActive(active +1)
            }
        }
    }

    const scrollToPreviousElement = () => {
        console.log(active);
        if(carouselRef.current){
            if(active > 0) {
                carouselRef.current.scrollLeft = (carouselRef.current.childNodes[active - 1] as HTMLElement).offsetLeft - (carouselRef.current.parentNode as HTMLElement).offsetLeft ;
                setActive(active - 1)
            }
        }
    }

    return(
        <div>
            <div>
                <p>{props.heading}</p>
                <div>
                    <span className="nav-button cursor_pointer" onClick={scrollToPreviousElement} style={{marginRight:"32px"}}>{"<"}</span>
                    <span className="nav-button cursor_pointer" onClick={scrollToNextElement}>{">"}</span>
                </div>
            </div>
            <div
            className="carousel-slides"
            ref={carouselRef}
            style={{
                gridAutoColumns:`calc((100% - (${props.n?props.n:3} - 1)*${props.g?props.g:"32px"})/${props.n?props.n:3})`,
                gridGap:props.g
            }}
            >
                {props.children}
            </div>
        </div>

    )
}

carousel.css

.carousel-slides {
  display: grid;
  grid-auto-flow: column;
  /* grid-auto-columns: calc((100% - (var(--n) - 1) * var(--g)) / var(--n));
    grid-gap: var(--g); */
  overflow: hidden;
  scroll-behavior: smooth;
  padding: 40px 0;
}

.carousel-slides::-webkit-scrollbar {
  display: none;
}

.nav-button {
  padding: 8px;
  border: 1px solid black;
  border-radius: 100%;
}

Carousel will have 4 props:

interface CarouselProps {
    heading:string,
    children:JSX.Element[]
    n?:number,
    g?:string,
}

let's break it down,

heading:(required) - Heading For the Carousel
children:(required) - Elements inside a carousel, It doesn't matter if it's JSX.Element or JSX.Element[]
n_:(optional) - number of elements to be shown , default 3
g:(optional) - gap between each carousel element , default 32px

    const [active,setActive] = useState(0)

    const carouselRef = useRef<HTMLDivElement>(null)

I have a state active which denotes the left most element in the JSX.Element array
And I have a reference to the carousel element wrapper carouselRef

    const scrollToNextElement= () => {
        if(carouselRef.current){
            if(active < carouselRef.current.childNodes.length - (props.n?props.n:3)){
                carouselRef.current.scrollLeft = (carouselRef.current.childNodes[active + 1] as HTMLElement).offsetLeft - (carouselRef.current.parentNode as HTMLElement).offsetLeft;
                setActive(active +1)
            }
        }
    }

scrollToNextElement function lets you scroll to next element in the carousel. Using carouselRef I am able to access the child nodes and I just change scroll left of the wrapper element to the next elements offset left, it's important substract the parent offsetleft to avoid scrolling the extra padding outside the parent element
the wrapper element itself is a grid component, the inline styling of the element is done so that it can take in prop n to get how many elements to show inside the carousel

gridAutoColumns:`calc((100% - (${props.n?props.n:3} - 1)*${props.g?props.g:"32px"})/${props.n?props.n:3})`

this line of could sets the grid in one single row with as many as n number of items available to see, since the overflow is hidden we cannot see the rest of the elements.
scrollToPreviousElement uses the same logic

What Can I do Next:
add another prop
step:(optional) - prop which accepts number and will be the numbers of elements it will skip when we click next or previous

Scrape both scrollToNextElement and scrollToPreviousElement and change to scrollToElement which accepts a number and skips to that element