Post submission layout bug fixes and workspace hoisting

README.md

@@ -12,12 +12,16 @@ Additionally, the restful backend API can be viwed at [cheathub-backend.herokuap
 
 <br />
 
+## In Development 
+
 > [***Collaborate on this project***](https://github.com/israelias/cheathub/blob/master/CONTRIBUTING.md#)
 
 > [***Send feedback anonymously***](https://gvklqnr2996.typeform.com/to/xVAAK1V0)
 
 <br />
 
+> **Note:** Scripts in root `package.json` implement Yarn workspaces only to run development-specific scripts from root assuming all backend/frontend-specific configs have been set up. Running `yarn` from root has not yet been tested. For the meantime, `cd`ing to frontend and installing the React-App is the minimal reliable option to develop the app with a fixed and unchanging backend API. The backend `package.json` is solely for running python scripts from root. Backend API and data layer are superuser-specific given the production deployment, although local env variables are described in case anyone wants to locally serve a Mongo Atlas connection string from scratch. To be updated.
+
 [TOC levels=3]: # "## Contents"
 ## Contents
 - [UX](#ux)

frontend/README.md

@@ -6,7 +6,7 @@
 ## Running Frontend Locally
 The frontend directory can developed on its own as a standalone React App attached to the live backend API. The ORM spec is defined as types in `globals.d.ts`. All fetch handlers that communicate with the backend are in the `src/services` subdirectory. Please see `src/context` for their implementation in context providers via Hooks and Context API.
 
-> Note: Please `cd` to this directory from root until workspaces is implented. 
+> Note: Please `cd` to this directory from root until workspaces is implemented. 
 
 - `yarn install`
 - `yarn start`

frontend/src/components/collections/collection/index.tsx

@@ -25,6 +25,9 @@ import '../styles.css';
  *
  * A card/accordion counterpart of CollectionItem
  * Relies on State and setState props passed by Collection page.
+ *
+ * TODO Adjust text wrapping so title stays in one line
+ * TODO Adjust top margin in Collections primary page to be consistent with Snippets primary page
  * @see CollectionCrud
  * @file defines Collections page route
  * @since 2021-04-08

frontend/src/components/collections/crud/index.tsx

@@ -8,6 +8,7 @@ import {
   Box,
   Input,
   Flex,
+  useMediaQuery,
   useColorModeValue as mode,
 } from '@chakra-ui/react';
 import Select from 'react-select';
@@ -26,6 +27,7 @@ import { useProfileData } from '../../../context/profiledata.context';
  *
  * A form counterpart of CollectionItem
  * Relies on State and setState props passed by Collection page.
+ * TODO Update default value of MultiSelect
  * @see CollectionItem
  * @file defines Collection form.
  * @date 2021-05-03
@@ -57,6 +59,7 @@ const CollectionCrud: React.FC<{
 }) => {
   const { snippetsOptions } = useProfileData();
   const color = mode('light', 'dark');
+  const [baseLg] = useMediaQuery('(min-width: 62em)');
   // React.useEffect(() => {
   //   if (snippets.length < 1) {
   //     setSnippets([]);
@@ -241,7 +244,16 @@ const CollectionCrud: React.FC<{
         </MotionBar>
         <Box height="100%"> </Box>
       </AnimatePresence>
-      <Box position="sticky" width="100%" mt="auto" bottom={0}>
+      <Box
+        position="sticky"
+        // width="100%"
+        mt="auto"
+        pt="16px"
+        top="80vh"
+        ml={baseLg ? 0 : '-8px'}
+        mr={baseLg ? 0 : '-8px'}
+        bottom={0}
+      >
         <SecondaryFooter>
           {editing && (
             <MotionForm

frontend/src/components/shared/particulars.tsx

@@ -7,6 +7,8 @@ import {
   Heading,
 } from '@chakra-ui/react';
 
+// TODO Adjust footer horizontals in light-mode to have consistent bg color
+
 const PrimaryHeader: React.FC<{
   heading?: string;
   left?: boolean;
@@ -232,6 +234,10 @@ const SecondaryFooter: React.FC<{
       bottom={0}
       mt="auto"
       pt="auto"
+      // ml="-8px"
+      // mr="-16px"
+      // ml={baseLg ? 0 : '-8px'}
+      // mr={baseLg ? 0 : '-8px'}
       position="sticky"
       zIndex="banner"
     >

frontend/src/components/snippet/crud/index.tsx

@@ -26,6 +26,7 @@ import {
   Switch,
   Divider,
   useColorModeValue as mode,
+  useMediaQuery,
   Select,
 } from '@chakra-ui/react';
 
@@ -98,6 +99,7 @@ const SnippetCrud: React.FC<{
   handleCancel,
 }) => {
   const languages = [{ value: '', label: 'All' }, ...LANGUAGES];
+  const [baseLg] = useMediaQuery('(min-width: 62em)');
   return (
     <AnimatePresence exitBeforeEnter>
       <MotionBar
@@ -268,7 +270,16 @@ const SnippetCrud: React.FC<{
         </AnimatePresence>
       </MotionBar>
 
-      <Box position="sticky" width="100%" mt="auto" bottom={0}>
+      <Box
+        position="sticky"
+        // width="100%"
+        mt="auto"
+        pt="16px"
+        top="80vh"
+        ml={baseLg ? 0 : '-8px'}
+        mr={baseLg ? 0 : '-8px'}
+        bottom={0}
+      >
         {' '}
         <SecondaryFooter>
           {editing && (

frontend/src/containers/default.container.tsx

@@ -97,7 +97,7 @@ const Page: React.FC<{
         <Box
           display="flex"
           flexDirection="column"
-          mt="atuo"
+          mt="auto"
           mb="auto"
         >
           {baseLg ? (

frontend/src/context/collectionhandler.tsx

@@ -99,7 +99,7 @@ export function CollectionHandlerProvider({
 
   const clearValues = () => {
     setId('');
-    setName('Collection Name');
+    setName('');
     setSnippets([]);
   };
 

package.json

@@ -13,7 +13,9 @@
   "scripts": {
     "start": "concurrently \"yarn start:frontend\" \"yarn start:backend\"",
     "start:frontend": "yarn workspace @cheathub/frontend start",
-    "start:backend": "yarn workspace @cheathub/backend start"
+    "start:backend": "yarn workspace @cheathub/backend start",
+    "build:frontend": "yarn workspace @cheathub/frontend build",
+    "test:frontend": "yarn workspace @cheathub/frontend test"
   },
   "workspaces": [
     "frontend",