javascript-usebruno-bruno-add-class-to-classname-attribute

Before

program

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "IconBell"

} "}"

from "from"

string

' "'"

string_fragment "@tabler/icons"

' "'"

; ";"

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "useState"

} "}"

from "from"

string

' "'"

string_fragment "react"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "StyledWrapper"

from "from"

string

' "'"

string_fragment "./StyleWrapper"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "Modal"

from "from"

string

' "'"

string_fragment "components/Modal/index"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "Portal"

from "from"

string

' "'"

string_fragment "components/Portal"

' "'"

; ";"

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "useEffect"

} "}"

from "from"

string

' "'"

string_fragment "react"

' "'"

; ";"

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "useApp"

} "}"

from "from"

string

' "'"

string_fragment "providers/App"

' "'"

; ";"

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "fetchNotifications"

, ","

import_specifier

identifier "markAllNotificationsAsRead"

, ","

import_specifier

identifier "markNotificationAsRead"

} "}"

from "from"

string

' "'"

string_fragment "providers/ReduxStore/slices/notifications"

' "'"

; ";"

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "useDispatch"

, ","

import_specifier

identifier "useSelector"

} "}"

from "from"

string

' "'"

string_fragment "react-redux"

' "'"

; ";"

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "humanizeDate"

, ","

import_specifier

identifier "relativeDate"

} "}"

from "from"

string

' "'"

string_fragment "utils/common"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "ToolHint"

from "from"

string

' "'"

string_fragment "components/ToolHint"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "DOMPurify"

from "from"

string

' "'"

string_fragment "dompurify"

' "'"

; ";"

lexical_declaration

const "const"

variable_declarator

identifier "PAGE_SIZE"

= "="

number "5"

; ";"

lexical_declaration

const "const"

variable_declarator

identifier "Notifications"

= "="

arrow_function

formal_parameters

( "("

) ")"

=> "=>"

statement_block

{ "{"

lexical_declaration

const "const"

variable_declarator

identifier "dispatch"

= "="

call_expression

identifier "useDispatch"

arguments

( "("

) ")"

; ";"

lexical_declaration

const "const"

variable_declarator

object_pattern

{ "{"

shorthand_property_identifier_pattern "version"

} "}"

= "="

call_expression

identifier "useApp"

arguments

( "("

) ")"

; ";"

lexical_declaration (+24 nodes collapsed)

lexical_declaration

const "const"

variable_declarator

array_pattern

[ "["

identifier "showNotificationsModal"

, ","

identifier "setShowNotificationsModal"

] "]"

= "="

call_expression

identifier "useState"

arguments

( "("

false "false"

) ")"

; ";"

lexical_declaration

const "const"

variable_declarator

array_pattern

[ "["

identifier "selectedNotification"

, ","

identifier "setSelectedNotification"

] "]"

= "="

call_expression

identifier "useState"

arguments

( "("

null "null"

) ")"

; ";"

lexical_declaration

const "const"

variable_declarator

array_pattern

[ "["

identifier "pageNumber"

, ","

identifier "setPageNumber"

] "]"

= "="

call_expression

identifier "useState"

arguments

( "("

number "1"

) ")"

; ";"

lexical_declaration

const "const"

variable_declarator

identifier "notificationsStartIndex"

= "="

binary_expression

parenthesized_expression

( "("

binary_expression

identifier "pageNumber"

- "-"

number "1"

) ")"

* "*"

identifier "PAGE_SIZE"

; ";"

lexical_declaration

const "const"

variable_declarator

identifier "notificationsEndIndex"

= "="

binary_expression

identifier "pageNumber"

* "*"

identifier "PAGE_SIZE"

; ";"

lexical_declaration (+21 nodes collapsed)

lexical_declaration (+26 nodes collapsed)

expression_statement (+38 nodes collapsed)

expression_statement (+27 nodes collapsed)

expression_statement (+88 nodes collapsed)

lexical_declaration (+30 nodes collapsed)

lexical_declaration (+41 nodes collapsed)

lexical_declaration (+61 nodes collapsed)

lexical_declaration (+137 nodes collapsed)

lexical_declaration (+163 nodes collapsed)

return_statement

return "return"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "StyledWrapper"

> ">"

jsx_element (+182 nodes collapsed)

jsx_expression

{ "{"

binary_expression

identifier "showNotificationsModal"

&& "&&"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "Portal"

> ">"

jsx_element

jsx_opening_element (+100 nodes collapsed)

jsx_element

jsx_opening_element

< "<"

identifier "div"

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "notifications-modal"

" "\""

> ">"

jsx_expression

{ "{"

ternary_expression

binary_expression

member_expression

identifier "notifications"

optional_chain "?."

property_identifier "length"

> ">"

number "0"

? "?"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "div"

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "grid grid-cols-4 flex flex-row text-sm"

" "\""

> ">"

jsx_element (+420 nodes collapsed)

jsx_element (+129 nodes collapsed)

jsx_closing_element

</ "</"

identifier "div"

> ">"

) ")"

: ":"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "div"

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "opacity-50 italic text-xs p-12 flex justify-center"

" "\""

> ">"

jsx_text "You are all caught up!"

jsx_closing_element

</ "</"

identifier "div"

> ">"

) ")"

} "}"

jsx_closing_element

</ "</"

identifier "div"

> ">"

jsx_closing_element

</ "</"

identifier "Modal"

> ">"

jsx_closing_element

</ "</"

identifier "Portal"

> ">"

) ")"

} "}"

jsx_closing_element

</ "</"

identifier "StyledWrapper"

> ">"

) ")"

; ";"

} "}"

; ";"

export_statement

export "export"

default "default"

identifier "Notifications"

; ";"

After

program

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "IconBell"

} "}"

from "from"

string

' "'"

string_fragment "@tabler/icons"

' "'"

; ";"

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "useState"

} "}"

from "from"

string

' "'"

string_fragment "react"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "StyledWrapper"

from "from"

string

' "'"

string_fragment "./StyleWrapper"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "Modal"

from "from"

string

' "'"

string_fragment "components/Modal/index"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "Portal"

from "from"

string

' "'"

string_fragment "components/Portal"

' "'"

; ";"

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "useEffect"

} "}"

from "from"

string

' "'"

string_fragment "react"

' "'"

; ";"

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "useApp"

} "}"

from "from"

string

' "'"

string_fragment "providers/App"

' "'"

; ";"

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "fetchNotifications"

, ","

import_specifier

identifier "markAllNotificationsAsRead"

, ","

import_specifier

identifier "markNotificationAsRead"

} "}"

from "from"

string

' "'"

string_fragment "providers/ReduxStore/slices/notifications"

' "'"

; ";"

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "useDispatch"

, ","

import_specifier

identifier "useSelector"

} "}"

from "from"

string

' "'"

string_fragment "react-redux"

' "'"

; ";"

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "humanizeDate"

, ","

import_specifier

identifier "relativeDate"

} "}"

from "from"

string

' "'"

string_fragment "utils/common"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "ToolHint"

from "from"

string

' "'"

string_fragment "components/ToolHint"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "DOMPurify"

from "from"

string

' "'"

string_fragment "dompurify"

' "'"

; ";"

lexical_declaration

const "const"

variable_declarator

identifier "PAGE_SIZE"

= "="

number "5"

; ";"

lexical_declaration

const "const"

variable_declarator

identifier "Notifications"

= "="

arrow_function

formal_parameters

( "("

) ")"

=> "=>"

statement_block

{ "{"

lexical_declaration

const "const"

variable_declarator

identifier "dispatch"

= "="

call_expression

identifier "useDispatch"

arguments

( "("

) ")"

; ";"

lexical_declaration

const "const"

variable_declarator

object_pattern

{ "{"

shorthand_property_identifier_pattern "version"

} "}"

= "="

call_expression

identifier "useApp"

arguments

( "("

) ")"

; ";"

lexical_declaration (+24 nodes collapsed)

lexical_declaration

const "const"

variable_declarator

array_pattern

[ "["

identifier "showNotificationsModal"

, ","

identifier "setShowNotificationsModal"

] "]"

= "="

call_expression

identifier "useState"

arguments

( "("

false "false"

) ")"

; ";"

lexical_declaration

const "const"

variable_declarator

array_pattern

[ "["

identifier "selectedNotification"

, ","

identifier "setSelectedNotification"

] "]"

= "="

call_expression

identifier "useState"

arguments

( "("

null "null"

) ")"

; ";"

lexical_declaration

const "const"

variable_declarator

array_pattern

[ "["

identifier "pageNumber"

, ","

identifier "setPageNumber"

] "]"

= "="

call_expression

identifier "useState"

arguments

( "("

number "1"

) ")"

; ";"

lexical_declaration

const "const"

variable_declarator

identifier "notificationsStartIndex"

= "="

binary_expression

parenthesized_expression

( "("

binary_expression

identifier "pageNumber"

- "-"

number "1"

) ")"

* "*"

identifier "PAGE_SIZE"

; ";"

lexical_declaration

const "const"

variable_declarator

identifier "notificationsEndIndex"

= "="

binary_expression

identifier "pageNumber"

* "*"

identifier "PAGE_SIZE"

; ";"

lexical_declaration (+21 nodes collapsed)

lexical_declaration (+26 nodes collapsed)

expression_statement (+38 nodes collapsed)

expression_statement (+27 nodes collapsed)

expression_statement (+88 nodes collapsed)

lexical_declaration (+30 nodes collapsed)

lexical_declaration (+41 nodes collapsed)

lexical_declaration (+61 nodes collapsed)

lexical_declaration (+137 nodes collapsed)

lexical_declaration (+163 nodes collapsed)

return_statement

return "return"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "StyledWrapper"

> ">"

jsx_element (+182 nodes collapsed)

jsx_expression

{ "{"

binary_expression

identifier "showNotificationsModal"

&& "&&"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "Portal"

> ">"

jsx_element

jsx_opening_element (+100 nodes collapsed)

jsx_element

jsx_opening_element

< "<"

identifier "div"

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "notifications-modal"

" "\""

> ">"

jsx_expression

{ "{"

ternary_expression

binary_expression

member_expression

identifier "notifications"

optional_chain "?."

property_identifier "length"

> ">"

number "0"

? "?"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "div"

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "grid grid-cols-4 flex flex-row"

" "\""

> ">"

jsx_element (+420 nodes collapsed)

jsx_element (+129 nodes collapsed)

jsx_closing_element

</ "</"

identifier "div"

> ">"

) ")"

: ":"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "div"

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "opacity-50 italic text-xs p-12 flex justify-center"

" "\""

> ">"

jsx_text "You are all caught up!"

jsx_closing_element

</ "</"

identifier "div"

> ">"

) ")"

} "}"

jsx_closing_element

</ "</"

identifier "div"

> ">"

jsx_closing_element

</ "</"

identifier "Modal"

> ">"

jsx_closing_element

</ "</"

identifier "Portal"

> ">"

) ")"

} "}"

jsx_closing_element

</ "</"

identifier "StyledWrapper"

> ">"

) ")"

; ";"

} "}"

; ";"

export_statement

export "export"

default "default"

identifier "Notifications"

; ";"