From a75ef609c66cd2144d94b4cf8ded005dbd7b9355 Mon Sep 17 00:00:00 2001
From: Fatih20 <fnri39@protonmail.com>
Date: Thu, 16 Nov 2023 16:34:43 +0700
Subject: [PATCH] Initial work on gym pages.
---
.env | 2 +-
src/App.tsx | 6 ++++--
src/components/gym/GymCard.tsx | 29 +++++++++++++++++++++++++++++
src/pages/{ => gym}/Gym.tsx | 13 ++++++++-----
src/pages/gym/GymIndividual.tsx | 8 ++++++++
src/utils/config.ts | 1 +
6 files changed, 51 insertions(+), 8 deletions(-)
create mode 100644 src/components/gym/GymCard.tsx
rename src/pages/{ => gym}/Gym.tsx (50%)
create mode 100644 src/pages/gym/GymIndividual.tsx
diff --git a/.env b/.env
index e7d504f..0f25441 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,3 @@
VITE_NODE_JS_API=http://localhost:3000
VITE_NODE_JS_KEY=mbdmatkul4sks
-
+VITE_GYM_MEDIA_URL=http://localhost:8000/gym
diff --git a/src/App.tsx b/src/App.tsx
index 97ec592..70e09c3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,7 +13,8 @@ import HomeLayout from "@/components/HomeLayout";
import Register from "@/pages/Register";
import UserProvider from "@/utils/context/AuthProvider";
import Profile from "@/pages/Profile";
-import Gym from "@/pages/Gym";
+import Gym from "@/pages/gym/Gym";
+import GymIndividual from "@/pages/gym/GymIndividual";
const queryClient = new QueryClient();
const router = createBrowserRouter(
@@ -23,7 +24,8 @@ const router = createBrowserRouter(
<Route path="" element={<Home />} />
<Route path="/profile" element={<Profile />} />
<Route path="/applications" element={<Home />} />
- <Route path="/gyms" element={<Gym />} />
+ <Route path="/gyms" element={<Gym />}></Route>
+ <Route path="/gyms/:id" element={<GymIndividual />} />
</Route>
<Route element={<HomeLayout />}>
<Route path="/login" element={<Login />} />
diff --git a/src/components/gym/GymCard.tsx b/src/components/gym/GymCard.tsx
new file mode 100644
index 0000000..f052113
--- /dev/null
+++ b/src/components/gym/GymCard.tsx
@@ -0,0 +1,29 @@
+import config from "@/utils/config";
+import { GymReturned } from "@/utils/validationSchema/gym";
+import React from "react";
+import { Link } from "react-router-dom";
+
+function GymCard({
+ gym: { averageRating, cityName, monthlyPrice, name, pictureId, id },
+}: {
+ gym: GymReturned;
+}) {
+ return (
+ <Link to={`./${id}`}>
+ <article className="flex flex-col rounded-lg items-start justify-start bg-slate-600 text-white font-normal gap-2">
+ <img
+ src={`${config.GYM_MEDIA_URL}/${pictureId}.jpg`}
+ className="w-full rounded-t-lg self-center"
+ />
+ <div className="flex flex-col items-start justify-start px-4 pb-4">
+ <h3>{name}</h3>
+ <p>{cityName}</p>
+ <p>{`${averageRating} stars`}</p>
+ <p>{`${monthlyPrice}/month`}</p>
+ </div>
+ </article>
+ </Link>
+ );
+}
+
+export default GymCard;
diff --git a/src/pages/Gym.tsx b/src/pages/gym/Gym.tsx
similarity index 50%
rename from src/pages/Gym.tsx
rename to src/pages/gym/Gym.tsx
index a15c04b..6c63225 100644
--- a/src/pages/Gym.tsx
+++ b/src/pages/gym/Gym.tsx
@@ -1,5 +1,6 @@
+import GymCard from "@/components/gym/GymCard";
import { useAllGyms } from "@/utils/context/GymProvider";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
function Gym() {
const { allGyms, allGymsStatus } = useAllGyms();
@@ -12,10 +13,12 @@ function Gym() {
}
return (
- <div>
- {allGyms.map(({ id }) => (
- <p>{id}</p>
- ))}
+ <div className="w-full flex flex-col items-center justify-start py-4 lg:py-6">
+ <div className="grid gap-4 lg:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 max-w-7xl">
+ {allGyms.map((gym) => (
+ <GymCard gym={gym} key={gym.id} />
+ ))}
+ </div>
</div>
);
}
diff --git a/src/pages/gym/GymIndividual.tsx b/src/pages/gym/GymIndividual.tsx
new file mode 100644
index 0000000..41998b4
--- /dev/null
+++ b/src/pages/gym/GymIndividual.tsx
@@ -0,0 +1,8 @@
+import { useParams } from "react-router-dom";
+
+function GymIndividual() {
+ const { id } = useParams();
+ return <div>{id}</div>;
+}
+
+export default GymIndividual;
diff --git a/src/utils/config.ts b/src/utils/config.ts
index c8cfd87..3475dc7 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -1,6 +1,7 @@
const config = {
NODE_JS_API: import.meta.env.VITE_NODE_JS_API as string,
NODE_JS_KEY: import.meta.env.VITE_NODE_JS_KEY as string,
+ GYM_MEDIA_URL: import.meta.env.VITE_GYM_MEDIA_URL as string,
};
export default config;
--
GitLab