Refactor Code and Implement details and list page for httpproxy

[meysam-jeffrey]

Objective

• implement details route page
• refactor create and edit component route
• implement List page of HTTPProxy routes
• change and refactor strucutre project
• add chart for metric data

[MortezaMirjavadi]

@meysam-jeffrey Jan, if you possible, attach a demo for changes.

[MortezaMirjavadi]

@meysam-jeffrey Jan, I think it's better to use yarn and remove of the package-lock.json, what do you think?

[MortezaMirjavadi]

Using sub-components in large React components is a best practice that leads to:

• More readable code: Easier to understand and reason about.
• More maintainable code: Easier to change and debug.
• More reusable code: Components can be used in other parts of the application.
• Better organized code: Clear separation of concerns.
• Improved collaboration: Easier for teams to work together.
• Potential performance benefits: More efficient rendering.

@meysam-jeffrey

[MortezaMirjavadi]

@meysam-jeffrey Jan, my suggestion is to extract this implementation to another sub-component like this:

interface ChartSeriesProps {
  series: {
    name: string;
    data: { x: number; y: number }[];
    color: string;
  };
}

const ChartSeries: React.FC<ChartSeriesProps> = ({ series }) => {
  const lineStyle = {
    data: {
      stroke: series.color,
    },
  };

  return <ChartLine key={series.name} data={series.data} style={lineStyle} />;
};

and finally the usage of this component like this:

<ChartGroup>
            {chartData.map((series: any, index) => (
              <ChartSeries key={series.name} series={series} />
            ))}
</ChartGroup>

[MortezaMirjavadi]

@meysam-jeffrey Jan, there is no any dependency between props?

[MortezaMirjavadi]

You can remove this useEffect based on this description:
https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes

[MortezaMirjavadi]

My suggestion is to use Immerjs for better readability and writability.
https://immerjs.github.io/immer/

[MortezaMirjavadi]

It's better using ternary operator instead of and-sign.

[MortezaMirjavadi]

I think it's better to extract in a sub-component for better readability.

[MortezaMirjavadi]

I think it's better to move it to a sub-component for better readability.

[MortezaMirjavadi]

@meysam-jeffrey Jan, if you possible add rule in webpack config that we don't need import react each file.

add plugins in webpack

import { ProvidePlugin } from 'webpack';
...
 plugins: [
    new ProvidePlugin({
      React: 'react',
    }),
...

add these two lines in tsconfig:

 "jsx": "react-jsx",
    "jsxImportSource": "react"

and finally add this section to the eslint.yml:

plugins:
  - prettier
  - react
  - '@typescript-eslint'
rules:
  prettier/prettier:
    - error
  react/jsx-uses-react: 'off'
  react/jsx-uses-vars: 'warn'
  react/prop-types: 'off'
settings:
  react:
    version: detect

[MortezaMirjavadi]

Can we move it to a sub-component?