I have question and I'm sure it will help other developers.
I have field "is_active" which is Boolean in my API side but it return 0 or 1 and not TRUE or FALSE.
I want to use <FunctionField/> to wrap the <BooleanField/> but it didn't work. Someone can help please.
This is my code:
<FunctionField source="is_active" label="is_active" render={(record) => record.is_active ? true : false}>
<BooleanField/>
</FunctionField>
The column is still blank.
Thanks.
I think you misunderstood the FunctionField component. It renders the result of the render prop. What you are trying to achieve is:
<FunctionField source="is_active" label="is_active" render={(record,source) =>
<BooleanField record={{...record,is_active:!!record.is_active}} source={source}/>}/>
But this is not very nice. Better is to wrap your dataProvider/restClient and ensure the data is a boolean.
// In FixMyDataFeature.js
export default restClient => (type, resource, params) => restClient(type,resource,params).then(response=>
if(resource === 'Resource_with_numeric_is_active_field`){
return {
data: mutateIsActiveFieldToBoolean(response.data)
}
}
else{
return response;
}
);
And call it with Admin:
<Admin dataProvider={FixMyDataFeature(dataProvider)}... />
Here is my solution: (you can import it and use instead of BooleanField)
import React from 'react';
import { BooleanField } from "react-admin";
export const BooleanNumField = ({ record = {}, source}) => {
let theRecord = {...record};
theRecord[source + 'Num'] = !!parseInt(record[source]);
return <BooleanField record={theRecord} source={source + 'Num'} />
}
I had an issue where the in a DB table there was a field called disabled but in the Admin was a bit confusing setting disabled to false to actually enable something.
Based on 'Dennie de Lange' answer, I have created a Typescript generic BooleanOppositeField and BooleanOppositeInput. Putting here hoping may help someone:
import { BooleanField, BooleanInput, FunctionField } from 'react-admin';
interface IProps {
label: string;
source: string;
}
/**
* Usually called using:
* <BooleanOppositeField label="Enabled" source="disabled"/>
*/
export const BooleanOppositeField = (props: IProps) => {
return (
<FunctionField {...props} render={(record: any | undefined, source: string | undefined) =>
<BooleanField source="enabled" record={{ ...record, enabled: !(record![source!]) }} />}
/>
);
};
/**
* Usually called using:
* <BooleanOppositeInput label="Enabled" source="disabled" />
*/
export const BooleanOppositeInput = (props: IProps) => {
return (
<BooleanInput format={(v: boolean) => !v} parse={(v: boolean) => !v} {...props} />
)
}
And you can use it by:
<BooleanOppositeField label="Enabled" source="disabled"/>
or
<BooleanOppositeInput label="Enabled" source="disabled" />
Note: I liked more this solution, than the recommended by Dennie
Related
To create a site, I use nextjs, when creating pages, I took the general layout with the header and footer into a separate hoc component and wrapped the page components in the file with it _app.jsx:
function App({ Component, ...rest }) {
const { store, props } = wrapper.useWrappedStore(rest)
return (
<Provider store={store}>
<Layout>
<Component {...props.pageProps} />
</Layout>
</Provider>
)
}
Everything worked fine until localization became a problem, after using the next-18next library for translations and adding serverSideTranslations, two errors began to appear on each page:
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
frontend-node_1 | TypeError: Cannot read properties of undefined (reading 'label')
frontend-node_1 | at DropdownSwitcher (webpack-internal:///./src/components/header/translation/DropdownSwitcher.jsx:45:36)
frontend-node_1 | at renderWithHooks (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
frontend-node_1 | at renderIndeterminateComponent (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
frontend-node_1 | at renderElement (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
frontend-node_1 | at renderMemo (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5868:3)
frontend-node_1 | at renderElement (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6011:11)
frontend-node_1 | at renderNodeDestructiveImpl (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
frontend-node_1 | at renderNodeDestructive (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
frontend-node_1 | at renderNode (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
frontend-node_1 | at renderHostElement (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
The error with "label" occurs because the i18n object is empty on the server:
const DropdownSwitcher = () => {
const { i18n } = useTranslation()
const currentLanguage = useMemo(() => { // language as undefined
return LANGUAGES.find((item) => item.language === i18n.language)
}, [i18n.language])
....
But everything is fine on the client and there are no errors. What could be the reason and how to fix it, since the App itself from the _app.jsx file is wrapped in appWithTranslation from next-i18next.
Therefore, two questions arise, how to fix react-i18next:: You will need to pass in an i18next instance by using initReactI18next and why there is no i18n object on the server?
I moved the layout to the level of the page itself, removing it from _app.js, but for some reason, then something, useEffect() is repeated in the header, although the header component has not changed in any way and bringing the layout to the level of _app.jsx fixes it
If there is not enough information or you need a visual example, I will try to create a small program that demonstrates this with open source. Please write in a comment.
I solved my problem, but I forgot to provide an answer here, but I noticed that someone also has this problem, so I will try to help people who come across this post, although it is relevant only for nextjs version 12, since with the appearance of version 14, the structure there has improved a lot with as I think there should be no more questions like mine.
1. Rendering the layout
In the official doc, there is a whole section that describes how to correctly divide the layout so that it works according to the SPA type.
pages/index.jsx
// pages/index.jsx
import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'
export default function Page() {
return (
/** Your content */
)
}
Page.getLayout = function getLayout(page) {
return (
<Layout>
<NestedLayout>{page}</NestedLayout>
</Layout>
)
}
pages/_app.js
// pages/_app.js
export default function MyApp({ Component, pageProps }) {
// Use the layout defined at the page level, if available
const getLayout = Component.getLayout || ((page) => page)
return getLayout(<Component {...pageProps} />)
}
This component method approach is much better than using its direction in _app.jsx because you can extend or replace them and not make a crude monolith, example how I used it:
// pages/ingex.jsx
function HomePage() {
return (
<HomeLayout>
<Main />
</HomeLayout>
)
}
HomePage.getLayout = (page) => <MainLayout>{page}</MainLayout>
// pages/about-us.jsx
const AboutUsPage = () => {
return (
<>
<HomeLayout>
<AboutUs />
</HomeLayout>
</>
)
}
AboutUsPage.getLayout = (page) => (
<MainLayout withNav>
<LayoutContext.Consumer>
{({ device }) => device.isMobile && <NavigationMobile />}
</LayoutContext.Consumer>
{page}
</MainLayout>
)
With this approach, react still works like a spa and a similar page to about-us, which will also have NavigationMobile, will simply compare it.
2. Error with next-i18next
The whole point was that the next-i18next library was configured incorrectly in the first place (more precisely, it needed to be corrected). In order to configure everything correctly, I had to do the following:
- Move the folder with translation files to the public folder. This is necessary so that the library config, which we will configure a little below, can see the translation files and interact with them
- Configure next-i18next.config.js to work with the client. Here is an example setup with some comments. And also a link to the documentation, and some other resources I found while setting up.
next-i18next.config.js
const path = require('path')
const LANGUAGES = ['en', 'pl', 'uk']
const DEFAULT_LANGUAGE = 'en'
// if it is the server, then the full path, if the client, then the relative path.
const localePath =
typeof window === 'undefined' ? path.resolve('public', 'translation') : '/public/translation'
module.exports = {
i18n: {
defaultLocale: DEFAULT_LANGUAGE,
locales: LANGUAGES,
fallbackLng: LANGUAGES,
nsSeparator: '::',
keySeparator: '::',
// How to use libraries for i18next like LanguageDetector
use: [require('i18next-intervalplural-postprocessor')],
serializeConfig: false,
},
localePath: localePath,
}
- Configure next-i18next in the _app.jsx file. Here everything is as described in the documentation.
import { appWithTranslation } from 'next-i18next'
import nextI18NextConfig from '../../next-i18next.config'
function App({ Component, ...rest }) {
const { store, props } = wrapper.useWrappedStore(rest)
const getLayout = Component.getLayout || ((page) => page)
//WARNING!!! You don't have to have your own i18next initialization like i18next.use(LanguageDetector).use(intervalPlural).init({ detection: options }) this is all done by the next-i18next library
return (
<Provider store={store}>
<AppHOC>{getLayout(<Component {...props.pageProps} />)}</AppHOC>
</Provider>
)
}
export default appWithTranslation(App, nextI18NextConfig)
- You need to pass the config when calling the serverSideTranslations function. To make your life easier, it is better to transfer the implementation of this function to another file, here is an example of how I did it:
// utils/serverSideTranslations.js
import { serverSideTranslations as baseServerSideTranslations } from 'next-i18next/serverSideTranslations'
import { dt } from '../../constants/defaultTranslate'
import { DEFAULT_LANGUAGE } from '../../constants/languages'
import nextI18NextConfig from '../../../next-i18next.config.js'
const serverSideTranslations = async (locale, domains = []) => {
return await baseServerSideTranslations(locale, [...dt, ...domains], nextI18NextConfig, [
DEFAULT_LANGUAGE,
])
}
export default serverSideTranslations
- And finally, use this function on the pages.
import MainLayout from '../components/layouts/MainLayout'
import serverSideTranslations from '../utils/serverSideTranslations'
import HomeLayout from '../components/home/HomeLayout'
import Main from '../components/home/main/Main'
function HomePage() {
return (
<HomeLayout>
<Main />
</HomeLayout>
)
}
HomePage.getLayout = (page) => <MainLayout>{page}</MainLayout>
export const getServerSideProps = async ({ locale }) => {
// Wrapping in Promis.all is not necessary, I use it simply so that if there are any other asynchronous operations, then not to use them through await and not to block each other's work
const [translations] = await Promise.all([
serverSideTranslations(locale, ['home']),
])
return {
props: {
...translations,
},
}
}
export default HomePage
I hope this helped someone, if you have any comments, write in the comments
I am trying to navigate to a nested stack, when I use navigation.push(AppRoutes.RescueMeLanding.Name) I get the error:
Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'RescueMeStackScreen'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.
Any ideas?
const AppRoutes = {
....
RescueMeLanding: {
Name: 'RescueMeStackScreen',
Label: 'Rescue Me',
isProtected: true,
},
....
};
RescueMeStackScreen:
const RescueMeStackScreen = () => {
return (
<RescueMeStack.Navigator
initialRouteName={AppRoutes.RescueMeLanding.Name}
>
<RescueMeStack.Screen
name={AppRoutes.RescueMeLanding.Name}
component={RescueMeLandingScreen}
options={{ headerShown: false }}
/>
<RescueMeStack.Screen
name={AppRoutes.RescueMeMap.Name}
component={RescueMeScreen}
options={{ headerShown: false }}
/>
;
</RescueMeStack.Navigator>
);
RootStackNavigator:
const RootStackNavigator = () => {
return (
<RootStack.Navigator
initialRouteName={AppRoutes.LoginRegistration.Name}
mode="modal"
>
....
<RootStack.Screen
name={AppRoutes.RescueMeLanding.Name}
component={RescueMeStackScreen}
options={{
title: AppRoutes.Register.Label,
headerShown: false,
animationEnabled: false,
}}
/>
....
</RootStack.Navigator>
);
When navigating to nested component, you need to specify parent explicitly.
See this for further information.
Thus, in your case;
navigation.push(AppRoutes.RescueMeLanding, { screen: AppRoutes.RescueMeLanding.Name })
What I also would suggest is name stack differently than the screen. Such as;
navigation.push(AppRoutes.RescueMeLandingStack, { screen: AppRoutes.RescueMeLanding.Name })
In Cypress, the select('option-text') command will only work if there is an exact match. How can I tell it to select an option that contains the text instead ?
Through aliasing you can make it work:
cy.get('select')
.find('option')
.contains('YOUR TEXT')
.as('selectOption')
.then( () => {
cy.get('select')
.select(`${this.selectOption.text()}`)
})
A slightly improved variant of Can Akgun user is as following (bonus adding as cypress command):
/**
* Select an option containing part of string in its text body
* {String} elementSelector
* {String} optionTextPart
*/
Cypress.Commands.add('selectOptionContaining', (elementSelector, optionTextPart) => {
cy.get(elementSelector)
.find('option')
.contains(optionTextPart)
.then($option => {
cy.get(elementSelector).select($option.text());
});
});
In this way we do not need global variables.
I haven't found anything like that in the api so far, nor in the github issues.
So I resorted to adding a custom command in my project:
// cypress/support/commands.ts
Cypress.Commands.add('selectContaining', {prevSubject: 'element'}, (subject, text, options) => {
return cy.wrap(subject).contains('option', text, options).then(
option => cy.get('select#report-selection').select(option.text().trim())
);
});
// cypress/support/commands_type.ts
declare namespace Cypress {
interface Chainable<Subject = any> {
requestApi(method: HttpMethod, url: string, body?: RequestBody): Chainable<Cypress.Response>;
selectContaining(text: string | string[], options?: Partial<SelectOptions>): Chainable<Subject>;
}
}
Using ngxs I have below setup,
user.state.ts
export class UserState { ... }
product.state.ts
export class ProductState { ... }
App.component.ts
import {UserState} from './user.state'
import {ProductState} from './product.state'
export class App{
/***
I am not sure but like ngrx we can't say,
private userStore:Store<UserState> <============ can we do it in constructor like it
***/
#Select(UserState.getUsers) Users$: Observable<IUsers[]>; // This works
#Select(ProductState.getProducts) Products$: Observable<IProducts[]>; // This works
constructor(private store : Store) {} //<==== Can we have Store<UserState> or Store<ProductState>
ngOnInit(){
/***
Below In 1 Case : when I type this.store.select(state => state.
after .(dot) it doesn't resolve to .Users(Case 1) or .Products(Case 2)
Question: So how can I use two different states for below cases????????????
***/
// 1 Case)
this.store.select(state => state.Users.Users).subscribe((users: IUsers[]) => {
this.users = users;
})
// 2 Case)
this.store.select(state => state.Products.Products).subscribe((products: IProducts[]) => {
this.products = products;
})
}
}
Is there any elegant way to do using NGXS????
I think this might help you
// Keep this as it is
#Select(UserState.getUsers) Users$: Observable<IUsers[]>;
#Select(ProductState.getProducts) Products$: Observable<IProducts[]>;
// And then use it like this
this.Users$.subscribe((users: IUsers[]) => {
this.users = users;
})
this.Products$.subscribe.((products: IProducts[]) => {
this.products = products;
})
I'm using https://www.npmjs.com/package/angular2-notifications this package to get notification it works fine but it works at ts file like;
saveUser(user){
//some process then notification will work.
this.notif.success(
'Yeahhh successfull create notification',
{
timeOut: 3000,
showProgressBar: true,
pauseOnHover: false,
clickToClose: true,
maxLength: 50
}
)
}
works fine but I'm using translate (i18n) and want to give these parameters by the language.And the package says it has a html function but I tried and couldn't do that which is
Thank you
I guess img can't be seen , it was the code of html
this.notif.html(`<p translate > {{ 'City' | translate }} Success</p>`)
You can use the TranslateService to get your translation values.
First import the service.
import {TranslateService} from '#ngx-translate/core';
Then inject and use it like so:
export class YourComponent {
constructor(translate: TranslateService) {
translate.get('CITY').subscribe((res: string) => {
console.log(res);
//=> 'Whatever your translation is for "city"'
});
}
}
Further documentation can be found here.