I have a react application that allows our users to input data into the Editor component provided by draft-js. I made my own toolbar component our user could interact with by passing functions that update the EditorState. I also need to be able to save the EditorState contents to our database. We're able to save the database by using the ff code:
const serialized = JSON.stringify(
convertToRaw(editorState.getCurrentContent())
);
saveStringToDatabase(serialized);
and are able to restore the values from the database using
const [editorState, setEditorState] = useState(() => {
if (!serializedEditorState) {
return EditorState.createEmpty();
}
const contentState = convertFromRaw(JSON.parse(serializedEditorState));
return EditorState.createWithContent(contentState);
});
. All is good in the user interacting with the Editor component from the front-end.
Now the problem is when I try to restore the data saved in the database to the front-end, I get a wrong snapshot of the state editor. I'm suspecting it's because the result of the convertToRaw() function has the wrong order for blocks[index].inlineStyleRanges. In my attached screenshot, index 3 of inlineStyleRanges of the blocks object should be index 4 and index 4 should be in index 3. I think I might be using the wrong functions for updating the EditorState but can't confirm as I do not see any other resources describing the actual correct way to update EditorState. We update the editor state using the ff code:
const removedInlineStyle = Modifier.removeInlineStyle(
editorState.getCurrentContent(),
newSelection,
inlineStyle,
);
const newInlineStyle = Modifier.applyInlineStyle(
removedInlineStyle,
newSelection,
inlineStyle,
);
const newEditorState = EditorState.push(
EditorState.acceptSelection(editorState, newSelection),
newInlineStyle,
'change-inline-style',
);
setEditorState(newEditorState);
here is a github issue of someone else that's experiencing something like mine. enter image description here
Related
I am working on a nextjs/typescript project that helps users to create a list of items they want to purchase.
When a user has purchased an items, they come to the application and tick that it has been purchased. Whenever this happens, I have to update the cart on my database (firestore)
The problem is that the code I use to update the database gives me the following error on the browser:
picture of error on browser
Below is my code when the user clicks on the item.
async function toggleItemIsCompletedState() {
dispatch(
cartActions.toggleIsCompletedState({
itemId,
categoryName: props.category,
})
);
// update cart in firebase
// ================================================
// For some reason I am not able to get the updated data to push to firestore so I am going to duplicate
// the code for updating the redux-store here so I can get updated data before pushing it.
const updatedItems = toggleItemIsCompletedStateUtil(
items,
props.category,
itemId
);
if (updatedItems === false) return;
console.log(updatedItems);
const cartData: CurrentCartUploadType = {
cartTitle,
items: updatedItems,
totalQuantity,
cartState,
isEditingCart,
};
// console.log("CartData: ", cartData);
const response = await updateCart(cartData);
console.log(response);
// ================================================
}
I viewed the docs and the solution was to use Effect but there are so many dependencies that the program would always keep re-rendering besides I tried using useEffect() but I kept getting the same error.
You can find my code on GitHub: https://github.com/almamarie/shoppingify-frontend in the backend-integration branch.
The target file is components/cart/completing-state/CompletingCarItem.tsx
Is there any way to export Algolia's React Instant Search results to a CSV? I've tried using the react-csv package, but it doesn't work with Algolia's Hit Component. The package requires data as props, but the data is constantly changing since it's React Instant Search.
What I mean by constantly changing is that on page load, you're given the entire index of records found, then you can narrow down the results with the search bar or other filtering components.
I've gone down the Google rabbit hole looking for information about exporting Algolia's search results as a CSV, but I haven't found anything regarding React Instant Search—unless I completely missed it.
Has anyone tried this before? If so, could you point me in the right direction regarding documentation or examples?
Not sure if this solves your problem but one possible way is to use the StateResults widget. The StateResults widget provides a way to access the searchState and the searchResults of InstantSearch.
Here I will create a custom StateResults component in the form of a download button and then connect it using the connectStateResults connector.
I have attached a demo below as well.
For simplicity I didn't format the data to be fed into the CSV builder.
// 1. Create a React component
const StateResults = () => {
// return the DOM output
};
// 2. Connect the component using the connector
const CustomStateResults = connectStateResults(StateResults);
// 3. Use your connected widget
<CustomStateResults />
In your case something like
const StateResults = ({ searchResults }) => {
const hits = searchResults?.hits;
return (
<div>
<button>{hits && <CSVLink data={hits}>Download CSV</CSVLink>}</button>
</div>
);
};
const DownloadButton = connectStateResults(StateResults);
//in your JSX then <DownloadButton />
I have no idea why I'm getting this error or from where is coming from because I think I'm not using that ?
I'm doing a firebase update after an user update a row from DataGrid MUI and I'm doing the update as I would normally do nothing different at all and it just jumps into that error.
I'm not sure if is an React error, JS error, Firebase error, MUI error. but I THINK is a firebase error because the path says so
This is what I was trying to do:
const [editRowsModel, setEditRowsModel] = React.useState({});
const [editRowData, setEditRowData] = React.useState({});
const handleEditRowsModelChange = React.useCallback(
(model) => {
const editedIds = Object.keys(model);
if (editedIds.length === 0) {
console.log(editRowData)
console.log(editRowData.uid)
console.log(editRowData.nombre)
console.log(editRowData.colegio)
console.log(editRowData.grado)
const temporalQuery = db.collection("usuarios").doc(user.uid).collection("estudiantes").doc(editRowData.uid);
temporalQuery.update({
nombre: editRowData.nombre,
colegio: editRowData.colegio,
grado: editRowData.grado
})
} else {
setEditRowData(model[editedIds[0]]);
}
setEditRowsModel(model);
},
[editRowData]
);
This is what the console.log shows up. I honestly don't see any error in the way I code it that's how I always do it, never had an issue before. First time I update from a nested collection though
This is how it looks in the firebase
And yes the user.uid also comes correctly
Found the issue is because the data comes with a whole string of information instead of just the value as I though it was coming.
All I had to do was to call the field + the value when I was using it.
Ej:
if I wanted the uid I had to call it editRowData.uid.value
the .doc(name) only accepts strings, so check if your user.uid is a string
I am working on a simple node/react application that allows for the the request of data using the url parameter in GeoJSONLayer. The way that I set up the api I need to be able to change the url to get a new set of data. I have set up a useEffect() to load the map that has all of the map elements and have told it to listen for changes on the treeURL.
const [treeURL, setTreeURL] = TreeURL();
useEffect(async()=>{
loadMap(treeURL)
},[treeURL]);
The TreeURL function is just a simple useState() to default to getAll which is the default way of getting all of the data back. This part is working fine the map renders with the data that is fetched.
const TreeURL = () => {
const getAll = 'getAll'
const [treeURL, setTreeUrl] = useState(getAll)
return [treeURL, setTreeUrl]
}
When I go to update the data using the setTreeURL() the function runs. treeURL prints out into the console, but useEffect() is not called and the map does not update.
props.list.forEach((item) => {
elements.push(
<li class="mr-3">
<button
key={item}
className="inline-block border border-blue-500 rounded py-1 px-3 bg-blue-500 text-white"
onClick={()=>{
setTreeURL(`getByParams?CONDITION=${item}`)
console.log(treeURL)
}
}>{item}
</button>
</li>)
})
How do I update GeoJSONLayer's URL once the map has been loaded?
While its a little difficult to answer the question without more context regarding what you'd like to achieve by updating the GeoJSON's URL, there are a couple ways I could see you accomplishing this based on how the URL is updated.
If you are trying to query the initial GeoJSON source by adding URL parameters, you might be able to use the customParameters property of a GeoJSON and use the refresh() property to fetch new data. You can check out an example of this in action provided by Esri here.
However, if you are look to load an entirely new GeoJSON, than you might have to resort to creating a new GeoJSON object with the specified URL. You can also accomplish this by reading in your GeoJSON as a blob, as seen in this code snippet below and further explained in this ArcGIS blog article.
const blob = new Blob([JSON.stringify(geojson)], {type: "application/json"});
const url = URL.createObjectURL(blob);
const layer = new GeoJSONLayer({ url });
I was working on a electron-react project for epub file. Right now, I am planning to make the app capable of selecting text field and highlight it.
To achieve it, I was trying to use web's Window.getSelection api. However, there are some really weird things come up like in this.
In short, I am unable to capture the Selection object. It seems like even if I log the Selection object, this object could somehow jump to something else. Also, I cannot even serialize the Selection object with JSON.stringfy. This is super surprising, and this is my first time seeing something like this (I will get empty object to stringfy the Selection object).
So how to use Window.getSelection properly under react-electron environment? Or this api will not work well for text content which is generated by react's dangerouslySetInnerHTML?
Looks like the window.getSelection api needs to toString the selected object.
const getSelectionHandler = () => {
const selection = window.getSelection();
console.log("Got selection", selection.toString());
};
Super simple textarea and button to get selection react demo
this solution might help someone, catch last selection
const selection = useRef('');
const handleSelection = () => {
const text = document.getSelection().toString();
if (text) {
selection.current = text;
}
}
useEffect(() => {
document.addEventListener('selectionchange', handleSelection);
return () => {
document.removeEventListener('selectionchange', handleSelection);
};
});