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>
   )