improve

Author: ehsanghaffar

.dockerignore

@@ -1,2 +1,7 @@
-node_modules
-npm-debug.log
+node_modules/
+.next/
+.build/
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.env

@@ -3,3 +3,4 @@
 
 ENV_VARIABLE="server_only_variable"
 NEXT_PUBLIC_ENV_VARIABLE="public_variable"
+DB_LOCAL_URL=mongodb://mongo:27017/denizpaz

.env.production

@@ -3,3 +3,4 @@
 
 PRODUCTION_ENV_VARIABLE="server_only_production_variable"
 NEXT_PUBLIC_PRODUCTION_ENV_VARIABLE="public_production_variable"
+DB_LOCAL_URL=mongodb://mongo:27017/denizpaz

Dockerfile

@@ -1,28 +1,23 @@
-# base image
-
 FROM node:18-alpine
 
-# create & set working directory
-
 RUN mkdir -p /usr/src/app
 
 WORKDIR /usr/src/app
 
-# copy source files
-
-COPY . /usr/src/app
-
-# install dependencies
+COPY package.json /usr/src/app/
 
 RUN npm install -g next
-RUN npm install -g @heroicons/react
 
 RUN npm install
 
-# start app
+COPY . /usr/src/app
 
 RUN npm run build
 
+COPY --chown=10101 ./public /usr/src/app/public
+
+ENV DB_LOCAL_URL=mongodb://mongo:27017/denizpaz
+
 EXPOSE 3000
 
 CMD npm run launch

app/api/recipes/get-single-recipe/route.ts

@@ -1,25 +1,24 @@
 import { NextResponse } from "next/server";
 import { Recipe } from "../../../../models";
 
+export const dynamic = 'force-dynamic'
 // ایجاد درخواست GET برای دریافت رسپی بر اساس آی‌دی
 export async function GET(req: Request) {
   try {
     const { searchParams } = new URL(req.url);
-    const id = searchParams.get('id');
-
-    if (!id) return NextResponse.json({ status: 400, success: false, message: 'Please provide recipe id.' });
+    const id = searchParams.get('id')
 
     const recipe = await Recipe.findOne({
       _id: id
     });
 
-    if (recipe) {
+    if (await recipe) {
       return NextResponse.json({ status: 200, data: recipe });
     } else {
       return NextResponse.json({ status: 204, success: false, message: 'No recipe found.' });
     }
   } catch (error) {
     console.log('Error in getting recipe by id:', error);
-    return NextResponse.json({ status: 500, success: false, message: 'Something went wrong. Please try again!' });
+    return NextResponse.json({ status: 500, success: false, message: error });
   }
 }

app/api/recipes/route.ts

@@ -51,7 +51,7 @@ export async function POST(req: Request) {
     console.log("recipe", newRecipe)
     const recipe = new Recipe(newRecipe);
     const save = await recipe.save();
-    return NextResponse.json(save);
+    return NextResponse.json({ status: 200, data: save });
   } catch (error) {
     console.log(error);
     return NextResponse.json('error', {

app/recipes/[id]/page.tsx

@@ -12,30 +12,22 @@ const SingleRecipe = () => {
     undefined
   );
 
-  // دریافت رسپی با استفاده از شناسه
+  useEffect(() => {
+     // دریافت رسپی با استفاده از شناسه
   const get_recipe_by_id = async (id: string) => {
     try {
       const res = await fetch(`/api/recipes/get-single-recipe?id=${id}`, {
         method: "GET",
-        // headers: {
-        //   "Content-Type": "application/json",
-        // },
       });
-
       const data = await res.json();
       setSingleRecipe(data.data);
-      return data;
     } catch (error) {
       console.log("Error in getting product by ID (service) =>", error);
     }
   };
-
-  useEffect(() => {
     get_recipe_by_id(id); // دریافت رسپی با استفاده از شناسه بعد از بارگذاری کامپوننت
   }, []);
 
-  console.log(singleRecipe); // نمایش اطلاعات رسپی در کنسول
-
   return (
     <>
       {/* استفاده از کامپوننت SingleRecipeTopSection برای نمایش بخش بالایی رسپی */}

app/recipes/create/page.tsx

@@ -19,6 +19,7 @@ export default function CreateRecipe() {
   const [singleIngredient, setSingleIngredient] = useState("");
   const [ingredients, setIngredients] = useState<Ingredients[]>([]);
   const [selectedPhoto, setSelectedPhoto] = useState<File | null>(null);
+  const [loading, setLoading] = useState(true)
 
   // تابع handlePhotoChange برای مدیریت تغییرات در ورودی عکس
   const handlePhotoChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -48,7 +49,7 @@ export default function CreateRecipe() {
   // تابع saveRecipe برای ارسال داده‌ها به سرور و ذخیره رسپی جدید
   const saveRecipe = async (event: FormEvent) => {
     event.preventDefault();
-
+    setLoading(true)
     if (selectedPhoto) {
       const formData = new FormData();
       formData.append("photo", selectedPhoto);
@@ -63,11 +64,13 @@ export default function CreateRecipe() {
       };
       try {
         const saveRecip = await fetch("/api/recipes", options);
-        console.log(saveRecip);
+        setLoading(false)
+        if (saveRecip.status === 200) {
+          console.log(saveRecip);
+        }
       } catch (error) {
+        setLoading(false)
         console.log(error);
-
-
       }
     }
   };
@@ -82,11 +85,10 @@ export default function CreateRecipe() {
               <div className="text-center w-full mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 z-20">
                 <h2 className="text-3xl font-extrabold text-black dark:text-white sm:text-4xl">
                   <span className="text-gray-600">
-                    اون رسپی که میخوای نیست؟
-                  </span>
-                  <span className="block text-indigo-500">
-                    خودت اضافه اش کن
+                    اضافه کردن رسپی جدید
                   </span>
+                  {/* <span className="block text-indigo-500">
+                  </span> */}
                 </h2>
               </div>
             </div>
@@ -182,7 +184,7 @@ export default function CreateRecipe() {
                   type="submit"
                   className="w-96 py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-cyan-700 text-white hover:bg-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 transition-all text-sm"
                 >
-                  <span>اضافه کن</span>
+                  <span>ساخت رسپی</span>
                 </Button>
               </div>
             </form>

components/RecipeCard.tsx

@@ -26,10 +26,10 @@ const RecipeCard = ({ recipe }: RecipeCardProps) => {
             className="rounded-t-lg w-full h-[220px]"
           />
           <div className="relative w-full p-4 bg-white">
-            <p className="mb-2 text-xl font-medium text-gray-800">
+            <p className="mb-2 text-lg font-medium text-gray-800">
               {recipe?.name}
             </p>
-            <p className="text-xs text-gray-600">{recipe?.description}</p>
+            <p className="text-xs text-gray-600">{recipe?.description.substring(0, 60)}...</p>
             <div className="flex flex-wrap items-center mt-6 justify-starts">
               <Button
                 type="button"

components/SingleRecipeMain.tsx

@@ -17,8 +17,6 @@ const SingleRecipeMain = ({
   recipeIngredients,
   recipeSteps,
 }: SingleRecipeMainProps) => {
-  // console.log(JSON.parse(recipeIngredients));
-
   return (
     <>
       <div className="md:container md:mx-auto">