feat: TCS frontend #13
Conversation
… initial test cases
…tion fixed, modify and clone fixed
omair235
left a comment
omair235
left a comment
There was a problem hiding this comment.
TAZAMA CONNECTION STUDIO FE
use absolut path everywhere
no error handling using yup for input fields validation
instead of using nested logics and multiple if and else if u can leverage objetct literals it makes code clean and readable
when mapping anything on UI please always use fallback conditions
example -> response.description || 'N/A'
dont use inline logic
onChange={(e) => setCronExpression(e.target.value)} instead use HANDLER
repeating input fields and labels make array of object for fields and map them using 1 jsx template
structure FOR COMPONETS should be :
functions outside component body u they dont recreate in memory after every render
default export
states
useEffects
handlers
api calls
form submission handlers should be the last part before jsx
JSX (it should not be responsible for logical decisions)
a component should not be larger than 400 lines ideally it should be of 200 lines max
we are not using any form management library like react hook form why???
no build in component library for UI like MUI ?? creating css again & again using tailwind why ??
why we are using fetch instead of axios ???
folder structure is also not scalable
remove all console.logs
no custom hooks for logic implementation (too big components single component performing multiple tasks)
not breaking components in to smaller chunks
no helper functions
no coding consistency across the components
no common components (like pagination,loader,error,table,etc etc )
on some places we r using class components some where we r exporting components as default somewhere we are just exporting them
readability of code is very poor
Reusability of code is very poor
console.log is synchorous so please use it for debugging purpose only either remove them or comment out
some useStates have type while some dont have type ??
dont use inline logic in jsx create separate handlers for this
try not to repeat code again & again )for example recreating loader ,error,pagination jsx & css again and agian in every component
no helper functions utility for reusing logic
no customHooks utility for UI and business logic separation
no fallback conditions
no optional chaining
after development please remove all comment out code
| @@ -0,0 +1,84 @@ | |||
| import React, { useState } from 'react'; | |||
| import { AuthHeader } from '../../../shared/components/AuthHeader'; | |||
There was a problem hiding this comment.
why using relative paths ??
kindly use absolute paths
| } | ||
|
|
||
| const ApproverDEMS: React.FC<ApproverDEMSProps> = ({ onBack }) => { | ||
| const [endpoints] = useState([]); |
There was a problem hiding this comment.
where is setEndpoints?? this will always be an empty array treating.
|
|
||
| const handleApprove = (id: number) => { | ||
| console.log('Approve endpoint:', id); | ||
| }; |
There was a problem hiding this comment.
where is handleApprove implementation??
| }; | ||
|
|
||
| const handleReject = (id: number) => { | ||
| console.log('Reject endpoint:', id); |
There was a problem hiding this comment.
where is handleReject implementation??
| }; | ||
|
|
||
| const handleView = (id: number) => { | ||
| console.log('View endpoint:', id); |
| const formatDate = (dateString: string) => { | ||
| return new Date(dateString).toLocaleString('en-US', { | ||
| year: 'numeric', | ||
| month: 'long', | ||
| day: 'numeric', | ||
| hour: '2-digit', | ||
| minute: '2-digit', | ||
| }); | ||
| }; | ||
|
|
There was a problem hiding this comment.
should be a common function
ATM u r repeating it
| const getStatusColor = (status: string) => { | ||
| switch (status) { | ||
| case 'PENDING': | ||
| return 'bg-yellow-100 text-yellow-800 border-yellow-200'; | ||
| case 'IN-PROGRESS': | ||
| return 'bg-blue-100 text-blue-800 border-blue-200'; | ||
| case 'SUSPENDED': | ||
| return 'bg-red-100 text-red-800 border-red-200'; | ||
| case 'CLONED': | ||
| return 'bg-purple-100 text-purple-800 border-purple-200'; | ||
| default: | ||
| return 'bg-gray-100 text-gray-800 border-gray-200'; | ||
| } | ||
| }; |
| <option value="append">Append - Add new records to existing data</option> | ||
| <option value="replace">Replace - Replace all existing data</option> | ||
| <option value="update">Update - Update existing records</option> |
There was a problem hiding this comment.
there should be an array of object which is getting mapped here for options
| ); | ||
| }; | ||
|
|
||
| export default JobDetailsModal; |
There was a problem hiding this comment.
this whole component is just repeating JSX again & again
u can easily make it clean and readable by just mapping jsx just once
There was a problem hiding this comment.
this has to be divided in to chunks of code
modular based components is the mental model of react please utilize it
omair235
left a comment
omair235
left a comment
There was a problem hiding this comment.
TAZAMA CONNECTION STUDIO FE
use absolut path everywhere
no error handling using yup for input fields validation
instead of using nested logics and multiple if and else if u can leverage objetct literals it makes code clean and readable
when mapping anything on UI please always use fallback conditions
example -> response.description || 'N/A'
dont use inline logic
onChange={(e) => setCronExpression(e.target.value)} instead use HANDLER
repeating input fields and labels make array of object for fields and map them using 1 jsx template
structure FOR COMPONETS should be :
functions outside component body u they dont recreate in memory after every render
default export
states
useEffects
handlers
api calls
form submission handlers should be the last part before jsx
JSX (it should not be responsible for logical decisions)
a component should not be larger than 400 lines ideally it should be of 200 lines max
we are not using any form management library like react hook form why???
no build in component library for UI like MUI ?? creating css again & again using tailwind why ??
why we are using fetch instead of axios ???
folder structure is also not scalable
remove all console.logs
no custom hooks for logic implementation (too big components single component performing multiple tasks)
not breaking components in to smaller chunks
no helper functions
no coding consistency across the components
no common components (like pagination,loader,error,table,etc etc )
on some places we r using class components some where we r exporting components as default somewhere we are just exporting them
readability of code is very poor
Reusability of code is very poor
console.log is synchorous so please use it for debugging purpose only either remove them or comment out
some useStates have type while some dont have type ??
dont use inline logic in jsx create separate handlers for this
try not to repeat code again & again )for example recreating loader ,error,pagination jsx & css again and agian in every component
no helper functions utility for reusing logic
no customHooks utility for UI and business logic separation
no fallback conditions
no optional chaining
after development please remove all comment out code
…P conditional field visibility - Support payload editing and regeneration in creation mode - Hide payload editor in edit mode - Add tenantId to endpoint preview - Fix read-only logic for clone/edit modes - Add Functions API integration - Update Docker configuration
…lone options into Actions dropdown in ConfigList - Add Actions dropdown to CronJobList with Edit and Pause/Play options - Remove standalone Clone Configuration button from DEMS - Implement click-outside handler for dropdown menus - Consistent UI pattern across all modules
Abdullah-Siddiqui-Paysys
force-pushed
the
feat-paysys-frontend
branch
from
c67364a to
009cfb5
Compare
…nd for Approval button, and function validation
sohaib1083-paysys
force-pushed
the
feat-paysys-frontend
branch
from
d7efc9b to
3955bd4
Compare
… mapper, fix table height consistency, improve no jobs found UX
…onnection-studio into feat-paysys-sohaib DE fixes
…added mapping check
…onnection-studio into feat-paysys-frontend
SPDX-License-Identifier: Apache-2.0
What did we change?
Why are we doing this?
How was it tested?