Merge pull request #92 from skorphil/87-previous-institutions-were-loaded

added new record initial state

Author: skorphil

components/InstitutionContainer/InstitutionContainer.jsx

@@ -29,10 +29,10 @@ export function InstitutionContainer({ institutionName, isInstitutionOpen }) {
 
   return (
     <VStack
-      bg="gray.800"
-      borderRadius={isInstitutionOpen || "lg"}
-      h="100%"
-      minHeight="100%"
+    // bg="gray.800"
+    // borderRadius={isInstitutionOpen || "lg"}
+    // h="100%"
+    // minHeight="100%"
     >
       {isInstitutionOpen && (
         <Box

components/InstitutionsList/InstitutionsList.jsx

@@ -2,7 +2,16 @@
 
 import { InstitutionsTabsList } from "../InstitutionsTabsList";
 import { InstitutionContainer } from "../InstitutionContainer";
-import { Tabs, TabPanels, TabPanel } from "@chakra-ui/react";
+import {
+  Tabs,
+  Text,
+  TabPanels,
+  TabPanel,
+  Center,
+  Heading,
+  VStack,
+  Image,
+} from "@chakra-ui/react";
 import { useVisualViewportSize } from "../../app/hooks";
 import classes from "./InstitutionsList.module.css";
 import { useFormContext } from "react-hook-form";
@@ -29,16 +38,11 @@ function InstitutionsList({
       variant="grid"
       padding={isInstitutionOpen || 2}
     >
-      <TabPanels flexGrow={1} flexShrink={1} h="200px">
-        {institutions.map((institution, index) => (
-          <TabPanel p={0} key={institution.id} h="100%">
-            <InstitutionContainer
-              institutionName={`institutions.${index}`}
-              isInstitutionOpen={isInstitutionOpen}
-            />
-          </TabPanel>
-        ))}
-      </TabPanels>
+      <ContentPanel
+        institutions={institutions}
+        selectedInstitution={selectedInstitution}
+        isInstitutionOpen={isInstitutionOpen}
+      />
       {isInstitutionOpen || (
         <InstitutionsTabsList
           simulateKeyboard={isKeyboardOpened}
@@ -51,3 +55,55 @@ function InstitutionsList({
 }
 
 export { InstitutionsList };
+
+function ContentPanel({
+  institutions,
+  selectedInstitution,
+  isInstitutionOpen,
+}) {
+  return (
+    <TabPanels
+      bg="gray.800"
+      borderRadius={isInstitutionOpen || "lg"}
+      h="100%"
+      minHeight="260px"
+      flexGrow={1}
+      flexShrink={1}
+    >
+      {selectedInstitution === null ? (
+        <ContentPanelOverlay
+          image="/institutions-loaded.svg"
+          headingText="Institutions loaded from latest&nbsp;record"
+          text="Edit institutions to reflect asset updates"
+        />
+      ) : (
+        false
+      )}
+      {institutions.map((institution, index) => (
+        <TabPanel p={0} key={institution.id} h="100%">
+          <InstitutionContainer
+            institutionName={`institutions.${index}`}
+            isInstitutionOpen={isInstitutionOpen}
+          />
+        </TabPanel>
+      ))}
+    </TabPanels>
+  );
+}
+
+function ContentPanelOverlay({ image, headingText, text }) {
+  return (
+    <Center h="100%" p={2}>
+      <VStack gap={12}>
+        <Image src={image} alt="Illustration" boxSize="140px" />
+
+        <VStack>
+          <Heading textAlign="center" size="md">
+            {headingText}
+          </Heading>
+          <Text>{text}</Text>
+        </VStack>
+      </VStack>
+    </Center>
+  );
+}

components/RecordForm/RecordForm.jsx

@@ -22,7 +22,8 @@ import { handleSavingSuccess, handleSavingError } from "./handlers";
 
 export function RecordForm() {
   const [isInstitutionOpen, setIsInstitutionOpen] = useState(false);
-  const [selectedInstitutionIndex, setSelectedInstitutionIndex] = useState(0);
+  const [selectedInstitutionIndex, setSelectedInstitutionIndex] =
+    useState(null);
   const [formOverlay, setFormOverlay] = useState(false);
   const [warningState, setWarningState] = useState(null);
   const toast = useToast({ position: "top" });