feat: make snackbar feature available to any component of the app

research-software-directory · Feb 4, 2022 · dc9f314 · dc9f314
1 parent b00df83
commit dc9f314
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 53 deletions.
diff --git a/frontend/components/software/CitationDoi.tsx b/frontend/components/software/CitationDoi.tsx
@@ -17,14 +17,21 @@ export default function CitationDoi({doi}:{doi:string}) {
         open:true,
         severity:'info',
         message:'Copied to clipboard',
-        duration: 3000
+        duration: 3000,
+        anchor: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        }
       })
     } else {
       setSnackbar({
         open:true,
         severity:'error',
         message:`Failed to copy doi ${doi} `,
-        duration: 7000
+        anchor: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        }
       })
     }
   }

diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
@@ -1,4 +1,4 @@
-import {useEffect} from 'react'
+import {useEffect, useState} from 'react'
 import router from 'next/router'
 import App, {AppContext} from 'next/app'
 import Head from 'next/head'
@@ -12,6 +12,9 @@ import nprogress from 'nprogress'
 // authentication
 import {AuthProvider, Session, getSessionSeverSide} from '../auth'
 import {saveLocationCookie} from '../utils/locationCookie'
+// snackbar notifications
+import PageSnackbar from '../components/snackbar/PageSnackbar'
+import PageSnackbarContext, {snackbarDefaults} from '../components/snackbar/PageSnackbarContext'
 
 // global CSS and tailwind
 import '../styles/global.css'
@@ -34,6 +37,8 @@ nprogress.configure({showSpinner:false})
 function RsdApp(props:MuiAppProps) {
   const {Component, emotionCache = clientSideEmotionCache, pageProps, session} = props
 
+  const [options, setSnackbar] = useState(snackbarDefaults)
+
   useEffect(()=>{
     router.events.on('routeChangeStart', ()=>{
       nprogress.start()
@@ -61,7 +66,10 @@ function RsdApp(props:MuiAppProps) {
         {/* CssBaseline from MUI-5*/}
         {/* <CssBaseline /> */}
         <AuthProvider session={session}>
-          <Component {...pageProps} />
+          <PageSnackbarContext.Provider value={{options, setSnackbar}}>
+            <Component {...pageProps} />
+          </PageSnackbarContext.Provider>
+          <PageSnackbar options={options} setOptions={setSnackbar} />
         </AuthProvider>
       </ThemeProvider>
     </CacheProvider>

diff --git a/frontend/pages/software/[slug]/edit.tsx b/frontend/pages/software/[slug]/edit.tsx
@@ -6,8 +6,6 @@ import Head from 'next/head'
 import {app} from '../../../config/app'
 import {useAuth} from '../../../auth'
 import ProtectedContent from '../../../auth/ProtectedContent'
-import PageSnackbar from '../../../components/snackbar/PageSnackbar'
-import PageSnackbarContext, {snackbarDefaults} from '../../../components/snackbar/PageSnackbarContext'
 import DefaultLayout from '../../../components/layout/DefaultLayout'
 import {editSoftwareMenu, EditSoftwarePageStep} from '../../../components/software/edit/editSoftwareSteps'
 import EditSoftwareNav from '../../../components/software/edit/EditSoftwareNav'
@@ -18,7 +16,7 @@ import {editSoftwareReducer} from '../../../components/software/edit/editSoftwar
 export default function SoftwareItemEdit() {
   const {session} = useAuth()
   const {token} = session
-  const [options, setSnackbar] = useState(snackbarDefaults)
+  // const [options, setSnackbar] = useState(snackbarDefaults)
   const router = useRouter()
   const slug = router.query['slug']
   const [pageState, dispatchPageState] = useReducer(editSoftwareReducer,{
@@ -31,7 +29,8 @@ export default function SoftwareItemEdit() {
     isValid: false
   })
 
-  // TODO! detecting route change does not work properly!!!
+  // TODO! detecting route change does not work properly
+  // further investigation needed
   // Router.events.on('routeChangeStart', () => {
   //   debugger
   //   console.log('SoftwareItemEdit...Router.on.routeChangeStart')
@@ -97,7 +96,6 @@ export default function SoftwareItemEdit() {
         <title>Edit software | {app.title}</title>
       </Head>
       <ProtectedContent slug={slug?.toString()}>
-        <PageSnackbarContext.Provider value={{options, setSnackbar}}>
         <EditSoftwareContext.Provider value={{pageState, dispatchPageState}}>
         <section className="md:flex">
           <EditSoftwareNav
@@ -107,8 +105,6 @@ export default function SoftwareItemEdit() {
           {renderStepComponent()}
         </section>
         </EditSoftwareContext.Provider>
-        </PageSnackbarContext.Provider>
-        <PageSnackbar options={options} setOptions={setSnackbar} />
       </ProtectedContent>
     </DefaultLayout>
   )

diff --git a/frontend/pages/software/[slug]/index.tsx b/frontend/pages/software/[slug]/index.tsx
@@ -13,8 +13,8 @@ import ContentInTheMiddle from '../../../components/layout/ContentInTheMiddle'
 import SoftwareIntroSection from '../../../components/software/SoftwareIntroSection'
 import GetStartedSection from '../../../components/software/GetStartedSection'
 import CitationSection from '../../../components/software/CitationSection'
-import PageSnackbar from '../../../components/snackbar/PageSnackbar'
-import PageSnackbarContext, {snackbarDefaults} from '../../../components/snackbar/PageSnackbarContext'
+// import PageSnackbar from '../../../components/snackbar/PageSnackbar'
+// import PageSnackbarContext, {snackbarDefaults} from '../../../components/snackbar/PageSnackbarContext'
 import AboutSection from '../../../components/software/AboutSection'
 import MentionsSection from '../../../components/software/MentionsSection'
 import ContributorsSection from '../../../components/software/ContributorsSection'
@@ -56,7 +56,7 @@ interface SoftwareIndexData extends ScriptProps{
 }
 
 export default function SoftwareIndexPage(props:SoftwareIndexData) {
-  const [options, setSnackbar] = useState(snackbarDefaults)
+  // const [options, setSnackbar] = useState(snackbarDefaults)
   const [resolvedUrl, setResolvedUrl] = useState('')
   const [author, setAuthor] = useState('')
   // extract data from props
@@ -111,47 +111,44 @@ export default function SoftwareIndexPage(props:SoftwareIndexData) {
       <CanoncialUrl
         canonicalUrl={resolvedUrl}
       />
-      <PageSnackbarContext.Provider value={{options,setSnackbar}}>
-        <AppHeader />
-        <PageContainer>
-          <SoftwareIntroSection
-            brand_name={software.brand_name}
-            short_statement={software.short_statement}
-            counts={softwareIntroCounts}
-          />
-        </PageContainer>
-        <GetStartedSection
-          get_started_url={software.get_started_url}
-          repository_url={software.repository_url}
-        />
-        <CitationSection
-          citationInfo={citationInfo}
-          concept_doi={software.concept_doi}
-        />
-        <AboutSection
+      <AppHeader />
+      <PageContainer>
+        <SoftwareIntroSection
           brand_name={software.brand_name}
-          description={software?.description ?? ''}
-          tags={tagsInfo}
-          licenses={licenseInfo}
-          repositories={software.repository_url}
-        />
-        <MentionsSection
-          mentions={mentions}
-        />
-        <TestimonialSection
-          testimonials={testimonials}
+          short_statement={software.short_statement}
+          counts={softwareIntroCounts}
         />
-        <ContributorsSection
-          contributors={contributors}
-        />
-        <RelatedToolsSection
-          relatedTools={relatedTools}
-        />
-        {/* bottom spacer */}
-        <section className="py-12"></section>
-        <AppFooter />
-      </PageSnackbarContext.Provider>
-      <PageSnackbar options={options} setOptions={setSnackbar} />
+      </PageContainer>
+      <GetStartedSection
+        get_started_url={software.get_started_url}
+        repository_url={software.repository_url}
+      />
+      <CitationSection
+        citationInfo={citationInfo}
+        concept_doi={software.concept_doi}
+      />
+      <AboutSection
+        brand_name={software.brand_name}
+        description={software?.description ?? ''}
+        tags={tagsInfo}
+        licenses={licenseInfo}
+        repositories={software.repository_url}
+      />
+      <MentionsSection
+        mentions={mentions}
+      />
+      <TestimonialSection
+        testimonials={testimonials}
+      />
+      <ContributorsSection
+        contributors={contributors}
+      />
+      <RelatedToolsSection
+        relatedTools={relatedTools}
+      />
+      {/* bottom spacer */}
+      <section className="py-12"></section>
+      <AppFooter />
     </>
   )
 }