Polished CSS, refactored useApi Query hook

nomuq · Jan 6, 2020 · a35b831 · a35b831
1 parent 64b237e
commit a35b831
Show file tree

Hide file tree

Showing 21 changed files with 127 additions and 407 deletions.
diff --git a/client/cypress/integration/issueDetails.spec.js b/client/cypress/integration/issueDetails.spec.js
@@ -69,9 +69,10 @@ describe('Issue details', () => {
 
     cy.get(testid`modal:tracking`).within(() => {
       cy.contains('No time logged').should('exist');
-      getNumberInputAtIndex(0).debounced('type', 1);
 
+      getNumberInputAtIndex(0).debounced('type', 1);
       cy.get('div[width="10"]').should('exist'); // tracking bar
+
       getNumberInputAtIndex(1).debounced('type', 2);
 
       cy.contains('button', 'Done')
@@ -124,7 +125,6 @@ describe('Issue details', () => {
   it('edits a comment successfully', () => {
     getIssueDetailsModal().within(() => {
       cy.get(testid`issue-comment`)
-        .first()
         .contains('Edit')
         .click()
         .should('not.exist');
@@ -139,7 +139,6 @@ describe('Issue details', () => {
         .should('not.exist');
 
       cy.get(testid`issue-comment`)
-        .first()
         .should('contain', 'Edit')
         .and('contain', 'TEST_COMMENT_EDITED');
     });
@@ -148,7 +147,6 @@ describe('Issue details', () => {
   it('deletes a comment successfully', () => {
     getIssueDetailsModal()
       .find(testid`issue-comment`)
-      .first()
       .contains('Delete')
       .click();
 

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -47,7 +47,7 @@
     "axios": "^0.19.0",
     "color": "^3.1.2",
     "core-js": "^3.4.7",
-    "formik": "^2.0.8",
+    "formik": "^2.1.1",
     "history": "^4.10.1",
     "jwt-decode": "^2.2.0",
     "lodash": "^4.17.15",

diff --git a/client/src/Project/Board/Lists/List/Issue/Styles.js b/client/src/Project/Board/Lists/List/Issue/Styles.js
@@ -16,6 +16,9 @@ export const Issue = styled.div`
   box-shadow: 0px 1px 2px 0px rgba(9, 30, 66, 0.25);
   transition: background 0.1s;
   ${mixin.clickable}
+  @media (max-width: 1100px) {
+    padding: 10px 8px;
+  }
   &:hover {
     background: ${color.backgroundLight};
   }
@@ -30,6 +33,9 @@ export const Issue = styled.div`
 export const Title = styled.p`
   padding-bottom: 11px;
   ${font.size(15)}
+  @media (max-width: 1100px) {
+    ${font.size(14.5)}
+  }
 `;
 
 export const Bottom = styled.div`

diff --git a/client/src/Project/Board/Lists/List/Styles.js b/client/src/Project/Board/Lists/List/Styles.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { color, font } from 'shared/utils/styles';
+import { color, font, mixin } from 'shared/utils/styles';
 
 export const List = styled.div`
   display: flex;
@@ -17,6 +17,7 @@ export const Title = styled.div`
   text-transform: uppercase;
   color: ${color.textMedium};
   ${font.size(12.5)};
+  ${mixin.truncateText}
 `;
 
 export const IssuesCount = styled.span`

diff --git a/client/src/Project/Board/Lists/List/index.jsx b/client/src/Project/Board/Lists/List/index.jsx
@@ -4,7 +4,6 @@ import moment from 'moment';
 import { Droppable } from 'react-beautiful-dnd';
 import { intersection } from 'lodash';
 
-import useCurrentUser from 'shared/hooks/currentUser';
 import { IssueStatusCopy } from 'shared/constants/issues';
 
 import Issue from './Issue';
@@ -14,11 +13,14 @@ const propTypes = {
   status: PropTypes.string.isRequired,
   project: PropTypes.object.isRequired,
   filters: PropTypes.object.isRequired,
+  currentUserId: PropTypes.number,
 };
 
-const ProjectBoardList = ({ status, project, filters }) => {
-  const { currentUserId } = useCurrentUser();
+const defaultProps = {
+  currentUserId: null,
+};
 
+const ProjectBoardList = ({ status, project, filters, currentUserId }) => {
   const filteredIssues = filterIssues(project.issues, filters, currentUserId);
   const filteredListIssues = getSortedListIssues(filteredIssues, status);
   const allListIssues = getSortedListIssues(project.issues, status);
@@ -77,5 +79,6 @@ const formatIssuesCount = (allListIssues, filteredListIssues) => {
 };
 
 ProjectBoardList.propTypes = propTypes;
+ProjectBoardList.defaultProps = defaultProps;
 
 export default ProjectBoardList;
diff --git a/client/src/Project/Board/Lists/index.jsx b/client/src/Project/Board/Lists/index.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { DragDropContext } from 'react-beautiful-dnd';
 
+import useCurrentUser from 'shared/hooks/currentUser';
 import api from 'shared/utils/api';
 import { moveItemWithinArray, insertItemIntoArray } from 'shared/utils/javascript';
 import { IssueStatus } from 'shared/constants/issues';
@@ -16,6 +17,8 @@ const propTypes = {
 };
 
 const ProjectBoardLists = ({ project, filters, updateLocalProjectIssues }) => {
+  const { currentUserId } = useCurrentUser();
+
   const handleIssueDrop = ({ draggableId, destination, source }) => {
     if (!isPositionChanged(source, destination)) return;
 
@@ -35,7 +38,13 @@ const ProjectBoardLists = ({ project, filters, updateLocalProjectIssues }) => {
     <DragDropContext onDragEnd={handleIssueDrop}>
       <Lists>
         {Object.values(IssueStatus).map(status => (
-          <List key={status} status={status} project={project} filters={filters} />
+          <List
+            key={status}
+            status={status}
+            project={project}
+            filters={filters}
+            currentUserId={currentUserId}
+          />
         ))}
       </Lists>
     </DragDropContext>

diff --git a/client/src/Project/IssueSearch/Styles.js b/client/src/Project/IssueSearch/Styles.js
@@ -4,7 +4,7 @@ import { color, font, mixin } from 'shared/utils/styles';
 import { InputDebounced, Spinner, Icon } from 'shared/components';
 
 export const IssueSearch = styled.div`
-  padding: 25px 35px;
+  padding: 25px 35px 60px;
 `;
 
 export const SearchInputCont = styled.div`

diff --git a/client/src/Project/Sidebar/Styles.js b/client/src/Project/Sidebar/Styles.js
@@ -3,15 +3,20 @@ import styled from 'styled-components';
 import { color, sizes, font, mixin, zIndexValues } from 'shared/utils/styles';
 
 export const Sidebar = styled.div`
-  position: absolute;
+  position: fixed;
   z-index: ${zIndexValues.navLeft - 1};
   top: 0;
   left: ${sizes.appNavBarLeftWidth}px;
   height: 100vh;
-  width: 240px;
-  padding: 0 16px;
+  width: ${sizes.secondarySideBarWidth}px;
+  padding: 0 16px 24px;
   background: ${color.backgroundLightest};
   border-right: 1px solid ${color.borderLightest};
+  ${mixin.scrollableY}
+  ${mixin.customScrollbar()}
+  @media (max-width: 1100px) {
+    width: ${sizes.secondarySideBarWidth - 10}px;
+  }
 `;
 
 export const ProjectInfo = styled.div`
@@ -67,18 +72,20 @@ export const LinkText = styled.div`
 `;
 
 export const NotImplemented = styled.div`
-  display: none;
+  display: inline-block;
   position: absolute;
-  top: 9px;
-  left: 101%;
-  width: 120px;
-  padding: 3px 0 3px 8px;
+  top: 7px;
+  left: 40px;
+  width: 140px;
+  padding: 5px 0 5px 8px;
   border-radius: 3px;
-  color: #fff;
-  background: #000;
-  ${font.size(12.5)};
-  ${font.medium}
+  text-transform: uppercase;
+  color: ${color.textDark};
+  background: ${color.backgroundMedium};
+  opacity: 0;
+  ${font.size(11.5)};
+  ${font.bold}
   ${LinkItem}:hover & {
-    display: inline-block;
+    opacity: 1;
   }
 `;
diff --git a/client/src/Project/Styles.js b/client/src/Project/Styles.js
@@ -2,6 +2,12 @@ import styled from 'styled-components';
 
 import { sizes } from 'shared/utils/styles';
 
+const paddingLeft = sizes.appNavBarLeftWidth + sizes.secondarySideBarWidth + 40;
+
 export const ProjectPage = styled.div`
-  padding: 25px 32px 0 ${sizes.appNavBarLeftWidth + sizes.secondarySideBarWidth + 40}px;
+  padding: 25px 32px 50px ${paddingLeft}px;
+
+  @media (max-width: 1100px) {
+    padding: 25px 20px 50px ${paddingLeft - 20}px;
+  }
 `;
diff --git a/client/src/index.jsx b/client/src/index.jsx
@@ -7,10 +7,3 @@ import ReactDOM from 'react-dom';
 import App from 'App';
 
 ReactDOM.render(<App />, document.getElementById('root'));
-
-// QUERY component cache-only doesn't work until first req finishes, look at currentUser on page load
-// APP IS NOT RESPONSIVE - REDUCE BROWSER HEIGHT, ISSUES DONT SCROLL
-// TODO: UPDATE FORMIK TO FIX SETFIELDVALUE TO EMPTY ARRAY ISSUE https://github.com/jaredpalmer/formik/pull/2144
-// REFACTOR HTML TO USE SEMANTIC ELEMENTS
-// MOVE SOME UTILS LIKE API TO SERVICES FOLDER
-// RENAME ISSUE DETAILS "USERS" TO ASSIGNEESREPORTER
diff --git a/client/src/shared/components/Modal/index.jsx b/client/src/shared/components/Modal/index.jsx
@@ -58,7 +58,14 @@ const Modal = ({
 
   useOnOutsideClick($modalRef, isOpen, closeModal, $clickableOverlayRef);
   useOnEscapeKeyDown(isOpen, closeModal);
-  useEffect(setBodyScrollLock, [isOpen]);
+
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = 'visible';
+    };
+  }, [isOpen]);
 
   return (
     <>
@@ -72,7 +79,6 @@ const Modal = ({
                 className={className}
                 variant={variant}
                 width={width}
-                data-jira-modal="true"
                 data-testid={testid}
                 ref={$modalRef}
               >
@@ -89,11 +95,6 @@ const Modal = ({
 
 const $root = document.getElementById('root');
 
-const setBodyScrollLock = () => {
-  const areAnyModalsOpen = !!document.querySelector('[data-jira-modal]');
-  document.body.style.overflow = areAnyModalsOpen ? 'hidden' : 'visible';
-};
-
 Modal.propTypes = propTypes;
 Modal.defaultProps = defaultProps;
 

diff --git a/client/src/shared/hooks/api/mutation.js b/client/src/shared/hooks/api/mutation.js
@@ -29,7 +29,13 @@ const useMutation = (method, url) => {
     [method, url, mergeState],
   );
 
-  return [{ ...state, [isWorkingAlias[method]]: state.isWorking }, makeRequest];
+  return [
+    {
+      ...state,
+      [isWorkingAlias[method]]: state.isWorking,
+    },
+    makeRequest,
+  ];
 };
 
 const isWorkingAlias = {