I'm using React with React Admin to populate my database in which I have 2 collections: products and stores
I need to link a store to the product, so normally I should do:
<ReferenceInput label="Store" source="storeId" reference="stores">
<SelectInput optionText="name" />
</ReferenceInput>
But this will generate this structure:
{
id: '...'
// other attributes
storeId: "choosed-store-id"
}
But the final result I need is something like this:
{
id: '...'
// other attributes
store: {
id: "choosed-store-id",
name: "choosed-store-name",
address: "choosed-store-address"
}
}
Related
I need to retrieve data from the server then I display this data in a table and if a user clicks on a button in the table he can download the file
Here is my data :
files = [ {name : "file1", created_at: "29/01/2021"},
{name : "file2", created_at: "20/03/2021"}]
table headers :
const tableColumns = [
{ title: "name", field: "name" },
{
title: "Date",
field: "created_at",
type: "date",
dateSetting: { locale: "en-GB" },
filterComponent: (props) => <CustomDatePicker {...props} />
}
];
My array :
{file && (
<Fragment>
<MaterialTable
columns={tableColumns}
data={file}
title="Material Table - Custom Filter Component"
options={{search: false, filtering: true }}
actions={[
{
icon: 'save',
tooltip: 'Save User',
onClick: () => window.open('http://localhost:5000/files/' + file.name, '_blank').focus()
}
]}
/>
</Fragment>)}
I get the error: ENOENT: no such file or directory, stat '/Users/admin//files/undefined'"}
how can i use in react js the link of each file, i tried to use the map function on my data but it doesn't work
Even it works on your computer, the code won't work in a public server. because no one knows what is http://localhost:5000.
In order to get that line working, you need to find a resources that can be reached in your browser, ex. google.com
And then give it a shot and see if you still run into that error.
NOTE: client app such as a website can't work with a physical file in your computer. That is not allowed, but once you publish to the web, it becomes another URL which could store a file.
I am attempting to use react-semantic-redux-form SelectField with the multiple options so a user can select multiple options and if there is one already set then this should show as checked.
I am also using redux-form with semantic0ui-react.
I am getting an error attempting to include multiple selections.
My include statement is:
import { SelectField } from "react-semantic-redux-form";
My state is:
state = {
relationships: ["some entry"],
relationshipOptions: [],
};
The element code is:
<Grid.Column>
<Field
component={SelectField}
name="relationships"
label="Your Relationships"
options={relationshipOptions}
multiple
placeholder="Select to add a relationship"
/>
I get the error as below
Dropdown `value` must be an array when `multiple` is set. Received type: `[object String]`.
in Dropdown
The way you have relationshipOptions is wrong, it is supposed array of objects,
const relationshipOptions = [
{ key: "single", value: "single", text: "single" },
{ key: "married", value: "married", text: "married" }
];
Here is the working example, Code Sandbox
Also if you have single, married in array. You can do something like this,
let relationshipOptions = ["single", "married"].map((x) => {
return ({
key: x,
value: x,
text: x
});
});
I followed this video on the best practices for creating flat databases with firestore: Converting SQL structures to Firebase structures
I came up with something that looks like this:
const firestore = {
events: {
eventID: { // Doc
description: "Event Description", // Field
title: "Event Title", // Field
}
},
eventComments: { // Collection
eventID: { // Doc
comments: { // Field
commentID1: true, // Value
commentID2: true, // Value
commentID3: true, // Value
}
}
},
comments: { // Collection
commentID1: { // Doc
createdAt: "Timestamp", // Field
createdBy: "uid", // Field
content: "Comment Body" // Field
},
commentID2: {...},
commentID3: {...},
},
};
I'm not sure what the best way to get the related data is however
I'm using react and react-redux-firestore to access the data. My current setup for the app looks like this
<EventsDetailPage>
<Comments>
<Comment />
<Comment />
<Comment />
</Comments>
</EventsDetailPage>
I've come up with two potential methods...
Method 1
I have useFirestoreConnect in each component. The top level gets the event and passes the eventID to the comments component, the comments component uses the eventID to get the eventComments list which passes the individual commentID for each comment to the comment component, then finally the individual comment component uses the commentID to get the relevant comment data.
My issue with this: Wouldn't this mean that there is a listener for the event, comment list, and every individual comment? Is that frowned upon?
EX: This would be in the event, the comments, and comment component but each with respective values
useFirestoreConnect(() => [
{collection: 'events', doc: eventID},
]);
const event = useSelector(({firestore: {data}}) => data.events && data.events[eventID]);
Method 2
Let's say I have a list of events, I can do a query to get the lists
useFirestoreConnect(() => [{
collection: 'events',
orderBy: ["createdAt", "desc"],
limitTo: 10
}]);
const events = useSelector(({ firestore: { ordered } }) => ordered.events);
This is great because I believe it's one listener but if any of the data is changed in any of the events the listener will still respond to the changes.
My issue with this: I don't know how to do a where clause that would return all events for a given list of IDs.
So like say if I wanted to get a list of events with where: ['id', '==', ['eventID1', 'eventID2', 'eventID3']]
To retrieve up to 10 items by their ID, you can use an in query:
.where('id', 'in', ['eventID1', 'eventID2', 'eventID3'])
If you have more than 10 IDs, you'll have to run multiple of these queries.
In react-admin documentation the use of ReferenceArrayInput is for this kind of data structure:
{
id: 1,
groups: [1, 2, 3]
}
And then:
<ReferenceArrayInput source="groups" reference="groups" allowEmpty>
<SelectArrayInput optionText="name"/>
</ReferenceArrayInput>
Using a custom json data provider, it will be make this request:
https://example.com/api/groups/?ids=[1,2,3]
or if the API doesn't support WHERE IN, it will be do individual calls for each id:
https://example.com/api/groups/1
https://example.com/api/groups/2
https://example.com/api/groups/3
But if I have the following data structure:
{
id: 1,
name: "Pepito Perez",
groups: [
{ id: 1, name: "HR"},
{ id: 2, name: "IT"},
{ id: 3, name: "FINANCE"}
]
}
I have the name field already, so I don't want make additional requests.
When I go to the edit view react-admin performs almost 70 requests unnecessary.
How can I avoid that? there's a way to reuse the data?
Also is tricky use ReferenceArrayInput component with an array of objects, I have to add a nonsense format prop to make it works: format={v => (v ? v.map(i => (i.id ? i.id : i)) : [])}
Guess it's related to the first problem.
Thanks in advance!
If the choices is not meant to be fetched, ReferenceInput is not what you want. You need only a SelectInput with programmatic setted choices. You can achieve that with FormDataConsumer:
<FormDataConsumer>
{({ formData, ...rest }) =>
<SelectArrayInput
source="selectedGroups"
optionText="name"
choices={formData.groups}
{...rest}
/>
}
</FormDataConsumer>
Note a different source, probably setting as groups, equal to choices "source", after first selected group, would result in a re-render, letting choices values equal to the single selected group.
That's almost exactly the use case of FormDataConsumer in documentation:
https://marmelab.com/react-admin/Inputs.html#linking-two-inputs
I was able to do the following using kendo-ui-recat-wrapper to get a grouped Grid :
let dataSource = {
data: data,
schema: {
model: {
id: 'id',
expanded: true
}
},
group: [
{
field: 'title', // GroupBy goes on this field
dir: 'asc'
} ] }
And Then I can pass this to the dataSource props of Grid.
I updated to kendo-react-grid it seems more coherent to use in a ReactJs project than the jquery wrapper.
But I didn't find how to get the same result ? There is no mention to the group option. Even here in DataState (link here) I didn't get how to use it ?!
EDIT : The option is not ready yet (Kendo ui React roadmap)
Currently, the native Kendo React Grid supports grouping. The syntax is different than as per the jquery wrapper (i.e. there is no dataSource prop) but I believe this is expected. Here is a simplified version of the official grouping example:
import { Grid, GridColumn as Column } from '#progress/kendo-react-grid';
import { groupBy } from '#progress/kendo-data-query';
import products from './products.json';
class App extends React.PureComponent {
render() {
return (
<Grid
groupable={true}
group={[ { field: 'UnitsInStock' } ]}
data={groupBy(products, [ { field: 'UnitsInStock' } ])}
>
<Column field="ProductID" title="ID" width="50px" />
<Column field="ProductName" title="Product Name" />
<Column field="UnitsInStock" title="Units In Stock" />
</Grid>
);
}
}