amplication · amplication · Jan 11, 2025
diff --git a/.amplication/ignored/admin-ui/Dockerfile b/.amplication/ignored/admin-ui/Dockerfile
@@ -44,7 +44,7 @@ RUN chown -R nginx:nginx /var/run/nginx.pid \
 USER nginx
 
 # expose a specific port on the docker container
-ENV PORT=80
+ENV PORT=3001
 EXPOSE ${PORT}
 
 # start the server using the previously build application

diff --git a/.amplication/ignored/admin-ui/src/post/PostEdit.tsx b/.amplication/ignored/admin-ui/src/post/PostEdit.tsx
@@ -30,13 +30,12 @@ export const PostEdit = (props: EditProps): React.ReactElement => {
         <TextInput label="Meta Title" source="metaTitle" />
         <DateTimeInput label="Published At" source="publishedAt" />
         <TextInput label="Slug" source="slug" />
-        <ReferenceArrayInput
-          source="tags"
-          reference="Tag"
-          parse={(value: any) => value && value.map((v: any) => ({ id: v }))}
-          format={(value: any) => value && value.map((v: any) => v.id)}
-        >
-          <SelectArrayInput optionText={TagTitle} />
+        <ReferenceArrayInput source="tags" reference="Tag">
+          <SelectArrayInput
+            optionText={TagTitle}
+            parse={(value: any) => value && value.map((v: any) => ({ id: v }))}
+            format={(value: any) => value && value.map((v: any) => v.id)}
+          />
         </ReferenceArrayInput>
         <TextInput label="Title" multiline source="title" />
       </SimpleForm>

diff --git a/.amplication/ignored/admin-ui/src/post/PostList.tsx b/.amplication/ignored/admin-ui/src/post/PostList.tsx
@@ -15,14 +15,8 @@ import { AUTHOR_TITLE_FIELD } from "../author/AuthorTitle";
 
 export const PostList = (props: ListProps): React.ReactElement => {
   return (
-    <List
-      {...props}
-      bulkActionButtons={false}
-      title={"Posts"}
-      perPage={50}
-      pagination={<Pagination />}
-    >
-      <Datagrid rowClick="show">
+    <List {...props} title={"Posts"} perPage={50} pagination={<Pagination />}>
+      <Datagrid rowClick="show" bulkActionButtons={false}>
         <ReferenceField label="Author" source="author.id" reference="Author">
           <TextField source={AUTHOR_TITLE_FIELD} />
         </ReferenceField>
@@ -36,7 +30,7 @@ export const PostList = (props: ListProps): React.ReactElement => {
         <TextField label="Published At" source="publishedAt" />
         <TextField label="Slug" source="slug" />
         <TextField label="Title" source="title" />
-        <DateField source="updatedAt" label="Updated At" />
+        <DateField source="updatedAt" label="Updated At" />{" "}
       </Datagrid>
     </List>
   );

diff --git a/admin-ui/.env b/admin-ui/.env
@@ -1,2 +1,2 @@
 PORT=3001
-REACT_APP_SERVER_URL=http://localhost:3000
+VITE_REACT_APP_SERVER_URL=http://localhost:3000
diff --git a/admin-ui/README.md b/admin-ui/README.md
@@ -1,6 +1,6 @@
 <p align="right">
   <a href="https://amplication.com" target="_blank">
-    <img alt="amplication-logo" height="70" alt="Amplication Logo" src="https://amplication.com/images/amplication-logo-purple.svg"/>
+    <img alt="amplication-logo" height="70" alt="Amplication Logo" src="https://amplication.com/images/logo.svg"/>
   </a>
 </p>
 

diff --git a/admin-ui/configuration/nginx.conf b/admin-ui/configuration/nginx.conf
@@ -1,7 +1,7 @@
 server_tokens off;
 
 server {
-    listen       8080;
+    listen       3001;
     server_name  localhost;
     location / {
         root   /usr/share/nginx/html;

diff --git a/admin-ui/index.html b/admin-ui/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="This is the project to generate the server code for Amplication blog | 
+
+The code of this app is synced with https://github.com/amplication/blog-server |
+
+The client for this server is available on https://github.com/amplication/blog" />
+
+    <title>Amplication Blog</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/admin-ui/package.json b/admin-ui/package.json
@@ -3,58 +3,39 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "3.6.9",
-    "@material-ui/core": "4.12.4",
     "graphql": "15.6.1",
     "lodash": "4.17.21",
     "pluralize": "8.0.0",
-    "ra-data-graphql-amplication": "0.0.14",
-    "react": "16.14.0",
-    "react-admin": "3.19.12",
-    "react-dom": "16.14.0",
-    "react-scripts": "5.0.0",
-    "sass": "^1.39.0",
-    "web-vitals": "1.1.2"
-  },
-  "overrides": {
-    "react-scripts": {
-      "@svgr/webpack": "6.5.1"
-    }
+    "ra-data-graphql-amplication": "1.0.2",
+    "react": "^18.3.0",
+    "react-admin": "^5.1.0",
+    "react-dom": "^18.3.0",
+    "sass": "^1.39.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ./src",
+    "format": "prettier --write ./src",
     "package:container": "docker build ."
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "devDependencies": {
-    "@testing-library/jest-dom": "5.14.1",
-    "@testing-library/react": "11.2.7",
-    "@testing-library/user-event": "13.2.0",
-    "@types/jest": "26.0.16",
     "@types/lodash": "4.14.178",
-    "@types/node": "12.20.16",
-    "@types/react": "16.14.11",
-    "@types/react-dom": "17.0.0",
+    "@types/node": "^20.10.7",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
+    "@vitejs/plugin-react": "^4.0.1",
+    "eslint": "^8.43.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^2.8.8",
     "type-fest": "0.13.1",
-    "typescript": "4.3.5"
+    "typescript": "^5.1.6",
+    "vite": "^4.3.9"
   }
 }
diff --git a/admin-ui/public/index.html b/admin-ui/public/index.html
diff --git a/admin-ui/src/App.tsx b/admin-ui/src/App.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Admin, DataProvider, Resource } from "react-admin";
-import buildGraphQLProvider from "./data-provider/graphqlDataProvider";
+import dataProvider from "./data-provider/graphqlDataProvider";
 import { theme } from "./theme/theme";
 import Login from "./Login";
 import "./App.scss";
@@ -28,19 +28,6 @@ import { StoryShow } from "./story/StoryShow";
 import { jwtAuthProvider } from "./auth-provider/ra-auth-jwt";
 
 const App = (): React.ReactElement => {
-  const [dataProvider, setDataProvider] = useState<DataProvider | null>(null);
-  useEffect(() => {
-    buildGraphQLProvider
-      .then((provider: any) => {
-        setDataProvider(() => provider);
-      })
-      .catch((error: any) => {
-        console.log(error);
-      });
-  }, []);
-  if (!dataProvider) {
-    return <div>Loading</div>;
-  }
   return (
     <div className="App">
       <Admin

diff --git a/admin-ui/src/Login.tsx b/admin-ui/src/Login.tsx
@@ -1,25 +1,14 @@
 import * as React from "react";
 import { useState } from "react";
 import { useLogin, useNotify, Notification, defaultTheme } from "react-admin";
-import { ThemeProvider } from "@material-ui/styles";
-import { createTheme } from "@material-ui/core/styles";
-import { Button } from "@material-ui/core";
+import { Button, createTheme, ThemeProvider } from "@mui/material";
 import "./login.scss";
+import LoginForm from "./LoginForm";
 
 const CLASS_NAME = "login-page";
 
 const Login = ({ theme }: any) => {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const login = useLogin();
-  const notify = useNotify();
   const BASE_URI = process.env.REACT_APP_SERVER_URL;
-  const submit = (e: any) => {
-    e.preventDefault();
-    login({ username, password }).catch(() =>
-      notify("Invalid username or password")
-    );
-  };
 
   return (
     <ThemeProvider theme={createTheme(defaultTheme)}>
@@ -54,31 +43,7 @@ const Login = ({ theme }: any) => {
               Sign in to a React-Admin client with ready-made forms for creating
               and editing all the data models of your application
             </div>
-            <form onSubmit={submit}>
-              <label>
-                <span>Username</span>
-
-                <input
-                  name="username"
-                  type="textbox"
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                />
-              </label>
-              <label>
-                <span>Password</span>
-
-                <input
-                  name="password"
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                />
-              </label>
-              <Button type="submit" variant="contained" color="primary">
-                Log in
-              </Button>
-            </form>
+            <LoginForm />
           </div>
           <div className={`${CLASS_NAME}__box`}>
             <img

diff --git a/admin-ui/src/LoginForm.tsx b/admin-ui/src/LoginForm.tsx
@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { useLogin, useNotify } from "react-admin";
+import { Button } from "@mui/material";
+import "./login.scss";
+
+const LoginForm = ({ theme }: any) => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const login = useLogin();
+  const notify = useNotify();
+  const BASE_URI = process.env.REACT_APP_SERVER_URL;
+  const submit = (e: any) => {
+    e.preventDefault();
+    login({ username, password }).catch(() =>
+      notify("Invalid username or password")
+    );
+  };
+
+  return (
+    <form onSubmit={submit}>
+      <label>
+        <span>Username</span>
+
+        <input
+          name="username"
+          type="textbox"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+      </label>
+      <label>
+        <span>Password</span>
+
+        <input
+          name="password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+      </label>
+      <Button type="submit" variant="contained" color="primary">
+        Log in
+      </Button>
+    </form>
+  );
+};
+
+export default LoginForm;
diff --git a/admin-ui/src/author/AuthorCreate.tsx b/admin-ui/src/author/AuthorCreate.tsx
@@ -17,13 +17,12 @@ export const AuthorCreate = (props: CreateProps): React.ReactElement => {
       <SimpleForm>
         <TextInput label="First Name" source="firstName" />
         <TextInput label="Last Name" source="lastName" />
-        <ReferenceArrayInput
-          source="posts"
-          reference="Post"
-          parse={(value: any) => value && value.map((v: any) => ({ id: v }))}
-          format={(value: any) => value && value.map((v: any) => v.id)}
-        >
-          <SelectArrayInput optionText={PostTitle} />
+        <ReferenceArrayInput source="posts" reference="Post">
+          <SelectArrayInput
+            optionText={PostTitle}
+            parse={(value: any) => value && value.map((v: any) => ({ id: v }))}
+            format={(value: any) => value && value.map((v: any) => v.id)}
+          />
         </ReferenceArrayInput>
         <TextInput label="Profile Image" source="profileImage" />
         <TextInput label="Slug" source="slug" />