[#1682] Project HIFI

package.json

@@ -21,8 +21,10 @@
     "axios": "^0.21.1",
     "clsx": "^1.1.1",
     "date-fns": "^2.16.1",
+    "fecha": "^4.2.1",
     "formik": "^2.2.2",
     "leaflet": "^1.7.1",
+    "linkifyjs": "^2.1.9",
     "lodash-es": "^4.17.15",
     "mdi-react": "^7.3.0",
     "normalize.css": "^8.0.1",
@@ -72,6 +74,7 @@
   },
   "devDependencies": {
     "@types/leaflet": "^1.5.19",
+    "@types/linkifyjs": "^2.1.3",
     "@types/lodash-es": "^4.17.3",
     "@types/qrcode": "^1.3.5",
     "@types/react-copy-to-clipboard": "^4.3.0",

src/apis/projects/api.ts

@@ -0,0 +1,39 @@
+import axios from 'axios';
+
+import {APIArrayResponse} from 'types/api';
+import {Project, Milestone} from 'types/projects';
+
+export async function getProjects(): Promise<Project[]> {
+  const response = await axios.get<APIArrayResponse<Project>>(`${process.env.REACT_APP_BACKEND_API}/projects`);
+
+  if (!response.data) {
+    throw new Error('Error while fetching projects, please try again.');
+  }
+  return response.data.results;
+}
+
+export async function getMilestones(): Promise<Milestone[]> {
+  const response = await axios.get<APIArrayResponse<Milestone>>(`${process.env.REACT_APP_BACKEND_API}/milestones`);
+  if (!response.data) {
+    throw new Error('Error while fetching milestones, please try again.');
+  }
+  return response.data.results;
+}
+
+export async function getMilestonesByProject(id: string): Promise<Milestone[]> {
+  const response = await axios.get<APIArrayResponse<Milestone>>(
+    `${process.env.REACT_APP_BACKEND_API}/milestones?project=${id}`,
+  );
+  if (!response.data) {
+    throw new Error('Error while fetching milestones, please try again.');
+  }
+  return response.data.results;
+}
+
+export async function getProjectMemberById(id: string) {
+  const response = await axios.get(`${process.env.REACT_APP_BACKEND_API}/project_members/${id}`);
+  if (!response.data) {
+    throw new Error('Error while fetching project member, please try again.');
+  }
+  return response.data;
+}

src/apis/projects/index.ts

@@ -0,0 +1 @@
+export * as api from './api';

src/apis/users/index.ts

@@ -1,6 +1,7 @@
 import axios from 'axios';
 
 import {standardHeaders} from 'utils/requests';
+import {User} from 'types/app/User';
 
 export async function createUser({
   display_name,
@@ -13,3 +14,11 @@ export async function createUser({
 }) {
   return axios.post(`${process.env.REACT_APP_BACKEND_API}/users`, {display_name, email, password}, standardHeaders());
 }
+
+export async function getUser({uuid}: {uuid: string}): Promise<User> {
+  const response = await axios.get<User>(`${process.env.REACT_APP_BACKEND_API}/users/${uuid}`);
+  if (!response.data) {
+    throw new Error('Error while fetching user. Please try again.');
+  }
+  return response.data;
+}

src/components/BreadcrumbMenu/BreadcrumbMenu.scss

@@ -1,3 +1,5 @@
+@import 'styles/z-index';
+
 $navigation-bars-height: 100px; // TopNav.height + BreadcrumbMenu__bar.height
 
 .BreadcrumbMenu {
@@ -31,7 +33,7 @@ $navigation-bars-height: 100px; // TopNav.height + BreadcrumbMenu__bar.height
     right: 0;
     top: $navigation-bars-height;
     width: 100vw;
-    z-index: 2;
+    z-index: $z-index-breadcrumb;
   }
 
   &__navigation {

src/components/Button/Button.scss

@@ -0,0 +1,34 @@
+.Button {
+  align-items: center;
+  display: inline-flex;
+  height: 40px;
+  outline: none;
+
+  &__empty {
+    background-color: var(--color-white);
+    border: 1px solid var(--color-white);
+    color: var(--color-primary);
+    transition: 0.2s;
+
+    &:hover {
+      background-color: var(--color-blue-50);
+      border: 1px solid var(--color-gray-200);
+    }
+  }
+
+  &__outlined {
+    background-color: var(--color-white);
+    border: 1px solid var(--color-gray-200);
+    color: var(--color-primary);
+  }
+
+  &__primary {
+    background-color: var(--color-primary);
+    border: none;
+    color: var(--color-white);
+  }
+
+  &--rounded {
+    border-radius: 100px;
+  }
+}

src/components/Button/index.tsx

@@ -0,0 +1,26 @@
+import React, {FC} from 'react';
+
+import clsx from 'clsx';
+
+import './Button.scss';
+
+type Props = {
+  className?: string;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+  onClick: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  rounded?: boolean;
+  type?: 'primary' | 'outlined' | 'empty';
+};
+
+const Button: FC<Props> = ({children, className, iconLeft, iconRight, onClick, rounded = false, type = 'primary'}) => {
+  return (
+    <button className={clsx('Button', `Button__${type}`, {'Button--rounded': rounded}, className)} onClick={onClick}>
+      {iconLeft && <div className="Button__icon-left">{iconLeft}</div>}
+      {children}
+      {iconRight && <div className="Button__icon-right">{iconRight}</div>}
+    </button>
+  );
+};
+
+export default Button;

src/components/FormElements/Button/Button.scss

@@ -1,4 +1,4 @@
-.Button {
+.FormButton {
   $self: &;
   border-radius: 3px;
   border-style: solid;

src/components/FormElements/Button/index.tsx

@@ -34,8 +34,8 @@ const Button: FC<BaseButtonProps> = ({
 
   return (
     <button
-      className={clsx('Button', `Button--${variant}`, `Button--${color}`, className, {
-        'Button--disabled': disabled,
+      className={clsx('FormButton', `FormButton--${variant}`, `FormButton--${color}`, className, {
+        'FormButton--disabled': disabled,
         ...bemify(className, `--${variant}`),
         ...bemify(className, `--${color}`),
         ...bemify(className, '--disabled', disabled),

src/components/GoToTop/GoToTop.scss

@@ -1,3 +1,5 @@
+@import 'styles/z-index';
+
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -19,5 +21,5 @@
   position: fixed;
   right: 24px;
   width: 36px;
-  z-index: 1000;
+  z-index: $z-index-go-to-top;
 }

src/components/Layout/Layout.scss

@@ -1,3 +1,5 @@
+@import 'styles/z-index';
+
 $top-nav-height: 60px;
 $footer-height: 348px;
 
@@ -30,6 +32,6 @@ $footer-height: 348px;
   &__top-nav-wrapper {
     position: sticky;
     top: 0;
-    z-index: 1;
+    z-index: $z-index-layout;
   }
 }

src/components/Modal/Modal.scss

@@ -1,3 +1,5 @@
+@import 'styles/z-index';
+
 $modal-header-height: 48px;
 $modal-header-height-mobile: 75px;
 $modal-footer-height: 60px;
@@ -100,7 +102,7 @@ $break-mobile: 640px;
     height: 100%;
     position: fixed;
     width: 100vw;
-    z-index: 20;
+    z-index: $z-index-modal;
 
     &__close-icon {
       left: 23px;