Dxyinme/dev #4

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

Merged

dxyinme merged 4 commits into main from dxyinme/dev

Apr 15, 2025

.gitignore

-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ @@
     # production
     /build
+    /dist
     # misc
     .DS_Store
@@ Expand Down @@

README.md

-Original file line number
+Diff line change
@@ Expand Up / @@ -29,16 +29,6 @@ Your app is ready to be deployed! @@
     See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-    ### `yarn eject`
-    **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-    If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-    Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-    You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
     ## Learn More
     You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
@@ Expand Down @@

0 public/favicon.ico → favicon.ico

File renamed without changes.

public/index.html → index.html

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -3,22 +3,22 @@
  
    <head>

      <meta charset="utf-8" />

      <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

      <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="Web site created using create-react-app" />

      <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

      <link rel="apple-touch-icon" href="/logo192.png" />

      <!--

          manifest.json provides metadata used when your web app is installed on a

          user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

        -->

      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

      <link rel="manifest" href="/manifest.json" />

      <!--

          Notice the use of %PUBLIC_URL% in the tags above.

          Notice the use of  in the tags above.

          It will be replaced with the URL of the `public` folder during the build.

          Only files inside the `public` folder can be referenced from the HTML.

          Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will

          Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will

          work correctly both with client-side routing and a non-root public URL.

          Learn how to configure a non-root public URL by running `npm run build`.

        -->

    @@ -28,6 +28,7 @@
  
    <body>

      <noscript>You need to enable JavaScript to run this app.</noscript>

      <div id="root"></div>

      <script type="module" src="/src/index.tsx"></script>

      <!--

          This HTML file is a template.

          If you open it directly in the browser, you will see an empty page.

0 public/logo192.png → logo192.png

File renamed without changes

0 public/logo512.png → logo512.png

File renamed without changes

public/manifest.json → manifest.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -22,4 +22,4 @@ @@
       "display": "standalone",
       "theme_color": "#000000",
       "background_color": "#ffffff"
-    }
+    }

package.json

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -9,23 +9,24 @@
  
        "@testing-library/jest-dom": "^6.5.0",

        "@testing-library/react": "^16.0.1",

        "@testing-library/user-event": "^14.5.2",

        "@types/jest": "^29.0.0",

        "@types/node": "^16.7.13",

        "@types/react": "^18.0.0",

        "@types/react-dom": "^18.0.0",

        "@vitejs/plugin-react": "^4.3.4",

        "antd": "^5.21.1",

        "react": "^18.3.1",

        "react-dom": "^18.3.1",

        "react-router-dom": "^6.26.2",

        "react-scripts": "5.0.1",

        "typescript": "^4.4.2",

        "web-vitals": "^2.1.0"

        "vite": "^6.2.6",

        "vite-tsconfig-paths": "^5.1.4",

        "web-vitals": "^4.2.4"

      },

      "scripts": {

        "start": "react-scripts start",

        "build": "react-scripts build",

        "test": "react-scripts test",

        "eject": "react-scripts eject"

        "start": "vite",

        "build": "tsc && vite build",

        "preview": "vite preview",

        "test": "vitest"

      },

      "eslintConfig": {

        "extends": [

    @@ -44,5 +45,10 @@
  
          "last 1 firefox version",

          "last 1 safari version"

        ]

      },

      "devDependencies": {

        "jest": "^29.7.0",

        "jsdom": "^26.0.0",

        "vitest": "^3.0.7"

      }

    }

    }

0 public/robots.txt → robots.txt

File renamed without changes.

src/react-app-env.d.ts

This file was deleted.

src/routes/routesConfig.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,8 @@ const Home = lazy(() => import('../views/Home/Home')); @@
     const Bags = lazy(() => import('../views/Bags/Bags'));
     const SingleBag = lazy(() => import('../views/Bags/SingleBag'));
     const Nodes = lazy(() => import('../views/Nodes/Nodes'));
+    const SingleTask = lazy(() => import('../views/Tasks/SingleTask'));
+    const Tasks = lazy(() => import('../views/Tasks/Tasks'));
     const LukaRoutes: IRouteType.IRoute[] = [
         {
@@ Expand Down Expand Up / @@ -33,6 +35,24 @@ const LukaRoutes: IRouteType.IRoute[] = [ @@
             },
             children: []
         },
+        {
+            name: 'single task',
+            path: '/bags/:bagDisplayName/tasks/:taskDisplayName',
+            element: SingleTask,
+            meta: {
+                title: 'single task',
+            },
+            children: []
+        },
+        {
+            name: 'tasks',
+            path: '/bags/:bagDisplayName/tasks',
+            element: Tasks,
+            meta: {
+                title: 'tasks',
+            },
+            children: []
+        },
         {
             name: 'nodes',
             path: '/nodes',
@@ Expand Down @@

src/views/Bags/Bags.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,8 @@ function CallListBagsAPI(): BagsViewsProp.BagType[] { @@
     }
     const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
-        JumpTo('/bags/' + value.trim())
+        value = value.trim()
+        JumpTo('/bags/' + value)
     }
     function ListBags(props: BagsViewsProp.HiddenProps) {
@@ Expand Down @@

src/views/Bags/SingleBag.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,13 +1,38 @@
  
    import { Flex, Layout } from "antd";

    import { Flex, Layout, Card, Space } from "antd";

    import React from "react";

    import LukaFooter from "../commons/footer";

    import { LukaHeaderStyle } from "../css/commoncss";

    import { useParams } from "react-router-dom";

    import LukaBreadcrumb from "../commons/Breadcrumb";

    import NotFound from "../commons/notfound";

    const { Content, Header } = Layout;

    function CheckIfBagExists(value: string): boolean {

        if (value.localeCompare("existbag") === 0) {

            return true

        }

        return false

    }

    function BagInfo(bagInfo: SingleBagViewProp.BagInfoProps) {

        return (

            <Space direction="vertical" size={16}>

                <Card title={bagInfo.Name} style={{ width: 300 }}>

                    <p>Create Time: {bagInfo.CreateTime.toString()}</p>

                </Card>

            </Space>

        )

    }

    function SingleBag() {

        const { bagDisplayName } = useParams()

        if (!CheckIfBagExists(bagDisplayName!)) {

            return (

                <NotFound></NotFound>

            )

        }

        return (

            <Flex gap="middle" vertical>

                <Header style={LukaHeaderStyle}>Hello Luka</Header>

    @@ -17,9 +42,9 @@ function SingleBag() {
  
                    <div>{bagDisplayName}</div>

                ]}></LukaBreadcrumb>

                <Content style={{ padding: '0 48px' }}>

                    <div>

                        Single Bag

                    </div>

                    <BagInfo

                        Name={bagDisplayName!}

                        CreateTime={new Date(Date.now())} />

                </Content>

                <LukaFooter />

            </Flex>

src/views/Bags/SingleBagModels.d.ts

-Original file line number
+Diff line change
@@ -0,0 +1,6 @@
+    declare namespace SingleBagViewProp {
+        interface BagInfoProps {
+            Name: string;
+            CreateTime: Date;
+        }
+    }

src/views/Home/Home.test.tsx

-Original file line number
+Diff line change
@@ -1,6 +1,7 @@
     import React from 'react';
-    import { render, screen } from '@testing-library/react';
     import Home from './Home';
+    import { test, expect } from 'vitest';
+    import { render, screen } from '@testing-library/react';
     test('renders learn react link', () => {
       render(<Home />);
@@ Expand Down @@

src/views/Nodes/Nodes.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -5,22 +5,23 @@ import LukaBreadcrumb from "../commons/Breadcrumb";
  
    const { Header, Content } = Layout;

    interface NodeContentProps {

        NodeId: string;

        Id: string;

        Name?: string;

    }

    function NodeContent(props: NodeContentProps) {

    function NodeContent(nodeContent: NodeContentProps) {

        return (

            <div>

                {props.NodeId}

                {nodeContent.Id}

            </div>

        )

    }

    function Node(props: NodeContentProps) {

    function Node(nodeContent: NodeContentProps) {

        return (

            <Popover content={NodeContent(props)} title={props.NodeId}>

                <Button type="primary">Node1</Button>

            <Popover content={NodeContent(nodeContent)} title={nodeContent.Id}>

                <Button type="primary">{nodeContent.Id}</Button>

            </Popover>

        )

    }

    @@ -35,7 +36,11 @@ function Nodes() {
  
                ]} />

                <Layout>

                    <Content>

                        <Node NodeId="11"></Node>

                        <Node Id="11"></Node>

                        <Node Id="12"></Node>

                        <Node Id="13"></Node>

                        <Node Id="14"></Node>

                        <Node Id="15"></Node>

                    </Content>

                </Layout>

                <LukaFooter></LukaFooter>

src/views/Tasks/SingleTask.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,34 @@
+    import { Flex, Layout } from "antd";
+    import React from "react";
+    import LukaFooter from "../commons/footer";
+    import { LukaHeaderStyle } from "../css/commoncss";
+    import { useParams } from "react-router-dom";
+    import LukaBreadcrumb from "../commons/Breadcrumb";
+    const { Content, Header } = Layout;
+    function SingleTask() {
+        const { bagDisplayName, taskDisplayName } = useParams()
+        const bagLink = `/bags/${bagDisplayName}`
+        const tasksLink = bagLink + `/tasks`
+        return (
+            <Flex gap="middle" vertical>
+                <Header style={LukaHeaderStyle}>Hello Luka</Header>
+                <LukaBreadcrumb items={[
+                    <a href="/">Home</a>,
+                    <a href="/bags">Bags</a>,
+                    <a href={bagLink}>{bagDisplayName}</a>,
+                    <a href={tasksLink}>Tasks</a>,
+                    <div>{taskDisplayName}</div>,
+                ]
+                }></LukaBreadcrumb >
+                <Content style={{ padding: '0 48px' }}>
+                    <div>
+                        Single Task
+                    </div>
+                </Content>
+                <LukaFooter />
+            </Flex >
+        )
+    };
+    export default SingleTask;

src/views/Tasks/Tasks.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,32 @@
+    import { Flex, Layout } from "antd";
+    import React from "react";
+    import LukaFooter from "../commons/footer";
+    import { LukaHeaderStyle } from "../css/commoncss";
+    import { useParams } from "react-router-dom";
+    import LukaBreadcrumb from "../commons/Breadcrumb";
+    const { Content, Header } = Layout;
+    function Tasks() {
+        const { bagDisplayName } = useParams()
+        const bagLink = `/bags/${bagDisplayName}`
+        return (
+            <Flex gap="middle" vertical>
+                <Header style={LukaHeaderStyle}>Hello Luka</Header>
+                <LukaBreadcrumb items={[
+                    <a href="/">Home</a>,
+                    <a href="/bags">Bags</a>,
+                    <a href={bagLink}>{bagDisplayName}</a>,
+                    <div>Tasks</div>
+                ]
+                }></LukaBreadcrumb >
+                <Content style={{ padding: '0 48px' }}>
+                    <div>
+                        Tasks
+                    </div>
+                </Content>
+                <LukaFooter />
+            </Flex >
+        )
+    };
+    export default Tasks;

src/views/commons/Breadcrumb.test.tsx

-Original file line number
+Diff line change
@@ -1,5 +1,6 @@
-    import { render, screen } from "@testing-library/react";
+    import { test, expect } from 'vitest';
+    import { render, screen } from '@testing-library/react';
     import LukaBreadcrumb from "./Breadcrumb";
     test("test luka bread crumb", () => {
@@ Expand Down @@

src/views/commons/notfound.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,16 @@
+    import { Button, Layout } from "antd";
+    import React from "react";
+    const { Content } = Layout;
+    const NotFound: React.FC = () => {
+        return (
+            <Content>
+                Not Found
+                <Button onClick={() => {
+                    window.history.back()
+                }}>Back to last page</Button>
+            </Content>
+        )
+    }
+    export default NotFound;

tsconfig.json

-Original file line number
+Diff line change
@@ -1,11 +1,14 @@
     {
       "compilerOptions": {
-        "target": "es5",
+        "target": "ESNext",
         "lib": [
           "dom",
           "dom.iterable",
           "esnext"
         ],
+        "types": [
+          "vite/client"
+        ],
         "allowJs": true,
         "skipLibCheck": true,
         "esModuleInterop": true,
@@ Expand All / @@ -23,4 +26,4 @@ @@
       "include": [
         "src"
       ]
-    }
+    }

vite-env.d.ts

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="vitest" />
		/// <reference types="vite/client" />

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dxyinme/dev #4

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!