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
@@ -6,83 +6,89 @@ img {
 } */

 .roulette-wheel-container {
-    position: fixed;
-    left: 50%;
-    /* Center the container horizontally */
-    top: 30%;
-    transform: translate(-40%, 20%);
-    scale: 3;
-    max-width: 100vw;
-    /* Limit container width to viewport width */
-    max-height: 100vh;
-    /* Limit container height to viewport height */
-    overflow: hidden;
-    /* Hide overflowing content */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    -webkit-user-select: none;
-    /* Safari */
-    -ms-user-select: none;
-    /* IE 10 and IE 11 */
-    user-select: none;
-    /* Standard syntax */
+  position: fixed;
+  left: 50%;
+  /* Center the container horizontally */
+  top: 30%;
+  transform: translate(-40%, 20%);
+  scale: 3;
+  max-width: 100vw;
+  /* Limit container width to viewport width */
+  max-height: 100vh;
+  /* Limit container height to viewport height */
+  overflow: hidden;
+  /* Hide overflowing content */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  -webkit-user-select: none;
+  /* Safari */
+  -ms-user-select: none;
+  /* IE 10 and IE 11 */
+  user-select: none;
+  /* Standard syntax */
 }

 .roulette-wheel {
-    width: 300px;
-    height: 300px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: auto;
-    border-radius: 50%;
-    transition: transform 0.2s ease-out;
+  width: 300px;
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  border-radius: 50%;
+  transition: transform 0.2s ease-out;
 }

 .roulette-image {
-    width: 200px;
-    height: 200px;
-    user-select: none;
-    /* Prevents the image from being selected */
-    pointer-events: none;
+  width: 200px;
+  height: 200px;
+  user-select: none;
+  /* Prevents the image from being selected */
+  pointer-events: none;
 }

 .roulette-input {
-    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;
+  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;
 }

 .roulette-button {
-    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;
+  z-index: 100;
+  position: absolute;
+  width: 30%;
+  height: auto;
+  border: none;
+  border-radius: 5px;
+  color: rgb(2, 2, 2);
+  font-size: 16px;
+  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;
-}
+  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,87 +166,89 @@ const RouletteWheel = ({ isForRegister, onSign }) => {
        onTouchStart={handleTouchStart}
        style={{ transform: `rotate(${rotation}deg)` }}
      >
-        {!isForRegister ? (
-          <>
-            <input
-              className={`roulette-input ${
-                isVisible(rotation % 360 !== -0) ? "" : "hidden"
-              }`}
-              placeholder="Username"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              ref={usernameInputRef}
-              style={{ transform: "translate(90%, -120%) rotate(0deg)" }}
-            />
-            <input
-              className={`roulette-input ${
-                isVisible(rotation % 360 !== -90) ? "" : "hidden"
-              }`}
-              placeholder="Password"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              ref={passwordInputRef}
-              style={{ transform: "translate(30%, 350%) rotate(90deg)" }}
-            />
-            <button
-              className={`roulette-input ${
-                isVisible(rotation % 360 !== -90) ? "" : "hidden"
-              }`}
-              onClick={handleSign}
-              onMouseDown={handleChildMouseDown}
-              onTouchStart={handleChildTouchStart}
-              style={{ transform: "translate(10%, 320%) rotate(90deg)" }}
-            >
-              Sign in
-            </button>
-          </>
-        ) : (
-          <>
-            <input
-              className={`roulette-input ${
-                isVisible(rotation % 360 !== -0) ? "" : "hidden"
-              }`}
-              placeholder="Email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              ref={emailInputRef}
-              style={{ transform: "translate(90%, -120%) rotate(0deg)" }}
-            />
-            <input
-              className={`roulette-input ${
-                isVisible(rotation % 360 !== -90) ? "" : "hidden"
-              }`}
-              placeholder="Username"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              ref={usernameInputRef}
-              style={{ transform: "translate(30%, 350%) rotate(90deg)" }}
-            />
-            <input
-              className={`roulette-input ${
-                isVisible(rotation % 360 !== -180) ? "" : "hidden"
-              }`}
-              placeholder="Password"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              ref={passwordInputRef}
-              style={{ transform: "translate(-90%, 115%) rotate(180deg)" }}
-            />
-            <button
-              className={`roulette-button ${
-                isVisible(rotation % 360 !== -180) ? "" : "hidden"
-              }`}
-              onClick={handleSign}
-              onMouseDown={handleChildMouseDown}
-              onTouchStart={handleChildTouchStart}
-              style={{ transform: "translate(-90%, 30%) rotate(180deg)" }}
-            >
-              Sign up
-            </button>
-          </>
-        )}
+        <input
+          className={`roulette-input ${
+            isVisible(rotation % 360 !== -0) ? "" : "hidden"
+          }`}
+          placeholder="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          ref={usernameInputRef}
+          style={{ transform: "translate(60%, -220%) rotate(0deg)" }}
+        />
+        <input
+          className={`roulette-input ${
+            isVisible(rotation % 360 !== -0) ? "" : "hidden"
+          }`}
+          placeholder="Password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          ref={passwordInputRef}
+          style={{ transform: "translate(90%, -90%) rotate(0deg)" }}
+        />
+        <button
+          className={`roulette-button  ${error ? "error" : ""}  ${
+            isVisible(rotation % 360 !== -0) ? "" : "hidden"
+          }`}
+          disabled={loading}
+          onClick={handleSignIn}
+          onMouseDown={handleChildMouseDown}
+          onTouchStart={handleChildTouchStart}
+          style={{ transform: "translate(110%, -10%) rotate(0deg)" }}
+        >
+          {loading ? (
+            <ThreeDots color="black" height={15} width={40} /> // Show loader when loading
+          ) : (
+            "Sign in"
+          )}
+        </button>
+        <input
+          className={`roulette-input ${
+            isVisible(rotation % 360 !== -90) ? "" : "hidden"
+          }`}
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          ref={emailInputRef}
+          style={{ transform: "translate(30%, 320%) rotate(90deg)" }}
+        />
+        <input
+          className={`roulette-input ${
+            isVisible(rotation % 360 !== -90) ? "" : "hidden"
+          }`}
+          placeholder="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          ref={usernameInputRef}
+          style={{ transform: "translate(10%, 320%) rotate(90deg)" }}
+        />
+        <input
+          className={`roulette-input ${
+            isVisible(rotation % 360 !== -90) ? "" : "hidden"
+          }`}
+          placeholder="Password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          ref={passwordInputRef}
+          style={{ transform: "translate(-10%, 320%) rotate(90deg)" }}
+        />
+        <button
+          className={`roulette-button  ${error ? "error" : ""} ${
+            isVisible(rotation % 360 !== -90) ? "" : "hidden"
+          } `}
+          onClick={handleSignUp}
+          onMouseDown={handleChildMouseDown}
+          onTouchStart={handleChildTouchStart}
+          style={{ transform: "translate(-60%, 320%) rotate(90deg)" }}
+        >
+          {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>