search

p2plabsxyz / dscan

A decentralized storage and file-sharing tool that uploads content to IPFS and generates decentralized QR codes.
https://chromewebstore.google.com/detail/dscan-own-your-identity-o/idpfgkgogjjgklefnkjdpghkifbjenap
MIT License
36 stars 26 forks source link

refactor: convert HTML to JSX Components #51

Open akhileshthite opened 7 months ago

akhileshthite commented 7 months ago

TODOs:

Expected Outcome:

UmaySoyluer commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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.

  • 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 commented 7 months ago

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.

  • 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 commented 7 months ago

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.

  • 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 commented 7 months ago

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.

  • 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 commented 7 months ago

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

akhileshthite commented 7 months ago

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

Pull Request would work, no need for write access.

UmaySoyluer commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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.