Add new career feature implementation

src/assets/styles.scss

@@ -2,6 +2,7 @@
 
 a {
  color: $purpleColor;
+ cursor: pointer;
  text-decoration: none;
 
  &:hover {

src/assets/variables.scss

@@ -1,5 +1,5 @@
 $footerHeight: 2vh;
 $headerHeight: 5vh;
-$padding-lg: 5em;
-$padding-md: 2.5em;
+$padding-lg: 10em;
+$padding-md: 5em;
 $padding-sm: 1em;

src/client/app/http-client.ts

@@ -1,12 +1,12 @@
 import type { KyInstance } from 'ky-universal';
 import ky from 'ky-universal';
-import { PORT } from 'src/common/common-constants';
+import { API_URL } from 'src/common/common-constants';
 
 export const httpClient: KyInstance = ky.create({
  headers: {
  'Content-Type': 'application/json',
  },
- prefixUrl: `http://localhost:${PORT}/api`,
+ prefixUrl: API_URL,
  retry: 0,
 });
 

src/client/features/blog/BlogList.tsx

@@ -4,11 +4,11 @@ import BlogListItem from './BlogListItem';
 import { useBlogListQuery } from './hooks/use-blog-list-query';
 
 const BlogList = (): JSX.Element => {
- const { data: blogList = [], error, isLoading } = useBlogListQuery();
+ const { data: blogList = [], error, isFetching } = useBlogListQuery();
  return (
  <div className='ag-flexbox ag-flexColumn'>
  {error && <div>Failed to load</div>}
- {isLoading ? <div>Loading...</div> : blogList.map((item) => <BlogListItem key={item._id} item={item} />)}
+ {isFetching ? <div>Loading...</div> : blogList.map((item) => <BlogListItem key={item._id} item={item} />)}
  </div>
  );
 };

src/client/features/blog/BlogListItem.tsx

@@ -2,20 +2,21 @@ import type { JSX } from 'react';
 
 import { Button } from '@mui/base';
 import Link from 'next/link';
+import { BLOG_PAGE_URL } from 'src/common/common-constants';
 import { dayjs } from 'src/common/common-date';
 
 import { BlogListItemProps } from './blog-types';
 import styles from './BlogListItem.module.scss';
 
 const BlogListItem = ({ item }: BlogListItemProps): JSX.Element => {
- const { _id: blogId, date, title, link, linkCaption } = item;
+ const { _id: itemId, date, title, link, linkCaption } = item;
  return (
- <div className={`ag-flexbox ag-justifyContent-between ${styles.container}`} key={blogId}>
+ <div className={`ag-flexbox ag-justifyContent-between ${styles.container}`} key={itemId}>
  <div>{dayjs(date).utc().format('MMMM DD, YYYY')}</div>
  <div>{title}</div>
  <div>{link}</div>
  <div>{linkCaption}</div>
- <Link href={`/blog/${blogId}`}>
+ <Link href={`${BLOG_PAGE_URL}/${itemId}`}>
  <Button>Open</Button>
  </Link>
  </div>

src/client/features/blog/blog-api.ts

@@ -1,18 +1,17 @@
 import httpClient from 'src/client/app/http-client';
-import type { IBlog, IBlogDTO } from 'src/common/types/common-blog-types';
+import type { BlogDTO, BlogModel } from 'src/common/types/common-blog-types';
 
-export const blogListRequest = async (): Promise<IBlog[]> => {
- const blogListDTO = await httpClient.get('blog').json<IBlogDTO[]>();
- return blogListDTO.map((item) => ({
- ...item,
- date: new Date(item.date),
- }));
+const blogItemAdapter = (dto: BlogDTO): BlogModel => ({
+ ...dto,
+ date: new Date(dto.date),
+});
+
+export const blogListRequest = async (): Promise<BlogModel[]> => {
+ const dto = await httpClient.get('blog').json<BlogDTO[]>();
+ return dto.map(blogItemAdapter);
 };
 
-export const blogRequest = async (id: string): Promise<IBlog> => {
- const blogDTO = await httpClient.get(`blog/${id}`).json<IBlogDTO>();
- return {
- ...blogDTO,
- date: new Date(blogDTO.date),
- };
+export const blogItemRequest = async (id: string): Promise<BlogModel> => {
+ const dto = await httpClient.get(`blog/${id}`).json<BlogDTO>();
+ return blogItemAdapter(dto);
 };

src/client/features/blog/blog-types.ts

@@ -1,5 +1,5 @@
-import { IBlog } from 'src/common/types/common-blog-types';
+import { BlogModel } from 'src/common/types/common-blog-types';
 
 export interface BlogListItemProps {
- item: IBlog;
+ item: BlogModel;
 }

src/client/features/blog/hooks/use-blog-list-query.ts

@@ -1,17 +1,21 @@
 import type { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 
-import { IBlog } from '../../../../common/types/common-blog-types';
+import { BlogModel } from '../../../../common/types/common-blog-types';
 import { blogListRequest } from '../blog-api';
 import { BLOG_LIST_QUERY_KEY } from '../blog-constants';
 
 export const useBlogListQuery = (
- { refetchOnMount = false, enabled = false, ...restProps }: Omit<UseQueryOptions<IBlog[]>, 'queryKey' | 'queryFn'> = {
+ {
+ refetchOnMount = false,
+ enabled = false,
+ ...restProps
+ }: Omit<UseQueryOptions<BlogModel[]>, 'queryKey' | 'queryFn'> = {
  enabled: false,
  refetchOnMount: false,
  }
-): UseQueryResult<IBlog[]> =>
- useQuery<IBlog[]>({
+): UseQueryResult<BlogModel[]> =>
+ useQuery<BlogModel[]>({
  ...restProps,
  enabled: enabled,
  queryFn: blogListRequest,

src/client/features/career/CareerList.tsx

@@ -0,0 +1,16 @@
+import type { JSX } from 'react';
+
+import CareerListItem from './CareerListItem';
+import { useCareerListQuery } from './hooks/use-career-list-query';
+
+const CareerList = (): JSX.Element => {
+ const { data: careerList = [], error, isFetching } = useCareerListQuery();
+ return (
+ <div className='ag-flexbox ag-flexColumn'>
+ {error && <div>Failed to load</div>}
+ {isFetching ? <div>Loading...</div> : careerList.map((item) => <CareerListItem key={item._id} item={item} />)}
+ </div>
+ );
+};
+
+export default CareerList;

src/client/features/career/CareerListItem.module.scss

@@ -0,0 +1,5 @@
+@import 'src/assets/variables';
+
+.container {
+ padding: $padding-sm 0;
+}

src/client/features/career/CareerListItem.tsx

@@ -0,0 +1,31 @@
+import type { JSX } from 'react';
+
+import { Button } from '@mui/base';
+import Link from 'next/link';
+import { CAREER_PAGE_URL } from 'src/common/common-constants';
+import { dayjs } from 'src/common/common-date';
+
+import { CareerListItemProps } from './career-types';
+import styles from './CareerListItem.module.scss';
+
+const CareerListItem = ({ item }: CareerListItemProps): JSX.Element => {
+ const { _id: itemId, endDate, description, post, site, startDate, title, tools } = item;
+ return (
+ <div className={`ag-flexbox ag-justifyContent-between ${styles.container}`} key={itemId}>
+ <div>{title}</div>
+ <div>
+ <span>{dayjs(startDate).utc().format('MMMM DD, YYYY')}</span>
+ {endDate ? <span> - {dayjs(endDate).utc().format('MMMM DD, YYYY')}</span> : null}
+ </div>
+ <div>{post}</div>
+ <div>{site}</div>
+ <div>{description}</div>
+ <div>{tools}</div>
+ <Link href={`${CAREER_PAGE_URL}/${itemId}`}>
+ <Button>Open</Button>
+ </Link>
+ </div>
+ );
+};
+
+export default CareerListItem;

src/client/features/career/career-api.ts

@@ -0,0 +1,18 @@
+import httpClient from 'src/client/app/http-client';
+import { CareerDTO, CareerModel } from 'src/common/types/common-career-types';
+
+const careerItemAdapter = (dto: CareerDTO): CareerModel => ({
+ ...dto,
+ endDate: dto.endDate && new Date(dto.endDate),
+ startDate: new Date(dto.startDate),
+});
+
+export const careerListRequest = async (): Promise<CareerModel[]> => {
+ const dto = await httpClient.get('career').json<CareerDTO[]>();
+ return dto.map(careerItemAdapter);
+};
+
+export const careerItemRequest = async (id: string): Promise<CareerModel> => {
+ const dto = await httpClient.get(`career/${id}`).json<CareerDTO>();
+ return careerItemAdapter(dto);
+};

src/client/features/career/career-constants.ts

@@ -0,0 +1,3 @@
+export const CAREER_LIST_QUERY_KEY = 'CAREER_LIST_QUERY_KEY';
+
+export const CAREER_ITEM_QUERY_KEY = 'CAREER_ITEM_QUERY_KEY';

src/client/features/career/career-types.ts

@@ -0,0 +1,5 @@
+import { CareerModel } from 'src/common/types/common-career-types';
+
+export interface CareerListItemProps {
+ item: CareerModel;
+}

src/client/features/career/hooks/use-career-list-query.ts

@@ -0,0 +1,24 @@
+import type { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import { CareerModel } from 'src/common/types/common-career-types';
+
+import { careerListRequest } from '../career-api';
+import { CAREER_LIST_QUERY_KEY } from '../career-constants';
+
+export const useCareerListQuery = (
+ {
+ refetchOnMount = false,
+ enabled = false,
+ ...restProps
+ }: Omit<UseQueryOptions<CareerModel[]>, 'queryKey' | 'queryFn'> = {
+ enabled: false,
+ refetchOnMount: false,
+ }
+): UseQueryResult<CareerModel[]> =>
+ useQuery<CareerModel[]>({
+ ...restProps,
+ enabled: enabled,
+ queryFn: careerListRequest,
+ queryKey: [CAREER_LIST_QUERY_KEY],
+ refetchOnMount: refetchOnMount,
+ });

src/client/features/summary/Summary.module.scss

@@ -0,0 +1,5 @@
+@import 'src/assets/variables';
+
+.link {
+ padding: $padding-sm 0;
+}

src/client/features/summary/Summary.tsx

@@ -0,0 +1,23 @@
+import type { JSX } from 'react';
+
+import Link from 'next/link';
+import { BLOG_PAGE_URL, CAREER_PAGE_URL } from 'src/common/common-constants';
+import ApiLink from 'src/common/components/ApiLink';
+
+import styles from './Summary.module.scss';
+
+const Summary = (): JSX.Element => (
+ <ul className='ag-flexbox ag-flexColumn'>
+ <li className={styles.link}>
+ <Link href={BLOG_PAGE_URL}>Blog page</Link>
+ </li>
+ <li className={styles.link}>
+ <Link href={CAREER_PAGE_URL}>Career page</Link>
+ </li>
+ <li className={styles.link}>
+ <ApiLink>API documentation page</ApiLink>
+ </li>
+ </ul>
+);
+
+export default Summary;

src/common/common-constants.ts

@@ -1,11 +1,21 @@
 export const isServer = typeof window === 'undefined';
-
 export const isDev = process.env.NODE_ENV === 'development';
-
+export const PROTOCOL = (isServer ? global.location?.protocol : window.location?.protocol) ?? 'http';
+export const HOST = (isServer ? global.location?.hostname : window.location?.hostname) ?? 'localhost';
 export const PORT = process.env.PORT || 3000;
+// protocol comes with ":" on client side
+export const API_URL = isServer ? `${PROTOCOL}://${HOST}:${PORT}/api` : `${PROTOCOL}//${HOST}:${PORT}/api`;
+// routes
+export const BLOG_PAGE_ID = 'blog';
+export const BLOG_PAGE_URL = `/${BLOG_PAGE_ID}`;
+export const CAREER_PAGE_ID = 'career';
+export const CAREER_PAGE_URL = `/${CAREER_PAGE_ID}`;
 
 if (isDev) {
  console.log('isServer', isServer);
  console.log('isDev', isDev);
+ console.log('PROTOCOL', PROTOCOL);
+ console.log('HOST', HOST);
  console.log('PORT', PORT);
+ console.log('API_URL', API_URL);
 }

src/common/components/ApiLink.tsx

@@ -0,0 +1,12 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+
+import { API_URL } from 'src/common/common-constants';
+import { WithClass } from 'src/common/types/common-types';
+
+const ApiLink = ({ children, className = '' }: PropsWithChildren<WithClass>): ReactElement => (
+ <a className={className} href={API_URL} target='_blank' rel='noopener noreferrer'>
+ {children}
+ </a>
+);
+
+export default ApiLink;

src/common/components/Navigation.module.scss

@@ -2,6 +2,7 @@
 
 .nav {
  height: $headerHeight;
+
  &Link {
  padding: $padding-sm;
  }

src/common/components/Navigation.tsx

@@ -1,25 +1,23 @@
 import type { ReactElement } from 'react';
 
 import Link from 'next/link';
+import { BLOG_PAGE_URL, CAREER_PAGE_URL } from 'src/common/common-constants';
 
+import ApiLink from './ApiLink';
 import styles from './Navigation.module.scss';
 
 const Navigation = (): ReactElement => (
  <nav className={`ag-flexbox ag-fullWidth ag-alignItems_center ag-justifyContent_center ${styles.nav}`}>
- <Link href='/'>
- <a className={styles.navLink}>Home</a>
- </Link>
- <Link href='/blog'>
- <a className={styles.navLink}>Blog</a>
- </Link>
- <Link href='/career'>
- <a className={styles.navLink}>Career</a>
- </Link>
- <Link href='/api'>
- <a className={styles.navLink} target='_blank' rel='noopener noreferrer'>
- API
- </a>
- </Link>
+ <span className={styles.navLink}>
+ <Link href='/'>Home</Link>
+ </span>
+ <span className={styles.navLink}>
+ <Link href={BLOG_PAGE_URL}>Blog</Link>
+ </span>
+ <span className={styles.navLink}>
+ <Link href={CAREER_PAGE_URL}>Career</Link>
+ </span>
+ <ApiLink className={styles.navLink}>API</ApiLink>
  </nav>
 );
 

src/common/types/common-blog-types.ts

@@ -1,15 +1,15 @@
-import { IBaseEntity } from './common-types';
+import { BaseEntity } from './common-types';
 
-export interface IBlogBase extends IBaseEntity {
+export interface BlogModelBase extends BaseEntity {
  link: string;
  linkCaption: string;
  title: string;
 }
 
-export interface IBlogDTO extends IBlogBase {
+export interface BlogDTO extends BlogModelBase {
  date: string;
 }
 
-export interface IBlog extends IBlogBase {
+export interface BlogModel extends BlogModelBase {
  date: Date;
 }

src/common/types/common-career-types.ts

@@ -0,0 +1,19 @@
+import { BaseEntity } from './common-types';
+
+export interface CareerModelBase extends BaseEntity {
+ description: string;
+ post: string;
+ site: string;
+ title: string;
+ tools: string;
+}
+
+export interface CareerDTO extends CareerModelBase {
+ endDate?: string;
+ startDate: string;
+}
+
+export interface CareerModel extends CareerModelBase {
+ endDate?: Date;
+ startDate: Date;
+}