my-restaurants(owner)

---

들어가기
Owner로 접속을 했을때, restaurant를 create하는 page.
다음 page에서 file Upload를 알아본다.

---

0. src/router/logged-in-router.tsx

import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import Header from '../components/header'
import { UserRole } from '../graphql/__generated__'
import { useMe } from '../hooks/useMe'
import { NotFound } from '../pages/404'
import Category from '../pages/client/category'
import RestaurantDetail from '../pages/client/restaurantDetail'
import Restaurants from '../pages/client/restaurants'
import Search from '../pages/client/search'
import { Dashboard } from '../pages/driver/dashboard'
import AddDish from '../pages/owner/add-dish'
import AddRestaurant from '../pages/owner/add-restaurant'
import MyRestaurant from '../pages/owner/my-restaurant'
import MyRestaurants from '../pages/owner/my-restaurants'
import ConfirmEmail from '../pages/user/confirm-email'
import EditProfile from '../pages/user/edit-profile'
import { Order } from '../pages/user/order'

const clientRoutes = [
  { path: '/', element: <Restaurants /> },
  { path: '/search', element: <Search /> },
  { path: '/category/:slug', element: <Category /> },
  { path: '/restaurants/:id', element: <RestaurantDetail /> },
]

const commonRoutes = [
  { path: '/confirm', element: <ConfirmEmail /> },
  { path: '/edit-profile', element: <EditProfile /> },
  { path: '/orders/:id', element: <Order /> },
]
///owenr, client, driver 셋 모두에게 보여지는 page
///order는 세 role 모두에게 보이게 한다.

const ownerRoutes = [
  { path: '/', element: <MyRestaurants /> },
  { path: '/add-restaurant', element: <AddRestaurant /> },
  { path: '/restaurants/:id', element: <MyRestaurant /> },
  { path: '/restaurants/:restaurantId/add-dish', element: <AddDish /> },
]
///Owner로 login했을 시, 보여 질 page와 path를 지정해 놓는다.

const driverRoutes = [{ path: '/', element: <Dashboard /> }]

export const LoggedInRouter = () => {
  const { data, loading, error } = useMe()
  console.log(data)
  if (!data || loading || error) {
    return (
      <div className="h-screen flex justify-center items-center">
        <span className="font-medium text-xl tracking-wide">Loading..</span>
      </div>
    )
  }
  return (
    <>
      {/* <Header /> */}
      <Router>
        <Header />
        <Routes>
          {data.me.role === 'Client' &&
            clientRoutes.map((route, index) => (
              <Route key={index} path={route.path} element={route.element} />
            ))}
          {data.me.role === 'Owner' &&
            ownerRoutes.map((route, index) => (
              <Route key={index} path={route.path} element={route.element} />
            ))}
            ///role이 Owner일때만, 보여지는 page
            
          {data.me.role === UserRole.Delivery &&
            driverRoutes.map((route, index) => (
              <Route key={index} path={route.path} element={route.element} />
            ))}
          {commonRoutes.map((route, index) => (
            <Route key={index} path={route.path} element={route.element} />
          ))}
          <Route path="*" element={<NotFound />}></Route>
        </Routes>
      </Router>
    </>
  )
}

1. src/pages/owner/my-restaurants.tsx

import { gql, useQuery } from '@apollo/client'
import React from 'react'
import { Link } from 'react-router-dom'

import Restaurant from '../../components/restaurant'
import { RESTAURANT_FRAGMENT } from '../../fragments'
import {
  MyRestaurantsQuery,
  MyRestaurantsQueryVariables,
} from '../../graphql/__generated__'

export const MY_RESTAURANTS_QUERY = gql`
  query myRestaurants {
    myRestaurants {
      ok
      error
      restaurants {
        ...RestaurantParts
      }
    }
  }
  ${RESTAURANT_FRAGMENT}
`
///myRestaurants query를 server에서 가져온다.
///받는것은 fragment(RESTAURANT_FRAGMENT)로 만들어 놓음.

const MyRestaurants = () => {
  const { data } = useQuery<MyRestaurantsQuery, MyRestaurantsQueryVariables>(
    MY_RESTAURANTS_QUERY
  )
  ///useQuery사용해서 data 받아옴.

  return (
    <div>
      <div className="max-w-screen-2xl mx-auto mt-32">
        <h2 className="ml-5 text-4xl font-medium mb-10">My Restaurants</h2>
        <Link
          to="/add-restaurant"
          className="mb-20 text-xl text-white bg-green-300 px-5 py-5 ml-5 rounded-md hover:bg-green-600 "
        >
        ///버튼하나 만든다. createRestaurant버튼임.
        
          Create Restaurant &rarr;
        </Link>
        {data?.myRestaurants.ok &&
        data.myRestaurants.restaurants.length === 0 ? (
          <div className="ml-10">
            <h4 className="text-xl mb-5">You have not restaurants</h4>
            <Link
              className="text-green-300 hover:underline"
              to="/add-restaurant"
            >
              Create Restaurant &rarr;
            </Link>
          </div>
        ) : (
          <div className="mt-16 mb-30 grid md:grid-cols-3 gap-x-5 gap-y-10">
            {data?.myRestaurants.restaurants?.map((restaurant) => (
              <Restaurant
                key={restaurant.id}
                id={restaurant.id + ''}
                coverImg={restaurant.coverImg}
                name={restaurant.name}
                categoryName={restaurant.category?.name}
              />
            ))}
            ///components에 만들어 놓은 Restaurant Component
            ///에 props를 보내준다.
            
          </div>
        )}
      </div>
    </div>
  )
}

export default MyRestaurants

NOTICE!!!
Owner입장에서 나의 restaurants를 보는 page.
어려운거 없이 backend에 myRestaurants query를 불러만 주면 된다.

2.my-restaurant.dto.ts(server)

import { Field, ObjectType } from '@nestjs/graphql';
import { MutationOutput } from 'src/common/dtos/output.dto';
import { Restaurant } from '../entities/restaurant.entity';

@ObjectType()
export class MyRestaurantsOutput extends MutationOutput {
  @Field(() => [Restaurant])
  restaurants?: Restaurant[];
}

3.my-restaurant.resolver.ts(server)

@Query(() => MyRestaurantsOutput)
  @Role(['Owner'])
  myRestaurants(@AuthUser() owner: User): Promise<MyRestaurantsOutput> {
    return this.restaurantService.myrestaurants(owner);
  }

3.my-restaurant.service.ts(server)

  async myrestaurants(owner: User): Promise<MyRestaurantsOutput> {
    try {
      const restaurants = await this.restaurants.find({
        where: {
          owner: {
            id: owner.id,
          },
        },
      });
      return {
        restaurants,
        ok: true,
      };
    } catch {
      return {
        ok: false,
        error: 'Could not found restaurants',
      };
    }
  }