Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[#395] Fix some sonar cloud issues #452

Closed
wants to merge 11 commits into from
Closed

[#395] Fix some sonar cloud issues #452

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
22567e5
[#395] Fix some sonar cloud issues
panagiotisbellias Apr 15, 2024
758facb
[#395] Fix build issue
panagiotisbellias Apr 18, 2024
67133af
[#395] Fix build issue
panagiotisbellias Apr 18, 2024
886aa18
[#395] Fix build issue
panagiotisbellias Apr 18, 2024
88c7d9e
[#395] Fix more sonar issues
panagiotisbellias Apr 18, 2024
d2e9674
[#395] Remove useless vars
panagiotisbellias Apr 18, 2024
faa1803
Merge branch 'main' into issue-395-sonar-issues
May 5, 2024
f730b29
Merge branch 'main' into issue-395-sonar-issues
May 13, 2024
e33e668
[#395] Revert sonar issue fix
May 13, 2024
2a6e8dc
Merge branch 'main' into issue-395-sonar-issues
May 19, 2024
cc6a34a
[#395] Fix title
panagiotisbellias May 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@

<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#141414" />
<title></title>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@panagiotisbellias have you tested this code?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lifeparticle No, please confirm that I can run the application navigating to the ui directory and running npm install. Also, please provide the proper NodeJS version so I can test the code

Thanks,
Panagiotis

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@panagiotisbellias please follow the steps here, https://github.com/lifeparticle/binarytree/blob/main/ui/CONTRIBUTING.md

Thanks

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lifeparticle I'm on it, thanks

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lifeparticle I'm facing issues installing yarn. The v3.6.1 cannot be found either from Windows or WSL (Ubuntu 22.04)

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@panagiotisbellias make sure that you're inside the ui folder

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, now I did it with some warnings though. I see that the title is gone this way so i'm adding the correct title in the html element. This is good to be configurable though reading the title from the previous location

Copy link
Author

@panagiotisbellias panagiotisbellias Jun 16, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lifeparticle Hi, if more actions are needed by me please inform me or close this PR. Thanks

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@panagiotisbellias, please pull the latest from the main and review your changes. For example,

  • Does this file need any cleanup? ui/src/components/Layouts/PageGrid/PageGrid.tsx
  • Does the title change for every page? ui/index.html

Thanks

Copy link
Author

@panagiotisbellias panagiotisbellias Jun 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lifeparticle Latest changes generated merge confilcts with my side branch, so I'm closing this pull request and open a new one for the same issue when time

Thanks

</head>
<body>
<div id="root"></div>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/General/CodeEditor/CodeEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const CodeEditor: FC<CodeEditorProps> = ({
/>
</Form.Item>

<ValidateStatus status={status || ""} />
<ValidateStatus status={status ?? ""} />
</div>
);
};
Expand Down
10 changes: 8 additions & 2 deletions ui/src/components/Layouts/InputGrid/InputGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,19 @@ const InputGrid: FC<InputGridProps> = ({ children, className }) => {

return (
<Row gutter={[16, 0]} className={className}>
{childElements.map((child, index) => (
<Col key={index} xs={24} sm={24} md={24} lg={12}>
{childElements.map((child) => (
<Col key={getKey(child)} xs={24} sm={24} md={24} lg={12}>
{child}
</Col>
))}
</Row>
);
};

// Function to generate unique keys based on child content
const getKey = (child: React.ReactNode): string => {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@panagiotisbellias can you please share more about this approach. For example any articles, docs etc

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this project we don't write helper functions inside a component.

Copy link
Author

@panagiotisbellias panagiotisbellias May 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@panagiotisbellias can you please share more about this approach. For example any articles, docs etc

@lifeparticle To avoid using array indices as keys, I generated unique keys for each child element using a unique identifier associated with each child element. In the getKey function, I generated the key based on the content of each child element. This ensures that each child has a unique key without relying on array indices. Probably this needs testing too when above information is provided.

In this project we don't write helper functions inside a component.

I'm sorry, didn't notice. Please confirm that the correct location for the helper function (after testing it) should be ui/src/utils/helper-functions

Thanks,
Panagiotis

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@panagiotisbellias Thank you for the explanation. Can you please check the official doco here, https://react.dev/learn/rendering-lists

I'm not sure if this is the right approach to generate a key.

Please put it in the same directory ./helper.ts

Thanks

Copy link
Author

@panagiotisbellias panagiotisbellias May 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lifeparticle Indeed this is not the right approach to generate a key. This has to be done per case according to what attributes each list's object have like id, uuid etc. But here is very generic so I suggest to keep this sonar issue until a better solution comes out

// Example: Generate a unique key based on child content
return `${child}`;
};

export default InputGrid;
10 changes: 8 additions & 2 deletions ui/src/components/Layouts/PageGrid/PageGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,19 @@ const PageGrid: FC<PageGridProps> = ({ children, className }) => {

return (
<Row gutter={[16, 16]} className={className}>
{childElements.map((child, index) => (
<Col key={index} xs={24} sm={24} md={24} lg={12}>
{childElements.map((child) => (
<Col key={getKey(child)} xs={24} sm={24} md={24} lg={12}>
{child}
</Col>
))}
</Row>
);
};

// Function to generate unique keys based on child content
const getKey = (child: React.ReactNode): string => {
// Example: Generate a unique key based on child content
return `${child}`;
};

export default PageGrid;
2 changes: 1 addition & 1 deletion ui/src/pages/Colors/ColorPicker/ColorPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const ColorPicker: FC = () => {

const [colorPickerRan, setColorPickerRan] = useState(false);
const [formatState, setFormatState] = useState(
searchParams.get(PARAMS.color) || ""
searchParams.get(PARAMS.color) ?? ""
);
const color = String(searchParams.get(PARAMS.color));
const format = String(searchParams.get(PARAMS.format)) as FormatType;
Expand Down
2 changes: 1 addition & 1 deletion ui/src/pages/Colors/ShadesAndTints/components/Colors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const Colors: FC<ExtendedColorsProps> = ({ colors, isPending, type }) => {
<div className={styles.colors__list}>
{colors.map((color, index) => (
<Card
key={index}
key={color}
style={{
backgroundColor: color,
color: getTextColor(color),
Expand Down
10 changes: 5 additions & 5 deletions ui/src/pages/Converter/Base64/Base64.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const Base64: FC = () => {
},
async onChange(info) {
const { status, originFileObj, type } = info.file;
const text = (await originFileObj?.text()) || "";
const text = (await originFileObj?.text()) ?? "";
if (status === "done") {
if (type?.startsWith("image/")) {
handleImageUpload(
Expand Down Expand Up @@ -76,8 +76,8 @@ const Base64: FC = () => {
value={input}
language=" "
handleCode={(value) => {
setInput(value || "");
onClick("encode", value || "");
setInput(value ?? "");
onClick("encode", value ?? "");
}}
/>
<div className={style.base64__input}>
Expand All @@ -103,8 +103,8 @@ const Base64: FC = () => {
value={result}
language={" "}
handleCode={(value) => {
setResult(value || "");
onClick("decode", value || "");
setResult(value ?? "");
onClick("decode", value ?? "");
}}
/>
<div className={style.base64__output}>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const JsonToTypescript: FC = () => {
label="Enter Json input"
language="json"
value={json}
handleCode={(value) => setJson(value || "")}
handleCode={(value) => setJson(value ?? "")}
status={status}
/>

Expand Down
4 changes: 2 additions & 2 deletions ui/src/pages/Generator/Avatar/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ const Avatar = () => {
label="Font size"
placeholder="Enter font size"
value={fontSize}
onChange={(val) => setFontSize(val || 0)}
onChange={(val) => setFontSize(val ?? 0)}
type="number"
/>
</InputGrid>
Expand All @@ -111,7 +111,7 @@ const Avatar = () => {
label="Avatar size"
placeholder="Enter avatar size"
value={avatarSize}
onChange={(val) => setAvatarSize(val || 0)}
onChange={(val) => setAvatarSize(val ?? 0)}
type="number"
/>
<ResponsiveSegementWithLabel
Expand Down
4 changes: 2 additions & 2 deletions ui/src/pages/Generator/CSharpBuilder/CSharpBuilder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ const CSharpBuilde: FC = () => {
value={input}
language="csharp"
handleCode={(value) => {
setInput(value || "");
onClick(value || "");
setInput(value ?? "");
onClick(value ?? "");
}}
/>

Expand Down
8 changes: 2 additions & 6 deletions ui/src/pages/Generator/Data/Data.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,9 +170,7 @@ const DataGenerator: FC = () => {
style.dg__left__bottom__select
}
value={
dataTypes[k] === undefined
? ""
: dataTypes[k]
dataTypes[k] ?? ""
}
size="large"
options={[
Expand All @@ -199,9 +197,7 @@ const DataGenerator: FC = () => {
}
autoComplete="nope"
value={
colNames[k] === undefined
? ""
: colNames[k]
colNames[k] ?? ""
}
/>
))}
Expand Down
2 changes: 1 addition & 1 deletion ui/src/pages/Information/Mimetype/components/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const MimeSearch: FC = () => {
const { searchParams, updateParamsValue } = useParamsValue({});

const [queryParams, setQueryParams] = useState(
searchParams.get(PARAMS.type) || ""
searchParams.get(PARAMS.type) ?? ""
);

useEffect(() => {
Expand Down
2 changes: 1 addition & 1 deletion ui/src/pages/Markdown/Editor/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const MarkdownEditor: FC = () => {
>
<MDEditor
value={markdown}
onChange={(value) => setMarkdown(value || "")}
onChange={(value) => setMarkdown(value ?? "")}
height="100%"
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/pages/Markdown/TableGenerator/TableGenerator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const TableGenerator: FC = () => {
)}
<MDEditor
value={output}
onChange={(val) => setOutput(val || "")}
onChange={(val) => setOutput(val ?? "")}
height="100%"
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/pages/Tools/CodeFormatter/CodeFormatter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ const CodeFormatter: FC = () => {

<CodeEditor
value={inputCode}
handleCode={(value) => setInputCode(value || "")}
handleCode={(value) => setInputCode(value ?? "")}
language={inputType}
label="Enter code"
/>
Expand Down