DEV Community

Cover image for Stop rendering conditions like this

Stop rendering conditions like this

abdelrahman seada on July 15, 2024

we use conditions everywhere on our applications whether for state check or rendering some data into the view depending on some parameters. in this...
Collapse
 
shricodev profile image
Shrijal Acharya • Edited

Just one simple piece of advice: Instead of using 4 spaces for indentation in code snippets for blogs, I think it's better to use 2 spaces as it reduces the need for horizontal scrolling.

Great read. 👌

Collapse
 
abdoseadaa profile image
abdelrahman seada

thanks for this advice 🤍

Collapse
 
johnysavestheworld profile image
John

How about using the tab character? That what it is meant for and every one can set the space to what ever fits best for one.

Collapse
 
bop profile image
bop

github.com/gvergnaud/ts-pattern

this is also a good alternative

Collapse
 
abdoseadaa profile image
abdelrahman seada

will try it thanks 💕

Collapse
 
alexmorgun profile image
Alexander Morgun

As always, all gold is in comments :)

Collapse
 
mttdevbr profile image
mttdev-br

beautiful stuff! rust inspired, perhaps?

Collapse
 
kristofajosh profile image
KristofaJosh

Nice read!! a little improvement for the action array.

const actions = {
  create: 'create',
  read: 'read',
  update: 'update',
  delete: 'delete',
} as const;
Enter fullscreen mode Exit fullscreen mode

create a type of actions

type Actions = (typeof actions)[keyof typeof actions];
Enter fullscreen mode Exit fullscreen mode

then

const userActionsStates : Record<UserType , Actions[] > = {
    admin: ["create", "read", "update", "delete"], // action.create | action.delete
    editor: ["create", "read", "update"],
    user: ["read", "update"],
    default : ["read"]
}
Enter fullscreen mode Exit fullscreen mode

Voila!
no one should add something weird within 😏
...

Collapse
 
abdoseadaa profile image
abdelrahman seada

that's a great one thanks

Collapse
 
mshossain110 profile image
Shahadat Hossain

I think this is not a matter of condition. It's a matter of good practice. Example 1 is easy to understand for beginners, but the other one is good to maintain and easy to extend.

Collapse
 
abdoseadaa profile image
abdelrahman seada

it's a better way to write conditions as you said easy to maintain , extend and debug

Collapse
 
abdoseadaa profile image
abdelrahman seada • Edited

didn't expect that anyone would see this post
cat meme

Collapse
 
hamdi4beep profile image
Hamdi Kamel

This is great!

You get to simplify things further by creating objects with properties that point to specific values instead of checking nonstop for multiple values.

Collapse
 
abdoseadaa profile image
abdelrahman seada

that's exactly it

Collapse
 
abdulrhmanmoha profile image
abdulrhman-moh

this is awesome

Collapse
 
abdoseadaa profile image
abdelrahman seada

you are awesome

Collapse
 
kookakoora profile image
KookaKoora

Amazing tip!

Collapse
 
abdoseadaa profile image
abdelrahman seada

thanks <3

Collapse
 
vavaxx2 profile image
VavaXX2

imperative vs declarative

Collapse
 
leon_gattermayer_2b99f3bc profile image
Leon Gattermayer

One more small advice. Just use ENUM for those roles across the project.

Collapse
 
threestarss profile image
threestarss • Edited

There is nothing wrong with conditions, you just reshaped the data you are working with

Collapse
 
abdoseadaa profile image
abdelrahman seada

exactly, there is nothing wrong with conditions anyways , it's just a better approach

Collapse
 
sid01 profile image
Sidhant Pandey

Really Great Approach, Surely i am going to use in my Project, Awsome Thanks!

Collapse
 
abdoseadaa profile image
abdelrahman seada

that's awesome, have a good one

Collapse
 
mooncloudcodeotr profile image
O.Tito.R.

Thank you for posting, I am aspiring to be able to write and understand fluently! Reading these articles from inside perspectives helps tremendously!

Collapse
 
abdoseadaa profile image
abdelrahman seada

glad to hear that 🤍

Collapse
 
mohammed_chriatt_6865745c profile image
Mohammed CHRIATT

Thank you 🙏

Collapse
 
abdoseadaa profile image
abdelrahman seada

You're welcome 💕

Collapse
 
ehsansafari profile image
Ehsan Safari

You are doing great

Collapse
 
abdoseadaa profile image
abdelrahman seada

thanks 💕

Collapse
 
tinashe_gunda_697ed0ca338 profile image
Tinashe Gunda

Well executed!

Collapse
 
abdoseadaa profile image
abdelrahman seada

thanks 🤍

Collapse
 
mxteusg profile image
Mateus Guedes

Nice one!!!

Collapse
 
abdoseadaa profile image
abdelrahman seada

thanks :)

Collapse
 
dasezo profile image
Mohammed BENGUEZZOU

Brilliant <3

Collapse
 
abdoseadaa profile image
abdelrahman seada

thanks 🤍

Collapse
 
alyouma_akmal_5a4d549d061 profile image
alyouma akmal

Nice code

Collapse
 
abdoseadaa profile image
abdelrahman seada

thanks 🤍

Collapse
 
officialphaqwasi profile image
Isaac Klutse

very understandable.

Collapse
 
abdoseadaa profile image
abdelrahman seada

thanks 🤍🔥

Collapse
 
kkw855 profile image
KEY UNG KIM

thanks 👌

Collapse
 
abdoseadaa profile image
abdelrahman seada

you are welcome 😌🤍

Collapse
 
ronakkhunt profile image
Ronak Khunt

Well explained!

Collapse
 
abdoseadaa profile image
abdelrahman seada

thanks 🤍

Collapse
 
harshadsatra profile image
Harshad

Nice

Collapse
 
abdoseadaa profile image
abdelrahman seada

thanks 🤍

Collapse
 
suyash988 profile image
SUYASH AGNIHOTRI

Nice explanation.

Collapse
 
abdoseadaa profile image
abdelrahman seada

thanks 🤍

Collapse
 
bemimg profile image
Bernardo Guerreiro

great

Collapse
 
abdelrahman_seada_1b2ec1f profile image
Abdelrahman Seada

thanks ♥️

Collapse
 
obere4u profile image
Nwosa Tochukwu

Nice. Thank you for this

Collapse
 
abdoseadaa profile image
abdelrahman seada

thanks 🤍😌

Collapse
 
01u profile image
Olu

I like this.

Collapse
 
abdoseadaa profile image
abdelrahman seada

thanks 🤍

Collapse
 
ngocledevmobile profile image
ngocleDevMobile

Greate!!!!!

Collapse
 
abdoseadaa profile image
abdelrahman seada

thanks 😌

Collapse
 
gabriele_zizzari_3fc98a57 profile image
Gabriele Zizzari

Perfect explanation!!!
simple way to do clean code :)

Collapse
 
abdoseadaa profile image
abdelrahman seada

happy to hear that 💕