effector · zerobias · Mar 30, 2025 · Feb 5, 2025 · Feb 6, 2025 · Feb 6, 2025
diff --git a/.changeset/tall-dragons-hide.md b/.changeset/tall-dragons-hide.md
@@ -0,0 +1,6 @@
+---
+'@effector/model-react': patch
+'@effector/model': patch
+---
+
+Improve api based on food-order app feedback
diff --git a/apps/food-order/.babelrc b/apps/food-order/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": [],
+  "plugins": ["effector/babel-plugin"]
+}
diff --git a/apps/food-order/.gitignore b/apps/food-order/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/apps/food-order/README.md b/apps/food-order/README.md
@@ -0,0 +1,3 @@
+# Food order app
+
+Run `npx nx run food-order:serve` to start
diff --git a/apps/food-order/index.html b/apps/food-order/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Food order effector model app</title>
+  </head>
+  <body class="bg-gray-100 p-4">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/food-order/package.json b/apps/food-order/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@effector/model-food-order-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "devDependencies": {
+    "@vitejs/plugin-react": "^3.1.0",
+    "vite": "^4.2.1"
+  }
+}
diff --git a/apps/food-order/project.json b/apps/food-order/project.json
@@ -0,0 +1,43 @@
+{
+  "name": "food-order",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/food-order/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/vite:build",
+      "options": {
+        "outputPath": "dist/apps/food-order"
+      }
+    },
+    "serve": {
+      "executor": "@nrwl/vite:dev-server",
+      "options": {
+        "buildTarget": "food-order:build"
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/food-order/**/*.{ts,js}"]
+      }
+    },
+    "preview": {
+      "executor": "@nrwl/vite:preview-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "food-order:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "food-order:build:development"
+        },
+        "production": {
+          "buildTarget": "food-order:build:production"
+        }
+      }
+    }
+  },
+  "tags": []
+}
diff --git a/apps/food-order/public/vite.svg b/apps/food-order/public/vite.svg
diff --git a/apps/food-order/src/application.tsx b/apps/food-order/src/application.tsx
@@ -0,0 +1,22 @@
+import { useUnit } from 'effector-react';
+import { $route } from './model';
+import { MenuView } from './view/MenuView';
+import { DishView } from './view/DishView';
+import { OrderView } from './view/OrderView';
+import { RestaurantsView } from './view/RestaurantsView';
+
+export function App() {
+  const route = useUnit($route);
+  switch (route.name) {
+    case 'menu':
+      return <MenuView restaurant={route.restaurant} />;
+    case 'dish':
+      return <DishView restaurant={route.restaurant} dish={route.dish} />;
+    case 'order':
+      return <OrderView restaurant={route.restaurant} />;
+    case 'restaurants':
+      return <RestaurantsView />;
+    default:
+      return null;
+  }
+}
diff --git a/apps/food-order/src/common.tsx b/apps/food-order/src/common.tsx
@@ -0,0 +1,73 @@
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+
+export const Radio = ({
+  name,
+  checked,
+  onClick,
+}: {
+  name: string;
+  checked: boolean;
+  onClick: () => void;
+}) => (
+  <label className="flex items-center space-x-3 cursor-pointer">
+    <input
+      type="radio"
+      name={name}
+      className="hidden"
+      checked={checked}
+      onChange={onClick}
+    />
+    <div className="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center">
+      <svg
+        className={clsx(!checked && 'hidden', 'w-4 h-4 text-teal-500')}
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fillRule="evenodd"
+          d="M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z"
+          clipRule="evenodd"
+        />
+      </svg>
+    </div>
+  </label>
+);
+
+export const Title = ({
+  text,
+  goBack,
+}: {
+  text: string;
+  goBack: () => void;
+}) => (
+  <div className="p-4 flex items-center">
+    <button className="text-xl font-bold mr-2" onClick={() => goBack()}>
+      &larr;
+    </button>
+    <h1 className="text-3xl font-bold">{text}</h1>
+  </div>
+);
+
+export const AddToOrder = ({
+  onClick = () => {},
+  children,
+  disabled = false,
+}: {
+  onClick?: () => void;
+  children: ReactNode;
+  disabled?: boolean;
+}) => (
+  <div className="fixed bottom-0 left-0 w-full p-4 bg-white border-t border-gray-200">
+    <button
+      onClick={() => onClick()}
+      disabled={disabled}
+      className={clsx(
+        'w-full text-white py-3 rounded-lg',
+        disabled ? 'bg-gray-300' : 'bg-teal-500',
+      )}
+    >
+      {children}
+    </button>
+  </div>
+);
diff --git a/apps/food-order/src/index.css b/apps/food-order/src/index.css
@@ -0,0 +1,7 @@
+#root {
+  display: contents;
+}
+
+.categories:not(:last-child):after {
+  content: ', ';
+}
diff --git a/apps/food-order/src/main.tsx b/apps/food-order/src/main.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './application';
+import './index.css';
+
+const container = document.querySelector('#root') as HTMLElement;
+
+const root = ReactDOM.createRoot(container);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Food order app

		Run `npx nx run food-order:serve` to start