-
-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
In React, the Instant field of the generated model is of string type. #23769
Comments
It looks like the type was changed to generator-jhipster/generators/react/templates/src/main/webapp/app/shared/util/date-utils.ts.ejs Line 26 in 24a97e1
The utility function If this direction is acceptable, we will issue a PR. |
I think a AxiosResponseTransformer is needed when storing entity information from an axios response. |
@qmonmert Can you take a look at this one too? |
@DanielFran I think we can't change that!
|
@qmonmert @DanielFran, thank you for progressing with this issue. I'm glad. Yes, it is true that the input type for Date is Below is a sample code snippet that adds a type to the generated code and results in an error: export interface IEmployee {
hireDate?: string | null;
}
// Convert date (input form `datetime-local`, value is of type `string`) to Date type (for the server)
export const convertDateTimeToServer = (date?: string) : Date | null => (date ? dayjs(date).toDate() : null);
const saveEntity = (formValues: Record<string, any>) => {
const employeeModel: IEmployee = {};
employeeModel.hireDate = convertDateTimeToServer(formValues.hireDate as string); // ERROR: Type 'Date' is not assignable to type 'string'.ts(2322)
}; My suggestion is as follows, involving changing the dayjs type and adding type annotations in this fix: export interface IEmployee {
hireDate?: dayjs.Dayjs | null;
}
export const convertDateTimeToServer = (date?: string) : dayjs.Dayjs | null => (date ? dayjs(date) : null); |
@hide212131 PR done to try this :) |
@qmonmert Thank you very much!
Below, I have created an example of the code generation I want to achieve. Could you please take a look at it? It's code for sending and receiving an Employee model with a hireDate. This was written based on Angular code generation. The implementation in this code includes: Overall
Client -> Server
Server -> Client
ReferenceIn Angular, similar functionality is achieved with the following code. (For TypeSafe code, Angular's code can be a reference.) As I researched, I realized that it's not as simple a fix as I initially thought. |
@qmonmert Adding a bug bounty |
@hide212131 there is a bug with the actual PR? Because I don't know if your proposal is necessary :) |
@qmonmert There is no 'bug' with the current PR. I have conducted a verification. The behavior remains unchanged from before, and it is safe to proceed with the merge. The next issue I would like to resolve is the following event. export interface IEmployee {
hireDate?: dayjs.Dayjs | null;
}
export const EmployeeUpdate = () => {
const employeeEntity = useAppSelector<IEmployee>(state => state.employee.entity);
// If we write this expecting hireDate to be a dayjs type, we get an error at runtime.
// This is because hireDate can be a **string** type.
const year = employeeEntity.hireDate?.year(); |
@qmonmert approved |
Overview of the issue
JDL file:
TypeScript model: (In Angular, it's of
Dayjs
type, while in Vue, it's ofDate
type.)During the entity update process, a Date type value is stored in the model.
Motivation for or Use Case
While this doesn't directly cause an error, it can lead to confusion during frontend development.
Reproduce the error
Generate React code using a JDL file that includes an Instant type field.
Related issues
Suggest a Fix
Change it to the Date type. In the long run,
it would be beneficial to reduce the usage of the any type and enhance type safety.
JHipster Version(s)
7.9.4, 8.0.0-beta3
JHipster configuration, a
.yo-rc.json
file generated in the root folder.yo-rc.json file
Environment and Tools
openjdk version "17.0.8" 2023-07-18
OpenJDK Runtime Environment GraalVM CE 22.3.3 (build 17.0.8+7-jvmci-22.3-b22)
OpenJDK 64-Bit Server VM GraalVM CE 22.3.3 (build 17.0.8+7-jvmci-22.3-b22, mixed mode, sharing)
git version 2.39.3 (Apple Git-145)
node: v18.17.1
npm: 9.6.7
Docker version 24.0.6, build ed223bc
JDL for the Entity configuration(s)
entityName.json
files generated in the.jhipster
directoryJDL entity definitions
Browsers and Operating System
The text was updated successfully, but these errors were encountered: