ok

2024-10-09 04:35:15 +00:00
parent 1da45c528d
commit 624a9e8ec8
8 changed files with 267 additions and 184 deletions
--- a/src/components/ItemLister.js
+++ b/src/components/ItemLister.js
@@ -53,6 +53,7 @@ const ItemLister = ({
  const [editedTypeName, setEditedTypeName] = useState(typeName);
  const typeNameInputRef = useRef(null);

+
  const handlePlusClick = (itemId) => {
    const updatedItems = items.map((item) => {
      if (item.itemId === itemId) {
@@ -124,6 +125,14 @@ const ItemLister = ({
    }
  };

+  useEffect(() => {
+    if(beingEditedType == itemTypeId)return;
+    
+    setOnEditItem(0); 
+    setIsAddingNewItem(false);
+    console.log(itemTypeId)
+  }, [beingEditedType]);
+
  const toggleAddNewItem = () => {
    setIsAddingNewItem((prev) => !prev);
    setOnEditItem(0);
@@ -184,16 +193,13 @@ const ItemLister = ({
  return (
    <>
      {(items.length > 0 ||
-        (user && user.roleId == 1 && user.userId == shopOwnerId)) && (
+        (user && (user.cafeId == shopId || user.userId == shopOwnerId))) && (
        <div className={styles["item-lister"]}>
          {!raw && (
            <div className={styles["title-container"]}>
              <input
                ref={typeNameInputRef}
                className={`${styles.title} ${
-                  user &&
-                  user.roleId == 1 &&
-                  user.userId == shopOwnerId &&
                  isEdit
                    ? styles.border
                    : styles.noborder
@@ -202,10 +208,7 @@ const ItemLister = ({
                onChange={(e) => setEditedTypeName(e.target.value)}
                disabled={!isEdit}
              />
-              {isEditMode &&
-                user &&
-                user.roleId == 1 &&
-                user.userId == shopOwnerId && (
+              {isEditMode && (
                  <>
                    <button
                      className={styles["edit-typeItem-button"]}
@@ -271,7 +274,8 @@ const ItemLister = ({
                    </button>
                  )}
                  <div className={styles["itemWrapper"]}>
-                    {isEditMode && onEditItem != item.itemId && (
+                    {isEditMode && onEditItem != item.itemId&&
+                        (
                      <div className={styles["editModeLayout"]}>
                        {isEditMode && (
                          <Switch
@@ -302,8 +306,7 @@ const ItemLister = ({
                      onNegativeClick={() => handleNegativeClick(item.itemId)}
                      onRemoveClick={() => handleRemoveClick(item.itemId)}
                      isBeingEdit={
-                        onEditItem == item.itemId &&
-                        beingEditedType == itemTypeId
+                        onEditItem == item.itemId 
                      }
                      isAvailable={item.availability}
                      handleUpdateItem={(name, price, image) =>
--- a/src/components/ItemTypeLister.js
+++ b/src/components/ItemTypeLister.js
@@ -13,12 +13,14 @@ const ItemTypeLister = ({
  onFilterChange,
  filterId,
  isEditMode,
+  beingEditedType,
+  setBeingEditedType,
 }) => {
  const [isAddingNewItem, setIsAddingNewItem] = useState(false);
  const newItemDivRef = useRef(null);
  const [items, setItems] = useState([]);

-  const [itemTypeName, setItemTypeName] = useState('');
+  const [itemTypeName, setItemTypeName] = useState("");
  const handleCreateItem = (name, price, selectedImage, previewUrl) => {
    console.log(previewUrl);
    const newItem = {
@@ -120,7 +122,7 @@ const ItemTypeLister = ({
                <input
                  className="item-type-name"
                  value={itemTypeName}
-                  onChange={(e)=>setItemTypeName(e.target.value)}
+                  onChange={(e) => setItemTypeName(e.target.value)}
                  placeholder="type name"
                  style={{ marginLeft: "10px" }} // Adjust spacing as needed
                />
@@ -236,6 +238,8 @@ const ItemTypeLister = ({
                  isEditMode={true}
                  raw={true}
                  handleCreateItem={handleCreateItem}
+                  beingEditedType={beingEditedType}
+                  setBeingEditedType={setBeingEditedType}
                />
                <button onClick={toggleAddNewItem} className="add-button">
                  back
--- a/src/components/RouletteWheel.css
+++ b/src/components/RouletteWheel.css
@@ -70,19 +70,25 @@ img {
  z-index: 100;
  position: absolute;
  width: 30%;
-    /* Increase size for better visibility */
  height: auto;
-    /* Increase size for better visibility */
  border: none;
-    /* Remove border for simplicity */
  border-radius: 5px;
-    /* Add border radius for rounded corners */
  color: rgb(2, 2, 2);
-    /* Text color */
  font-size: 16px;
-    /* Font size */
  border: 2px solid #ccc;
+  background-color: #fff;
 }
+
+.roulette-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.roulette-button.error {
+  background-color: red; /* Change button color on error */
+  transition: background-color 0.5s ease-in-out;
+}
+
 .hidden {
  display: none;
 }
--- a/src/components/RouletteWheel.js
+++ b/src/components/RouletteWheel.js
@@ -2,7 +2,9 @@ import React, { useState, useRef, useEffect } from "react";
 import "./RouletteWheel.css";
 import coffeeImage from "./coffee.png"; // Update the path to your image

-const RouletteWheel = ({ isForRegister, onSign }) => {
+import { ThreeDots } from "react-loader-spinner";
+
+const RouletteWheel = ({ isForRegister, onSignIn, onSignUp }) => {
  const [rotation, setRotation] = useState(0);
  const [isDragging, setIsDragging] = useState(false);
  const startAngleRef = useRef(0);
@@ -12,21 +14,32 @@ const RouletteWheel = ({ isForRegister, onSign }) => {
  const [email, setEmail] = useState("");
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);

  const emailInputRef = useRef(null);
  const usernameInputRef = useRef(null);
  const passwordInputRef = useRef(null);

-  const handleSign = () => {
-    onSign(email, username, password);
+  const handleSignIn = () => {
+    setError(false); // Reset error state before login attempt
+    onSignIn(email, username, password, setLoading, setError);
  };

+  const handleSignUp = () => {
+    setError(false); // Reset error state before login attempt
+    onSignUp(email, username, password, setLoading, setError);
+  };
  const handleStart = (x, y) => {
    setIsDragging(true);
    startAngleRef.current = getAngle(x, y);
    startRotationRef.current = rotation;
  };

+  useEffect(() => {
+    setError(false);
+  }, [error]);
+
  const handleMove = (x, y) => {
    if (isDragging) {
      const angle = getAngle(x, y);
@@ -153,8 +166,6 @@ const RouletteWheel = ({ isForRegister, onSign }) => {
        onTouchStart={handleTouchStart}
        style={{ transform: `rotate(${rotation}deg)` }}
      >
-        {!isForRegister ? (
-          <>
        <input
          className={`roulette-input ${
            isVisible(rotation % 360 !== -0) ? "" : "hidden"
@@ -163,42 +174,44 @@ const RouletteWheel = ({ isForRegister, onSign }) => {
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          ref={usernameInputRef}
-              style={{ transform: "translate(90%, -120%) rotate(0deg)" }}
+          style={{ transform: "translate(60%, -220%) rotate(0deg)" }}
        />
        <input
          className={`roulette-input ${
-                isVisible(rotation % 360 !== -90) ? "" : "hidden"
+            isVisible(rotation % 360 !== -0) ? "" : "hidden"
          }`}
          placeholder="Password"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          ref={passwordInputRef}
-              style={{ transform: "translate(30%, 350%) rotate(90deg)" }}
+          style={{ transform: "translate(90%, -90%) rotate(0deg)" }}
        />
        <button
-              className={`roulette-input ${
-                isVisible(rotation % 360 !== -90) ? "" : "hidden"
+          className={`roulette-button  ${error ? "error" : ""}  ${
+            isVisible(rotation % 360 !== -0) ? "" : "hidden"
          }`}
-              onClick={handleSign}
+          disabled={loading}
+          onClick={handleSignIn}
          onMouseDown={handleChildMouseDown}
          onTouchStart={handleChildTouchStart}
-              style={{ transform: "translate(10%, 320%) rotate(90deg)" }}
+          style={{ transform: "translate(110%, -10%) rotate(0deg)" }}
        >
-              Sign in
-            </button>
-          </>
+          {loading ? (
+            <ThreeDots color="black" height={15} width={40} /> // Show loader when loading
          ) : (
-          <>
+            "Sign in"
+          )}
+        </button>
        <input
          className={`roulette-input ${
-                isVisible(rotation % 360 !== -0) ? "" : "hidden"
+            isVisible(rotation % 360 !== -90) ? "" : "hidden"
          }`}
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          ref={emailInputRef}
-              style={{ transform: "translate(90%, -120%) rotate(0deg)" }}
+          style={{ transform: "translate(30%, 320%) rotate(90deg)" }}
        />
        <input
          className={`roulette-input ${
@@ -208,32 +221,34 @@ const RouletteWheel = ({ isForRegister, onSign }) => {
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          ref={usernameInputRef}
-              style={{ transform: "translate(30%, 350%) rotate(90deg)" }}
+          style={{ transform: "translate(10%, 320%) rotate(90deg)" }}
        />
        <input
          className={`roulette-input ${
-                isVisible(rotation % 360 !== -180) ? "" : "hidden"
+            isVisible(rotation % 360 !== -90) ? "" : "hidden"
          }`}
          placeholder="Password"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          ref={passwordInputRef}
-              style={{ transform: "translate(-90%, 115%) rotate(180deg)" }}
+          style={{ transform: "translate(-10%, 320%) rotate(90deg)" }}
        />
        <button
-              className={`roulette-button ${
-                isVisible(rotation % 360 !== -180) ? "" : "hidden"
-              }`}
-              onClick={handleSign}
+          className={`roulette-button  ${error ? "error" : ""} ${
+            isVisible(rotation % 360 !== -90) ? "" : "hidden"
+          } `}
+          onClick={handleSignUp}
          onMouseDown={handleChildMouseDown}
          onTouchStart={handleChildTouchStart}
-              style={{ transform: "translate(-90%, 30%) rotate(180deg)" }}
+          style={{ transform: "translate(-60%, 320%) rotate(90deg)" }}
        >
-              Sign up
-            </button>
-          </>
+          {loading ? (
+            <ThreeDots color="black" height={15} width={40} /> // Show loader when loading
+          ) : (
+            "Sign Up"
          )}
+        </button>
        <img src={coffeeImage} className="roulette-image" alt="Coffee" />
      </div>
    </div>
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,5 @@
 // src/config.js

-const API_BASE_URL = "https://3nvnzs-5000.csb.app"; // Replace with your actual backend URL
+const API_BASE_URL = "https://yjgyr4-5000.csb.app"; // Replace with your actual backend URL

 export default API_BASE_URL;
--- a/src/helpers/userHelpers.js
+++ b/src/helpers/userHelpers.js
@@ -94,6 +94,31 @@ export async function removeConnectedGuestSides(guestSideSessionId) {
  }
  return { ok: false };
 }
+export const signUpUser = async (email, username, password) => {
+  try {
+    const response = await fetch(API_BASE_URL + `/user/signup`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ email, username, password }),
+    });
+    console.log(username, password);
+    const responseData = await response.json();
+
+    if (response.ok) {
+      return {
+        success: true,
+        token: responseData.token,
+      };
+    } else {
+      return { success: false, token: null };
+    }
+  } catch (error) {
+    console.error("Error occurred while logging in:", error.message);
+    return { success: false, token: null };
+  }
+};

 export const loginUser = async (username, password) => {
  try {
--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -183,6 +183,8 @@ function CafePage({
                  isEditMode={isEditMode}
                  onFilterChange={(e) => setFilterId(e)}
                  filterId={filterId}
+                  beingEditedType={beingEditedType}
+                  setBeingEditedType={setBeingEditedType}
                />
                <div style={{ marginTop: "-13px" }}></div>
                {filterId === 0 ? (
--- a/src/pages/LoginPage.js
+++ b/src/pages/LoginPage.js
@@ -1,19 +1,25 @@
-import React from "react";
+import React, { useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import "./LoginPage.css";
 import RouletteWheel from "../components/RouletteWheel";
-import { loginUser } from "../helpers/userHelpers"; // Import from userHelper.js
+import { loginUser, signUpUser } from "../helpers/userHelpers";

 const LoginPage = () => {
  const navigate = useNavigate();
-  const location = useLocation(); // Use useLocation hook instead of useSearchParams
-  const searchParams = new URLSearchParams(location.search); // Pass location.search directly
-
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
  const next = searchParams.get("next");
  const table = searchParams.get("table");

-  const handleLogin = async (email, username, password) => {
+  const handleLogin = async (
+    email,
+    username,
+    password,
+    setLoading,
+    setError
+  ) => {
    try {
+      setLoading(true);
      const response = await loginUser(username, password);

      if (response.success) {
@@ -23,38 +29,60 @@ const LoginPage = () => {
          window.location.href = response.cafeId;
        } else {
          let destination = "/";
-
-          // Validate parameters and construct the destination URL
          if (table && !next) {
-            console.error(
-              'Parameter "table" requires "next" to be present in the URL.',
-            );
-            // Navigate to a default route or handle this case as needed
+            console.error('Parameter "table" requires "next" to be present.');
            navigate("/");
            return;
          }
-
          if (next) {
            destination = `/${next}`;
-            if (table) {
-              destination += `?table=${table}`;
+            if (table) destination += `?table=${table}`;
          }
-          }
-
-          // navigate(destination, { replace: true });
          window.location.href = destination;
        }
      } else {
+        setError(true); // Trigger error state in the button
        console.error("Login failed");
      }
    } catch (error) {
+      setError(true);
      console.error("Error occurred while logging in:", error.message);
+    } finally {
+      setLoading(false); // Ensure loading state is cleared
+    }
+  };
+  const handleSignUp = async (
+    email,
+    username,
+    password,
+    setLoading,
+    setError
+  ) => {
+    try {
+      setLoading(true);
+      const response = await signUpUser(email, username, password);
+
+      if (response.success) {
+        localStorage.setItem("auth", response.token);
+
+        let destination = "/";
+
+        window.location.href = destination;
+      } else {
+        setError(true); // Trigger error state in the button
+        console.error("Login failed");
+      }
+    } catch (error) {
+      setError(true);
+      console.error("Error occurred while logging in:", error.message);
+    } finally {
+      setLoading(false); // Ensure loading state is cleared
    }
  };

  return (
    <div className="login-container">
-      <RouletteWheel onSign={handleLogin} />
+      <RouletteWheel onSignIn={handleLogin} onSignUp={handleSignUp} />
    </div>
  );
 };