first commit - a lot works but a little sucks #1
Conversation
| fetch('https://script.google.com/macros/s/AKfycbxJPjCcowBQS124lLZfmw1ItprLtxNx7MiAmTgsdcp_dpTazJJVM7zEOrM_KHPSoib4/exec', { | ||
| method: 'GET', | ||
| mode: 'cors' | ||
| }).then(res => res.json()).then((data) => { | ||
| console.log(data) | ||
| symbolData = data | ||
| }) |
There was a problem hiding this comment.
why not store it in user's local storage, rather refetching in background every time, if there is update we can update it
There was a problem hiding this comment.
yes, i had the idea,
just wanted the base logic to work as of now
There was a problem hiding this comment.
rather than using raw localstorage use something like dexie-db. Your life will be much easier.
|
|
||
| console.log('This is the background page.'); | ||
|
|
||
| console.log('Put the background scripts here.'); | ||
|
|
||
| console.log('new line by hamza'); | ||
|
|
||
| //fetch('http://localhost:5000').then((res) => res.json()).then((res) => { console.log(JSON.stringify(res)) }) |
There was a problem hiding this comment.
lots of console log, remove them, not good in production
src/pages/Background/index.js
Outdated
|
|
||
| function func(clickedSymbol) { | ||
|
|
||
| if (!symbolData) return; | ||
|
|
||
| const nearbyIndexes = symbolData.map((i) => { | ||
| const arrayOfSimilarSymbols = i.split(",") | ||
| const nearbyIndex = distance(clickedSymbol, closest(clickedSymbol, arrayOfSimilarSymbols.map((i) => { | ||
| [...Array(25 - i.length).keys()].forEach(() => i += '*') | ||
| return i |
There was a problem hiding this comment.
really bad name for function func, give it something meaningful, that is easy to understand by you after 1 month, cause you will forget what this code does
| const nearbyIndexes = symbolData.map((i) => { | ||
| const arrayOfSimilarSymbols = i.split(",") | ||
| const nearbyIndex = distance(clickedSymbol, closest(clickedSymbol, arrayOfSimilarSymbols.map((i) => { | ||
| [...Array(25 - i.length).keys()].forEach(() => i += '*') |
There was a problem hiding this comment.
have you thought what would happen if index goes in negative, Array(-12) ?
try it in your browser's console
There was a problem hiding this comment.
as of now, i have assumed the maximum symbol size to be 25 characters, so..
|
|
||
| nearbyIndexes.forEach((i, n) => { | ||
| if (i == "") return | ||
| nearbyIndexesObjs[n] = { [symbolData[n]]: i } | ||
| }) | ||
|
|
||
|
|
||
| console.log(clickedSymbol) | ||
| nearbyIndexesObjs.sort((a, b) => Object.values(a)[0] - Object.values(b)[0]) | ||
| console.log(nearbyIndexesObjs[0], nearbyIndexesObjs[1], nearbyIndexesObjs[2], nearbyIndexesObjs[3], nearbyIndexesObjs[4]) | ||
|
|
||
|
|
||
| } | ||
|
|
There was a problem hiding this comment.
add comment for better readability of the code and it's logic
src/pages/Content/index.js
Outdated
| const clickedSymbol = anchor.textContent.toLocaleLowerCase().replace(/[ .]/g, "") | ||
|
|
||
| chrome.runtime.sendMessage({ msg: clickedSymbol }, () => { |
There was a problem hiding this comment.
there is possibility of anchor being undefined which can lead to error "cannot read properties of undefined(reading textContent)"
There was a problem hiding this comment.
anchor tag being undefined : i think it has been already handled at beginning of the function by that if condition
| @@ -40,7 +40,7 @@ const SnippetList = () => { | |||
| return ( | |||
| <div className={`w-full h-full font-sans ${isDarkMode ? 'bg-gray-900' : 'bg-gray-100'} flex flex-col`}> | |||
| <div className="flex justify-between items-center p-4"> | |||
| <h1 className={`text-xl font-semibold ${isDarkMode ? 'text-gray-200' : 'text-gray-800'}`}>Snippets</h1> | |||
| <h1 className={`text-xl font-semibold ${isDarkMode ? 'text-gray-200' : 'text-gray-800'}`}>these are Snippets</h1> | |||
There was a problem hiding this comment.
use capital case if needed
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1>custom options page</h1> |
There was a problem hiding this comment.
i didn't get the utility of this folder cause your server.js file is at the root level
There was a problem hiding this comment.
it was only for experimenting with the DOM selectors and just to see if everything works fine while injecting the script on a similarly structured HTML page,
i'll put it inside gitIgnore, doesn't need to be pushed along ig
There was a problem hiding this comment.
levenstein distance is some ways (not-exactly) non-determenistic... what happens when 2 symbols match to this... we will mostly need exact match... but we can start with this for now & make it better later...
| onClickHandler(message.msg) | ||
| }) | ||
|
|
||
| function onClickHandler(clickedSymbol) { |
There was a problem hiding this comment.
what onclick handler? needs to be more verbose on what this function is doing... could be onSymbolClick
| fetch('https://script.google.com/macros/s/AKfycbxJPjCcowBQS124lLZfmw1ItprLtxNx7MiAmTgsdcp_dpTazJJVM7zEOrM_KHPSoib4/exec', { | ||
| method: 'GET', | ||
| mode: 'cors' | ||
| }).then(res => res.json()).then((data) => { | ||
| console.log(data) | ||
| symbolData = data | ||
| }) |
There was a problem hiding this comment.
rather than using raw localstorage use something like dexie-db. Your life will be much easier.
main things i've used till now..
Not completed 100% yet, just a few things to get around with.