Can we use excel functions in reactjs or jquery? - reactjs

I need to use all excel functions which return the calculation result. eg. "AverageIf","Decimal".Is there any API or something cdn file which returns all excel functions?
I will be very grateful if someone has information regarding this.

There is a NPM module called hot-formula-parser which may be the thing you're looking for.
Example:
import { Parser } from 'hot-formula-parser';
const parser = new Parser();
parser.parse('SUM(1, 6, 7)');
If you need a list of all formulas supported by the module you can just do:
import { SUPPORTED_FORMULAS } from 'hot-formula-parser';

Related

Importing JSON file - should not import the named export from default-exporting module

I have a sample JSON response from an API that is about 52,000 lines. I've saved it as TestJSONFile.json in my NextJS project.
This isn't permanent, but just a temporary measure so I can have access to a sample API response without needing to connect/implement the actual API calls at the moment.
The project is working fine and there are no crashes, but there is this warning message:
./src/components/CurrentComponent.js
Should not import the named export 'something' (imported as 'TestJSONFile') from default-exporting module (only default export is available soon)
printWarnings # hot-dev-client.js?a8a2:88
What can I do to get rid of this warning, just to make sure there are no issues later? I'm not entirely familiar with React so I'm not sure what the best way to handle this would be.
I don't need to call JSON.parse(), since once I manually added the sample response into my project (copy/paste the entire response), the data is already interpreted as a Javascript object and not a JSON string. I tried changing the filename from .json to .js to see if I could work with it that way without the warning, but the file had errors once I changed the extension.
TestJSONFile.json looks like:
{
"something": [
{
"prop1": "prop1value",
"prop2": "prop2value",
...
},
{
"prop1": "prop1value",
"prop2": "prop2value",
...
},
...
}
In CurrentComponent.js, I'm importing the JSON values:
import * as SampleResponse from '../tools/TestJSONFile'
And then accessing the data like this:
const data = SampleResponse.something // Already a JS object, no need to parse
And then can work with it like any other object:
for (let item of data) { const prop1 = item.prop1 }
Currently you are importing the JSON file as below
import * as SampleResponse from '../tools/TestJSONFile'
Change it to
import SampleResponse from '../tools/TestJSONFile'

React : webpack.config.js modification to import json variables in a sass file?

I am trying to import variables from .json file in a .scss file with node-sass-json-importer package.
I am facing a problem because this package is not automatically integrated in react-scripts/config/webpack.config.js. So, I would like to modify this file as follows below :
Add const jsonImporter = require ('node-sass-json-importer');
Add an optional preProcessorOptions object parameter to getStyleLoaders function. Indeed, this function has no preprocessor options const getStyleLoaders = (cssOptions, preProcessor) and the only option added by default is sourceMap: true. Of course, this function will take in account this new parameter.
Add a third parameter in the getStyleLoaders call for scss file.
{
implementation: require("sass"),
sassOptions: {
importer: jsonImporter(),
}
}
It works on a minimal webpack implementation (without react). But, I suppose it is not so easy to apply changes to react-scripts/config/webpack.config.js and I suspect I will have many problems. Perhaps, there is an another way to do it.
Thanks for answer.

How to get all files in a directory?

I have a number of files in a folder in React. Each of them must be self-initialized. For this, I need to import them. I wouldn’t want to import each file individually. I need to get a list of all the files. But we do not have access to FS on the client. I tried this https://github.com/diegohaz/list-react-files solution, but it does not work (it looks like it somehow uses fs, and gives an error). Can I solve my problem in a straightforward way? Can this be done using the web-pack? Any ideas guys?
Yes, we don't have fs on the client so we need to each file manually.
but there is an easy way of doing it.
Make a registry file where you put the path of file from registry.js relative
{
"file1": "/folder1/sda.png",
"file2": "/folder2/asd.png"
}
Now you don't need to import each file manually
import registry.json
import registry from registry.json
for x in registry {
try {
require(`path to registry/${registry[x]}`)
} catch (e) {
console.log(e)
}

How to efficiently organise firestore methods and connections

I'm current working with Firebase firestore and Next JS. I've googled how to organise a firestore project but most of them (all actually) aren't scalable.
What I have tried to do is to have a folder containing all the Firebase-related components such as configurations and utility methods. I found the most challenging part is to write a general-purpose function to get the collection/document ref that applies all the supported methods, namely .orderBy(), .limit(), .where() and .doc(). It's also really tough to write a transformer that transforms the data returned by the database to another format.
Here's what I have implemented:
Where getDocRef.js is a helper function that puts all those methods mentioned above together, getOnce.js and observe.js expose methods that interact with the database and db.js contains the configurations.
Also, for anyone who interested, here's my naive solution for the .getDocRef() function:
import db from '../db';
/*
Options:
- ref: Specify the ref of a document
- collectionName: Specify the collection name
- queryArgs: Specify the arguments to be passed down to .where()
- orderByArgs: Specify the arguments to be passed down to .orderBy()
- limit: Specify the fetching limit
- docName: Specify the document name/id
*/
export default options => {
const { ref, collectionName, queryArgs, orderByArgs, limit, docName } = options;
if (ref != null) return ref;
const initRef = db.collection(collectionName);
if (docName != null) return initRef.doc(docName);
if (queryArgs != null) {
if (orderByArgs != null) {
if (limit != null)
return initRef
.where(...queryArgs)
.orderBy(...orderByArgs)
.limit(limit);
return initRef.where(...queryArgs).orderBy(...orderByArgs);
}
return initRef.where(...queryArgs);
}
return initRef;
};
So, I would love to know if my current implementation of Firebase is okay. If not, what project structure should I apply? How should I improve my current structure to make it more efficiently? And last but not least is there an alternative to my naive JS solution posted above? Thanks in advance
My personal approach:
Extract all credentials to .env with dotenv package
A directory call /lib/db and two files here:
init.js to initialise the Firebase/firestore
Another class with some methods for CRUD
If your project is getting big, I suggest to extract every collection's related method to a file in /lib/db and organise them there(somehow like state managements).

test database for react-native app development

I'm in the early stages of developing an app with react-native, and I need a DB implementation for for testing and development. I thought that the obvious choice would be to use simple JSON files included with the source, but the only way I see to load JSON files requires that you know the file name ahead of time. This means that the following does not work:
getTable = (tableName) => require('./table-' + tableName + '.json') // ERROR!
I cannot find a simple way to load files at runtime.
What is the proper way to add test data to a react-native app?
I cannot find a simple way to load files at runtime.
In node you can use import() though I'm not sure if this is available in react-native. The syntax would be something like:
async function getTable(tableName){
const fileName = `./table-${tableName}.json`
try {
const file = await import(fileName)
} catch(err){
console.log(err
}
}
though like I said I do not know if this is available in react-natives javascript environment so ymmv
Unfortunately dynamic import not supported by react-native but there is a way so to do this
import tableName1 from './table/tableName1.json';
import tableName2 from './table/tableName2.json';
then create own object like
const tables = {
tableName1,
tableName2,
};
after that, you can access the table through bracket notation like
getTable = (tableName) => tables[tableName];

Resources