refactor: convert HTML to JSX Components

[akhileshthite]

TODOs:

• Convert file.html and folder.html into two separate JSX components, File.jsx and Folder.jsx.
• Ensure that the class attributes are replaced with className for JSX compatibility.
• Include the necessary imports and adjust the component structure to fit into the React ecosystem.
• Instead of directly embedding SVG code or linking externally in the HTML/JSX, load SVG assets locally.
• Update Index.jsx, popup.jsx (handleContinueWithSavedSpace function and handleContinueWithSavedSpace button) and webpack.config.js accordingly.

Expected Outcome:

• The application successfully refactors file.html and folder.html into JSX components.
• SVG assets are loaded locally, improving the maintainability.
  • Please use the SVG files in assets directory.
• The webpack configuration file is updated to support these changes without affecting the current functionality.

[UmaySoyluer]

Hi! I examined the html files that need to be converted and saw that inline CSS was written in a few places. How would you like this CSS to be used in the newly created jsx files?

[akhileshthite]

Hi! I examined the html files that need to be converted and saw that inline CSS was written in a few places. How would you like this CSS to be used in the newly created jsx files?

Hi @UmaySoyluer,
Please keep it inline using style={{}}; there's no need to put that in CSS files.

If you're interested in working on this, let me know, I can assign it to you.
Also, I've just created PR #54 for v4.0, so please make sure you're in sync with that and set the base of your branch to w3up-client.

[UmaySoyluer]

Thanks for pointing that out. I'm interested in working on this , so please go ahead and assign it to me. I'll make sure to sync my branch with PR 54 for v4.0 and set the base to w3up-client.

[akhileshthite]

Thanks for pointing that out. I'm interested in working on this , so please go ahead and assign it to me. I'll make sure to sync my branch with PR 54 for v4.0 and set the base to w3up-client.

Assigned

[akhileshthite]

TODOs:

• Convert file.html and folder.html into two separate JSX components, File.jsx and Folder.jsx.
• Ensure that the class attributes are replaced with className for JSX compatibility.
• Include the necessary imports and adjust the component structure to fit into the React ecosystem.
• Instead of directly embedding SVG code or linking externally in the HTML/JSX, load SVG assets locally.
• Update Index.jsx, popup.jsx (handleContinueWithSavedSpace function) and webpack.config.js accordingly.

Expected Outcome:

• The application successfully refactors file.html and folder.html into JSX components.

• SVG assets are loaded locally, improving the maintainability.

  • Please use these SVG files: dscan-svg.zip

• The webpack configuration file is updated to support these changes without affecting the current functionality.

@UmaySoyluer btw, I've added the SVGs in ./src/assets dir in w3up-client branch.

[UmaySoyluer]

TODOs:

• Convert file.html and folder.html into two separate JSX components, File.jsx and Folder.jsx.
• Ensure that the class attributes are replaced with className for JSX compatibility.
• Include the necessary imports and adjust the component structure to fit into the React ecosystem.
• Instead of directly embedding SVG code or linking externally in the HTML/JSX, load SVG assets locally.
• Update Index.jsx, popup.jsx (handleContinueWithSavedSpace function) and webpack.config.js accordingly.

Expected Outcome:

• The application successfully refactors file.html and folder.html into JSX components.

• SVG assets are loaded locally, improving the maintainability.

  • Please use these SVG files: dscan-svg.zip

• The webpack configuration file is updated to support these changes without affecting the current functionality.

@UmaySoyluer btw, I've added the SVGs in ./src/assets dir in w3up-client branch.

yes, i used the SVGs in that folder. Since the logo were available as PNG i used it that way.

[akhileshthite]

TODOs:

• Convert file.html and folder.html into two separate JSX components, File.jsx and Folder.jsx.
• Ensure that the class attributes are replaced with className for JSX compatibility.
• Include the necessary imports and adjust the component structure to fit into the React ecosystem.
• Instead of directly embedding SVG code or linking externally in the HTML/JSX, load SVG assets locally.
• Update Index.jsx, popup.jsx (handleContinueWithSavedSpace function) and webpack.config.js accordingly.

Expected Outcome:

• The application successfully refactors file.html and folder.html into JSX components.

• SVG assets are loaded locally, improving the maintainability.

  • Please use these SVG files: dscan-svg.zip

• The webpack configuration file is updated to support these changes without affecting the current functionality.

@UmaySoyluer btw, I've added the SVGs in ./src/assets dir in w3up-client branch.

yes, i used the SVGs in that folder. Since the logo were available as PNG i used it that way.

Thanks, I am planning to release version 4.0 on Saturday. If you require more time, please feel free to do so. In that case, you may set the main as your base branch.

[UmaySoyluer]

TODOs:

• Convert file.html and folder.html into two separate JSX components, File.jsx and Folder.jsx.
• Ensure that the class attributes are replaced with className for JSX compatibility.
• Include the necessary imports and adjust the component structure to fit into the React ecosystem.
• Instead of directly embedding SVG code or linking externally in the HTML/JSX, load SVG assets locally.
• Update Index.jsx, popup.jsx (handleContinueWithSavedSpace function) and webpack.config.js accordingly.

Expected Outcome:

• The application successfully refactors file.html and folder.html into JSX components.

• SVG assets are loaded locally, improving the maintainability.

  • Please use these SVG files: dscan-svg.zip

• The webpack configuration file is updated to support these changes without affecting the current functionality.

@UmaySoyluer btw, I've added the SVGs in ./src/assets dir in w3up-client branch.

yes, i used the SVGs in that folder. Since the logo were available as PNG i used it that way.

Thanks, I am planning to release version 4.0 on Saturday. If you require more time, please feel free to do so. In that case, you may set the main as your base branch.

Actually, only the last step, the handleContinueWithSavedSpace function update and webpack configuration, remains. Let me push the changes I made and continue working on the config until release.

[UmaySoyluer]

can you please give me write permission so i can push refactor changes?

[akhileshthite]

can you please give me write permission so i can push refactor changes?

Pull Request would work, no need for write access.

[UmaySoyluer]

can you please give me write permission so i can push refactor changes?

Pull Request would work, no need for write access.

I couldn't push because permission is denied , so i can't create a PR.

[akhileshthite]

can you please give me write permission so i can push refactor changes?

Pull Request would work, no need for write access.

I couldn't push because permission is denied , so i can't create a PR.

Looks like you're new to open-source.
Here, check this tutorial:
https://youtu.be/8A4TsoXJOs8?feature=shared

[UmaySoyluer]

can you please give me write permission so i can push refactor changes?

Pull Request would work, no need for write access.

I couldn't push because permission is denied , so i can't create a PR.

Looks like you're new to open-source. Here, check this tutorial: https://youtu.be/8A4TsoXJOs8?feature=shared

can you please give me write permission so i can push refactor changes?

Pull Request would work, no need for write access.

I couldn't push because permission is denied , so i can't create a PR.

Looks like you're new to open-source. Here, check this tutorial: https://youtu.be/8A4TsoXJOs8?feature=shared

Yes, I'm relatively new to open source. Initially, when I forked the repository, there were no w3up-client branch which i should use as a base. Therefore, I cloned directly from the original repository, which resulted in a permission issue. Sorry for the inconvenience.