Develop Reference

How to set custom id for firestore document in react-admin?

I have encountered a problem: How can I set the custom id for the document in the firestore database, as whenever I create a new user firestore is assigning it a random which I cannot figure out.
import * as React from "react";
import {
Datagrid,
List,
Show,
Create,
Edit,
Filter,
SimpleShowLayout,
SimpleForm,
TextField,
TextInput,
ShowButton,
EditButton,
DeleteButton,
} from "react-admin";
import {getAuth} from 'firebase/auth'
const UserFilter = (props) => (
<Filter {...props}>
<TextInput label="Search" source="id_number" alwaysOn />
</Filter>
);
export const UserList = (props) => (
<List {...props} filters={<UserFilter />}>
<Datagrid>
<TextField source="id_number" />
<TextField source="first_name" />
<TextField source="last_name" />
<TextField source="phone" />
<TextField source="user_type" />
<TextField source="email" />
<TextField source="is_active" />
<ShowButton label="" />
<EditButton label="" />
<DeleteButton label="" redirect={false}/>
</Datagrid>
</List>
);
export const UserShow = (props) => (
<Show {...props}>
<SimpleShowLayout>
<TextField source="id" />
<TextField source="first_name" />
<TextField source="user_type" />
<TextField source="email" />
</SimpleShowLayout>
</Show>
);
export const UserCreate = (props) => (
<Create {...props} >
<SimpleForm>
<TextInput source="id_number" />
<TextInput source="first_name" />
<TextInput source="last_name" />
<TextInput source="address" />
<TextInput source="is_active" />
<TextInput source="email" />
<TextInput source="phone" />
<TextInput source="dob" />
<TextInput source="user_type" />
</SimpleForm>
</Create>
);
export const UserEdit = (props) => (
<Edit {...props}>
<SimpleForm>
<TextInput disabled source="id_number" />
<TextInput source="createdate" />
<TextInput source="lastupdate" />
<TextInput source="first_name" />
<TextInput source="user_type" />
<TextInput source="email" />
</SimpleForm>
</Edit>
);
In the create form component how will I set the custom id for my documents?
Before Creating a user, As its prefilled
Firestore database before adding the user
After adding the user
Whenever I create a user, the user is created with a new unique id that is not accessible by us.
As you can in last a document with different is created

Open link when button is pressed

I have these buttons to which I would like to add link for redirect:
<Tooltip title="Open New Ticket">
<IconButton aria-label="filter list">
<AddTwoToneIcon />
</IconButton>
</Tooltip>
I added this:
<Tooltip title="Open New Ticket">
<Link to='open-ticket'>
<IconButton aria-label="filter list">
<AddTwoToneIcon />
</IconButton>
</Link>
</Tooltip>
But when I press the button I'm not redirected to a new page. This button for example is working fine:
<Link to='open-ticket'>
<Button
variant="contained"
color="primary"
size="small"
startIcon={<SaveIcon />}
>
Open Ticket
</Button>
</Link>
Do you know what is the proper way to implement this functionality?

Make sure you have installed react-router-dom. #material-ui/core/Link will not work.
Import BrowserRouter from react-router-dom and wrap your root component within.
import { BrowserRouter } from "react-router-dom"
import Root from "./views/Routes";
...
const App = props => {
return (
<BrowserRouter>
<Root />
</BrowserRouter>
);
}
In your Root component, specify the Routes with path and render component and wrap them inside Switch component. Switch enforces that only one of the Route children are matched. The URL is evaluated against Route components inside Switch and the first Route component whose path is a prefix-match of URL, is rendered. That is why you have to be careful of the order of Route components inside Switch
import { Fragment } from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import Main from "./Main";
import Home from "./Home";
import About from "./About";
import NotFound from "./404";
const Root = (props) => {
return (
<Fragment>
<Main />
<Switch>
<Route path="/about" render={(p) => <About {...p} />} />
<Route path="/404" render={(p) => <NotFound {...p} />} />
<Route path="/" render={(p) => <Home {...p} />} />
<Redirect to="/404" />
</Switch>
</Fragment>
);
};
export default Root;
Use Link from react-router-dom
import { Link } from "react-router-dom";
import { Tooltip, IconButton, Grid } from "#material-ui/core";
import { HomeTwoTone, InfoTwoTone } from "#material-ui/icons";
const Main = (props) => {
return (
<Grid container spacing={2} justifyContent="center">
<Grid item>
<Tooltip title="Home Page">
<Link to="/">
<IconButton aria-label="filter list">
<HomeTwoTone />
</IconButton>
</Link>
</Tooltip>
</Grid>
<Grid item>
<Tooltip title="About Page">
<Link to="/about">
<IconButton aria-label="filter list">
<InfoTwoTone />
</IconButton>
</Link>
</Tooltip>
</Grid>
</Grid>
);
};
export default Main;
Here is a working demo

Inside your button you can add:
onClick={event => window.location.href='/your-href'}

How to edit items inside en Array Input in React admin?

I have an object that contains objects and each of them has an array of items, I want to attach to each of them an edit button for viewing and deleting In React-admin, but something in my code fails and every time I press the buttons everything gets stuck, you can see in the pictures here:
Thanks!
when I press this buttons the web get stuck:
The buttons in the code:
The Edit part:
The data:
import React from "react";
import {
List,
Datagrid,
TextField,
EmailField,
EditButton,
DeleteButton,
Filter,
TextInput,
ReferenceInput,
SelectInput,
BulkDeleteWithConfirmButton,
DeleteWithConfirmButton,
ArrayField,
ImageField,
ShowButton,
RefreshButton,
CreateButton,
ExportButton,
NumberField,
} from "react-admin";
import { Fragment } from "react";
const UserBulkActionButtons = (props) => (
<Fragment>
<BulkDeleteWithConfirmButton {...props} />
</Fragment>
);
const ShopList = (props) => {
return (
<List
{...props}
filters={<ShopFilter />}
actions={<ProductActionsButtons />}
bulkActionButtons={<UserBulkActionButtons />}
style={{ width: "80%" }}
>
<Datagrid rowClick="show">
<NumberField source="id" />
<TextField source="title" />
<ArrayField source="items">
<Datagrid rowClick="edit">
{" "}
<TextField source="id" />
<TextField source="name" />
<TextField source="description" />
<ImageField source="imageUrl" />{" "}
<NumberField label="in Stock" source="amount" />
<NumberField source="price" />
<ShowButton label="" />
<EditButton />
<DeleteWithConfirmButton />
</Datagrid>
</ArrayField>
<CreateButton />
{/* <EditButton /> */}
</Datagrid>
</List>
);
};
const ShopFilter = (props) => (
<Filter {...props}>
<TextInput label="Search" source="q" alwaysOn />
{/* <ReferenceInput label="Title" source="userId" reference="users" allowEmpty>
<SelectInput optionText="name" />
</ReferenceInput> */}
</Filter>
);
const ProductActionsButtons = (props) => (
<div>
<RefreshButton {...props} />
<CreateButton {...props} />
<ExportButton {...props} />
</div>
);
export default ShopList;
import React from "react";
import {
Edit,
ImageField,
SimpleForm,
TextInput,
Datagrid,
ArrayField,
TextField,
ImageInput,
SimpleFormIterator,
ArrayInput,
Toolbar,
SaveButton,
DeleteWithConfirmButton,
NumberInput,
required,
} from "react-admin";
const ShopEdit = (props) => {
return (
<Edit {...props} title={<ShopTitle />} undoable={false}>
<SimpleForm toolbar={<ProductEditToolbar />}>
<TextInput disabled source="id" />
<TextInput label="Category" source="title" validate={[required()]} />
<ArrayInput source="items">
<SimpleFormIterator>
<TextInput
label="Product Name"
source="name"
validate={[required()]}
/>
<TextInput
label="Product Description"
source="description"
validate={[required()]}
/>
<ImageInput label="Product Image Url" source="imageUrl" />
{/* <TextInput label="Product Price" source="price" /> */}
<NumberInput min="0" step="1" label="in Stock" source="amount" />
<NumberInput
label="Product Price"
min="0.01"
step="0.01"
source="price"
validate={[required()]}
/>
</SimpleFormIterator>
</ArrayInput>
</SimpleForm>
</Edit>
);
};
const ShopTitle = ({ record }) => {
return <span>{record ? `Product "${record.name}"` : ""}</span>;
};
const ProductEditToolbar = (props) => (
<Toolbar {...props}>
<SaveButton />
<DeleteWithConfirmButton />
</Toolbar>
);
export default ShopEdit;

How to make Material-UI Dialog work in React

I am using material-UI for my project and I want to use Dialog but Dialog not working without any error. I am using react with material design. I try many things but still not working. I am using react with material design.i want to open form in Dialog.
App.tsx
import React from "react";
import logo from "./logo.svg";
import "./style.scss";
import {
Button,
FormControl,
TextField,
Grid,
Container
} from "#material-ui/core";
import CreateDialog from "./Components/UserLoginSignUp/Signup";
function App() {
return (
<Container>
<div className="App">
<CreateDialog />
sdfsdf
</div>
</Container>
);
}
export default App;
Signup.tsx
import React, { Fragment } from "react";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle
} from "#material-ui/core";
import { FormControl, TextField, Grid, Container } from "#material-ui/core";
import { Component } from "react";
export default class extends Component {
state = {
open: false
};
handleToggle = () => {
this.setState({
open: !this.state.open
});
};
render() {
const { open } = this.state;
return (
<Fragment>
<Button>add</Button>
<Dialog aria-labelledby="form-dialog-title" open={open}>
<DialogTitle id="form-dialog-title">Set backup account</DialogTitle>
<DialogContent>
<DialogContentText>form</DialogContentText>
<Grid container spacing={3}>
<Grid item xs={12} sm={6} id="content_side_userLS">
<Grid>
{" "}
<h1>Signup</h1>
<p>
Invest with next-generation wealth building & investment
platform.
</p>
</Grid>
</Grid>
<Grid item xs={12} sm={6}>
<form noValidate autoComplete="off">
<FormControl className="input_field" fullWidth>
<TextField id="standard-basic" label="Full Name" />
</FormControl>
<FormControl className="input_field" fullWidth>
<TextField
id="standard-basic"
label="Enter Email/Mobile Number"
/>
</FormControl>
<FormControl className="input_field" fullWidth>
{" "}
<TextField id="standard-basic" label="Password" />
</FormControl>
<FormControl className="input_field" fullWidth>
{" "}
<Button variant="contained" color="primary">
{" "}
CONTINUE{" "}
</Button>
</FormControl>
</form>
</Grid>
</Grid>
</DialogContent>
<DialogActions>
<Button>Subscribe</Button>
</DialogActions>
</Dialog>
</Fragment>
);
}
}

You didn't bind the handler function handleToggle to the button.
<Button onClick={this.handleToggle}>add</Button>
You need an onClose callback handler to close the dialog, and it seems you can share the same handler with onClick.
handler = () => {
this.setState({
open: !this.state.open
});
};
<Dialog
aria-labelledby="form-dialog-title"
open={open}
onClose={this.handler}
>
Try it online:

How to add cards in grid with ant design using react js

What is ant design?
A design system with values of Nature and Determinacy for better user experience of enterprise applications Read More >> https://ant.design/
A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes. if you need to add card in grid system try this
Here I'm using 3 Grid in row (you can change on your requirement).
CODE:
import React from 'react';
import { Card, Icon, Avatar } from 'antd';
const { Meta } = Card;
import { Row, Col } from 'antd';
class Surveys extends React.Component{
render() {
return (
<Row gutter={16}>
<Col className="gutter-row" span={8}>
<Card
cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
>
<Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title="Card title"
description="This is the description"
/>
</Card>
</Col>
<Col className="gutter-row" span={8}>
<Card
cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
>
<Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title="Card title"
description="This is the description"
/>
</Card>
</Col>
<Col className="gutter-row" span={8}>
<Card
cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
>
<Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title="Card title"
description="This is the description"
/>
</Card>
</Col>
</Row>
);
}
}
export default Surveys;
Output: