migrate all service to ecomm-service

.env

@@ -2,9 +2,9 @@ NEXT_PUBLIC_LOGIN_URL='https://ecomm-service.herokuapp.com/login'
 NEXT_PUBLIC_REGISTER_URL='https://ecomm-service.herokuapp.com/register'
 NEXT_PUBLIC_PROFILE_URL='https://ecomm-service.herokuapp.com/whoami'
 NEXT_PUBLIC_BANNER_BASE_URL='https://ecomm-service.herokuapp.com/marketing/type/banner'
-NEXT_PUBLIC_CAREER_BASE_URL='https://ecomm-db.herokuapp.com/api/jobs'
-NEXT_PUBLIC_PRODUCT_BASE_URL='https://ecomm-db.herokuapp.com/api/products'
-NEXT_PUBLIC_PRODUCT_COMMENT_BASE_URL='https://ecomm-db.herokuapp.com/api/comments'
+NEXT_PUBLIC_CAREER_BASE_URL='https://ecomm-service.herokuapp.com/job'
+NEXT_PUBLIC_PRODUCT_BASE_URL='https://ecomm-service.herokuapp.com/product'
+NEXT_PUBLIC_PRODUCT_COMMENT_BASE_URL='https://ecomm-service.herokuapp.com/product/comment'
 NEXT_PUBLIC_UPLOAD_SERVICE_BASE_URL='https://ecomm-service.herokuapp.com/file/upload'
 NEXT_PUBLIC_CHAT_URL='wss://ecomm-service.herokuapp.com'
 NEXT_PUBLIC_GLOBAL_CHATROOM_URL='https://ecomm-service.herokuapp.com/chat/room'

package.json

@@ -32,7 +32,8 @@
     "start": "next start",
     "build": "next build",
     "test": "jest",
-    "test:ci": "jest --coverage --ci --watchAll=false",
+    "test:ci": "jest --coverage --ci --watchAll=false --runInBand",
+    "typecheck": "tsc",
     "format": "prettier --write src",
     "start:docs": "styleguidist server",
     "build:docs": "styleguidist build",
@@ -104,4 +105,4 @@
       "src/pages/api/__coverage__.js"
     ]
   }
-}
+}

src/modules/career/__mocks__/career.data.ts

@@ -2,7 +2,7 @@ import { Job } from '../career.type';
 
 export const careers: Job[] = [
   {
-    id: 404,
+    _id: '404',
     title: 'Web Designer',
     department: 'UI / UX Design',
     level: 'experienced',
@@ -25,7 +25,7 @@ export const careers: Job[] = [
     ],
   },
   {
-    id: 403,
+    _id: '403',
     title: 'Customer Service Agent',
     department: 'Operations',
     level: 'entry',
@@ -50,7 +50,7 @@ export const careers: Job[] = [
     ],
   },
   {
-    id: 200,
+    _id: '200',
     title: 'Janitor',
     department: 'Health/Wellfare',
     level: 'experienced',
@@ -70,7 +70,7 @@ export const careers: Job[] = [
     ],
   },
   {
-    id: 500,
+    _id: '500',
     title: 'GitHub Issue Commentor',
     department: 'Engineering',
     level: 'internship',
@@ -87,7 +87,7 @@ export const careers: Job[] = [
     ],
   },
   {
-    id: 700,
+    _id: '700',
     title: 'Recruiter',
     department: 'Human Resources',
     level: 'experienced',
@@ -105,7 +105,7 @@ export const careers: Job[] = [
     ],
   },
   {
-    id: 3,
+    _id: '3',
     title: 'Slack Chatter',
     department: 'Engineering',
     level: 'entry',
@@ -122,7 +122,7 @@ export const careers: Job[] = [
     ],
   },
   {
-    id: 36,
+    _id: '36',
     title: 'Memer',
     department: 'UI / UX Design',
     level: 'experienced',

src/modules/career/career.service.ts

@@ -14,7 +14,7 @@ export const getJobs = () =>
     Job[]
   >;
 
-export const getJob = (jobId: number) =>
+export const getJob = (jobId: string) =>
   fetch(`${CAREER_BASE_URL}/${jobId}`, fetchOptions).then((res) =>
     res.json()
   ) as Promise<Job>;

src/modules/career/career.type.ts

@@ -1,5 +1,5 @@
 export type Job = {
-  id: number;
+  _id: string;
   title: string;
   department: string;
   level: 'internship' | 'entry' | 'experienced' | 'manager';

src/modules/career/components/all-jobs.tsx

@@ -10,7 +10,7 @@ export const AllJobs = (props: { jobs: Job[] }) => {
         items={props.jobs.map((job) => ({
           label: job.title,
           href: '/careers/[jobId]',
-          as: `/careers/${job.id}`,
+          as: `/careers/${job._id}`,
         }))}
       />
     </div>

src/modules/cart/cart.slice.ts

@@ -16,7 +16,7 @@ const cartSlice = createSlice({
       }: PayloadAction<{ product: CartItem['product']; qty?: number }>
     ) => {
       const itemIndex = state.items.findIndex(
-        (item) => item.product.id === product.id
+        (item) => item.product._id === product._id
       );
 
       if (itemIndex > -1) {

src/modules/cart/components/cart-item.tsx

@@ -24,19 +24,19 @@ export function CartItem({
   return (
     <div className="mb-2 pb-2 border-b border-gray-300">
       <div className="flex justify-between items-center">
-        <Link href="/product/[pid]" as={`/product/${item.product.id}`}>
+        <Link href="/product/[pid]" as={`/product/${item.product._id}`}>
           <a className="text-blue-700">
             #{index + 1} {item.product.name}
           </a>
         </Link>
         <Button
           onClick={onDelete}
           size="sm"
-          aria-labelledby={`${item.product.id}-remove-label`}
+          aria-labelledby={`${item.product._id}-remove-label`}
         >
           <CloseIcon width={36} className="fill-current text-gray-500" />
         </Button>
-        <span className="sr-only" id={`${item.product.id}-remove-label`}>
+        <span className="sr-only" id={`${item.product._id}-remove-label`}>
           Remove {item.product.name}
         </span>
       </div>

src/modules/cart/components/cart-table-item.tsx

@@ -37,7 +37,7 @@ export function CartTableItem({
         )}
       </td>
       <td className="px-2">
-        <Link href="/product/[pid]" as={`/product/${item.product.id}`}>
+        <Link href="/product/[pid]" as={`/product/${item.product._id}`}>
           <a className="text-blue-700">{item.product.name}</a>
         </Link>
       </td>
@@ -48,19 +48,19 @@ export function CartTableItem({
           color="primary"
           size="sm"
           disabled={item.qty === 1}
-          data-testid={`reduce-${item.product.id}`}
+          data-testid={`reduce-${item.product._id}`}
           aria-label="Reduce Quantity"
         >
           -
         </Button>
-        <span className="mx-1" data-testid={`qty-for-${item.product.id}`}>
+        <span className="mx-1" data-testid={`qty-for-${item.product._id}`}>
           {item.qty}
         </span>
         <Button
           onClick={onIncrement}
           color="primary"
           size="sm"
-          data-testid={`add-${item.product.id}`}
+          data-testid={`add-${item.product._id}`}
           aria-label="Increase Quantity"
         >
           +
@@ -74,12 +74,12 @@ export function CartTableItem({
         <Button
           onClick={onDelete}
           size="sm"
-          data-testid={`remove-${item.product.id}`}
-          aria-labelledby={`${item.product.id}-remove-label`}
+          data-testid={`remove-${item.product._id}`}
+          aria-labelledby={`${item.product._id}-remove-label`}
         >
           <CloseIcon width={36} className="fill-current text-gray-500" />
         </Button>
-        <span className="sr-only" id={`${item.product.id}-remove-label`}>
+        <span className="sr-only" id={`${item.product._id}-remove-label`}>
           Remove {item.product.name}
         </span>
       </td>

src/modules/products/__mocks__/product.service.ts

@@ -1,6 +1,6 @@
 export const PRODUCT_DB = [
   {
-    id: 1,
+    _id: '1',
     name: 'iPhone X',
     descriptions: ['user-friendly', 'change the world', 'cool', 'expensive'],
     image: 'iphone-x.jpg',
@@ -15,9 +15,10 @@ export const PRODUCT_DB = [
       blur: 'i-phone-x.blur.600x600.jpeg',
       thumbBlur: 'i-phone-x.thumbBlur.188x188.jpeg',
     },
+    createdAt: '2020-05-25T11:26:01.399Z',
   },
   {
-    id: 2,
+    _id: '2',
     name: 'Samsung Galaxy S10',
     descriptions: ['big', 'heavy', 'expensive'],
     image: 'samsung-galaxy-s10.jpg',
@@ -32,9 +33,10 @@ export const PRODUCT_DB = [
       blur: 'samsung-galaxy-s10.blur.600x600.jpeg',
       thumbBlur: 'samsung-galaxy-s10.thumbBlur.188x188.jpeg',
     },
+    createdAt: '2020-05-25T11:26:01.399Z',
   },
   {
-    id: 3,
+    _id: '3',
     name: 'Daniel Wellington Classic Cambridge',
     descriptions: ['pretty', 'elegent', 'expensive'],
     image: 'dw-watch.png',
@@ -50,16 +52,18 @@ export const PRODUCT_DB = [
       blur: 'daniel-wellington-classic-cambridge.blur.600x600.jpeg',
       thumbBlur: 'daniel-wellington-classic-cambridge.thumbBlur.188x188.jpeg',
     },
+    createdAt: '2020-05-25T11:26:01.399Z',
   },
   {
-    id: 4,
+    _id: '4',
     name: 'dodo',
     descriptions: [],
     image: 'dono.png',
     department: 'Food',
     price: '2.50',
     related: [],
     images: null,
+    createdAt: '2020-05-25T11:26:01.399Z',
   },
   {
     id: 1552750775126,

src/modules/products/components/product-box-container.tsx

@@ -3,7 +3,7 @@ import { useProductDetails } from '../product.queries';
 import { ProductBox } from './product-box';
 
 type ProductBoxContainerProps = {
-  productId: number;
+  productId: string;
   className?: string;
 };
 

src/modules/products/components/product-box.tsx

@@ -7,7 +7,7 @@ import styles from './product-box.module.scss';
 import { ProductImage } from './product-image';
 
 export function ProductBox({
-  id,
+  _id,
   name,
   images,
   price,
@@ -18,7 +18,7 @@ export function ProductBox({
       color="default"
       className={cx(styles.productBox, className)}
       renderContainer={(props) => (
-        <Link href="/product/[productId]" as={`/product/${id}`}>
+        <Link href="/product/[productId]" as={`/product/${_id}`}>
           <a {...props} data-testid="productBox" />
         </Link>
       )}

src/modules/products/components/product-comment-form.tsx

@@ -11,7 +11,7 @@ import { connect, ConnectedProps } from 'react-redux';
 import { RootState } from 'type';
 import { useAddProductComment } from '../product.queries';
 
-type ReduxProps = ConnectedProps<typeof connector> & { productId: number };
+type ReduxProps = ConnectedProps<typeof connector> & { productId: string };
 
 function ProductCommentFormContent({ productId, user }: ReduxProps) {
   const defaultName = (user && user.name) || '';
@@ -27,8 +27,7 @@ function ProductCommentFormContent({ productId, user }: ReduxProps) {
     mutate({
       userName,
       content,
-      productId,
-      createdOn: Date.now(),
+      rating: 5,
     }).then(() => {
       setContent('');
       setUserName(defaultName);

src/modules/products/components/product-comments.tsx

@@ -1,23 +1,23 @@
 import { Spinner } from 'components/spinner';
 import format from 'date-fns/format';
 import * as React from 'react';
-import { useProductComments } from '../product.queries';
+import { ProductComment } from '../product.type';
 import { ProductCommentForm } from './product-comment-form';
 
-function ProductComment({
+function Comment({
   userName,
   content,
-  createdOn,
+  createdAt,
 }: {
   userName: string;
   content: string;
-  createdOn: number;
+  createdAt: string;
 }) {
   return (
     <div className="py-2">
       <div className="product-comment-info">
         <strong>{userName}</strong> reviewed on{' '}
-        {format(new Date(createdOn), 'DD MMM YY')}
+        {format(new Date(createdAt), 'DD MMM YY')}
       </div>
       <div className="whitespace-pre-wrap">
         <p>{content}</p>
@@ -27,17 +27,16 @@ function ProductComment({
 }
 
 type ProductCommentsProps = {
-  productId: number;
+  productId: string;
+  comments: ProductComment[];
 };
 
-export function ProductComments({ productId }: ProductCommentsProps) {
-  const { data: comments } = useProductComments(productId);
-
+export function ProductComments({ productId, comments }: ProductCommentsProps) {
   return comments ? (
     <>
       <div className="mb-3">
         {comments.map((comment) => (
-          <ProductComment {...comment} key={comment.id} />
+          <Comment {...comment} key={comment._id} />
         ))}
         {comments.length === 0 && (
           <p>There is no review for this product yet.</p>