User specific motd changes (again)

src/components/layout.js

@@ -15,14 +15,19 @@ const renderSnow = () => {
   return date.getMonth() === 11 && date.getDate() > 5
 }
 
-export default function Layout(props) {
-  let href = props.route
+export default function Layout({
+  children,
+  route,
+  globalData,
+  refetchGlobalData,
+}) {
+  let href = route
   const [sidebarOpen, setSidebarOpen] = useState(true)
   const [windowSize, setWindowSize] = useState([100, 200])
   const [showMotdModal, setShowMotdModal] = useState(false)
 
-  const userId = props.globalData.userId
-  const userSpecificMotd = props.globalData.userSpecificMotd
+  const userId = globalData.userId
+  const userSpecificMotd = globalData.userSpecificMotd
 
   if (href === '/' || href === '') {
     href = 'index'
@@ -99,19 +104,39 @@ export default function Layout(props) {
               </Link>
             </div>
             <div className="userStatus">
-              {userSpecificMotd ? (
-                <div
-                  onClick={() => {
-                    setShowMotdModal(true)
-                  }}
-                  style={{ cursor: 'pointer' }}
-                  title={"You've got Mail!"}
-                >
-                  📬
-                </div>
-              ) : (
-                <div>📭</div>
-              )}
+              <div
+                onClick={() => {
+                  setShowMotdModal(true)
+                  if (userSpecificMotd && userSpecificMotd.seen) {
+                    return
+                  }
+                  fetch(constants.apiUrl + 'infos', {
+                    method: 'POST',
+                    credentials: 'include',
+                    headers: {
+                      Accept: 'application/json',
+                      'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                      userSpecificMotdSeen: true,
+                    }),
+                  })
+                    .then((resp) => {
+                      return resp.json()
+                    })
+                    .then(() => {
+                      refetchGlobalData()
+                    })
+                }}
+                style={{ cursor: 'pointer' }}
+                title={
+                  userSpecificMotd && !userSpecificMotd.seen
+                    ? "You've got Mail!"
+                    : ''
+                }
+              >
+                {userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'}
+              </div>
               <div>User ID: {userId || '...'}</div>
             </div>
             {showMotdModal ? (
@@ -123,13 +148,13 @@ export default function Layout(props) {
                 <div style={{ textAlign: 'center' }}>
                   Üzenet az oldal készítőjétől:
                 </div>
-                <div>{userSpecificMotd}</div>
+                <div>{userSpecificMotd.msg}</div>
               </Modal>
             ) : null}
           </>
         ) : null}
       </div>
-      <div className="content">{props.children}</div>
+      <div className="content">{children}</div>
       <BB />
     </div>
   )

src/defaultStyles.css

@@ -63,7 +63,7 @@ a {
 }
 
 .userStatus :first-child {
-  font-size: 25px;
+  font-size: 45px;
 }
 
 .userStatus > div {

src/pages/_app.js

@@ -12,7 +12,7 @@ function MyApp({ Component, pageProps, router }) {
   const [motd, setMotd] = useState()
   const [userSpecificMotd, setUserSpecificMotd] = useState()
 
-  useEffect(() => {
+  const getGlobalProps = () => {
     fetch(`${constants.apiUrl}infos?motd=true`, {
       credentials: 'include',
       Accept: 'application/json',
@@ -26,6 +26,10 @@ function MyApp({ Component, pageProps, router }) {
         setMotd(data.motd)
         setUserSpecificMotd(data.userSpecificMotd)
       })
+  }
+
+  useEffect(() => {
+    getGlobalProps()
   }, [])
 
   const globalData = {
@@ -35,8 +39,17 @@ function MyApp({ Component, pageProps, router }) {
   }
 
   return (
-    <Layout route={router.route} globalData={globalData}>
-      <Component {...pageProps} router={router} globalData={globalData} />
+    <Layout
+      route={router.route}
+      globalData={globalData}
+      refetchGlobalData={getGlobalProps}
+    >
+      <Component
+        {...pageProps}
+        router={router}
+        globalData={globalData}
+        refetchGlobalData={getGlobalProps}
+      />
     </Layout>
   )
 }

src/pages/index.js

@@ -140,7 +140,7 @@ export default function Index(props) {
         {userSpecificMotd ? (
           <div
             className={styles.motd}
-            dangerouslySetInnerHTML={{ __html: userSpecificMotd }}
+            dangerouslySetInnerHTML={{ __html: userSpecificMotd.msg }}
           />
         ) : (
           <div>...</div>