Added global header, refetch infos on window focus

This commit is contained in:
mrfry 2022-05-15 17:40:36 +02:00
parent 98164ff4fa
commit a8ec93a685
12 changed files with 47 additions and 55 deletions

21
src/components/header.js Normal file
View file

@ -0,0 +1,21 @@
import React from 'react'
import Head from 'next/head'
import { useQueryClient } from 'react-query'
export default function Header(props) {
const { title } = props
const queryClient = useQueryClient()
const globalData = queryClient.getQueryData(['infos'])
const unreadString =
globalData && globalData.unreads.length > 0
? `(${globalData.unreads.length}) `
: ''
const titleString = title ? `${title} - ` : ''
return (
<Head>
<title>{`${unreadString}${titleString}Qmining | Frylabs.net`}</title>
</Head>
)
}

View file

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'
import React, { useState } from 'react'
import { useQuery, QueryClientProvider, QueryClient } from 'react-query'
import Head from 'next/head'
@ -46,15 +46,11 @@ const getGlobalProps = () => {
function App({ Component, pageProps, router }) {
const [globalState, setGlobalState] = useState({})
const { data } = useQuery(['infos'], () => getGlobalProps(), {
refetchOnWindowFocus: true,
refetchOnWindowFocus: 'always',
})
const { motd, uid: userId, unreads } = data || {}
useEffect(() => {
getGlobalProps()
}, [])
const updateGlobalState = (newState) => {
setGlobalState({
...globalState,
@ -79,7 +75,7 @@ function App({ Component, pageProps, router }) {
<Layout
router={router}
globalData={globalData}
refetchGlobalData={getGlobalProps}
refetchGlobalData={() => queryClient.invalidateQueries(['infos'])}
setGlobalState={updateGlobalState}
globalState={globalState}
>
@ -87,7 +83,7 @@ function App({ Component, pageProps, router }) {
{...pageProps}
router={router}
globalData={globalData}
refetchGlobalData={getGlobalProps}
refetchGlobalData={() => queryClient.invalidateQueries(['infos'])}
setGlobalState={updateGlobalState}
globalState={globalState}
/>

View file

@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react'
import Head from 'next/head'
import Header from '../components/header'
import LoadingIndicator from '../components/LoadingIndicator.js'
import QuestionSearchResult from '../components/QuestionSearchResult.js'
import Subject from '../components/Subject.js'
@ -308,9 +308,7 @@ export default function AllQuestions({ router, globalState, setGlobalState }) {
return (
<div>
<Head>
<title>Kérdések és tárgyak - Qmining | Frylabs.net</title>
</Head>
<Header title={'Kérdések és tárgyak'} />
{dbs ? <>{renderDbSelector()}</> : <LoadingIndicator />}
{dbs && data ? (
<>

View file

@ -1,11 +1,11 @@
import React from 'react'
import Head from 'next/head'
import io from 'socket.io-client'
import linkifyString from 'linkify-string'
import constants from '../constants.json'
import LoadingIndicator from '../components/LoadingIndicator'
import { queryClient } from '../pages/_app'
import Header from '../components/header'
import styles from './chat.module.css'
@ -109,9 +109,6 @@ export default class Chat extends React.Component {
connected: false,
selectedUser: 0,
}
if (props.refetchGlobalData) {
props.refetchGlobalData()
}
if (props.globalData && !isNaN(props.globalData.userId)) {
this.state.user = props.globalData.userId
this.connect(this.props.globalData.userId)
@ -325,9 +322,6 @@ export default class Chat extends React.Component {
chatMessageSeen(chatPartner) {
const { msgs, user } = this.state
if (this.props.refetchGlobalData) {
this.props.refetchGlobalData()
}
this.socket.emit('chat message read', { chatPartner: chatPartner })
this.setState({
msgs: {
@ -670,9 +664,7 @@ export default class Chat extends React.Component {
return (
<div className={styles.chat}>
<Head>
<title>Chat - Qmining | Frylabs.net</title>
</Head>
<Header title={'Chat'} />
{connected ? (
<>
<div className={styles.main}>

View file

@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react'
import Head from 'next/head'
import Link from 'next/link'
import Header from '../components/header'
import FeedbackArea from '../components/feedbackArea'
import constants from '../constants.json'
import LoadingIndicator from '../components/LoadingIndicator'
@ -37,9 +37,7 @@ export default function Contact({ globalState, setGlobalState }) {
return (
<div>
<Head>
<title>Kapcsolat - Qmining | Frylabs.net</title>
</Head>
<Header title={'Kapcsolat'} />
<div className={'pageHeader'}>
<h1>Kapcsolat</h1>
</div>

View file

@ -1,9 +1,9 @@
import React, { useState } from 'react'
import Head from 'next/head'
import Todos from '../components/todoStuff/todos'
import FeedbackArea from '../components/feedbackArea'
import Modal from '../components/modal'
import Header from '../components/header'
import constants from '../constants.json'
import styles from './contribute.module.css'
@ -14,9 +14,7 @@ export default function Contribute({ globalState, setGlobalState }) {
return (
<div>
<Head>
<title>Todos - Qmining | Frylabs.net</title>
</Head>
<Header title={'Todos'} />
<div className={'pageHeader'}>
<h1>Teendők</h1>
</div>

View file

@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react'
import Link from 'next/link'
import Head from 'next/head'
import Header from '../components/header'
import constants from '../constants.json'
import styles from './faq.module.css'
@ -503,9 +503,7 @@ export default function FAQ({ router }) {
return (
<div>
<Head>
<title>GYIK - Qmining | Frylabs.net</title>
</Head>
<Header title={'GYIK'} />
<div className={'pageHeader'}>
<h1>Gyakran Ismételt Kérdések</h1>
</div>

View file

@ -1,11 +1,11 @@
import React, { useState, useEffect } from 'react'
import fetch from 'unfetch'
import Head from 'next/head'
import LoadingIndicator from '../components/LoadingIndicator'
import Sleep from '../components/sleep'
import NewsEntry from '../components/newsEntry'
import Composer from '../components/composer'
import Header from '../components/header'
import styles from './index.module.css'
import constants from '../constants.json'
@ -342,9 +342,7 @@ export default function Main({ globalData, globalState, setGlobalState }) {
return (
<div>
<Head>
<title>Qmining | Frylabs.net</title>
</Head>
<Header />
{renderMotd()}
<Sleep />
{renderNews()}

View file

@ -1,8 +1,9 @@
import React, { useState, useEffect } from 'react'
import fetch from 'unfetch'
import Head from 'next/head'
import Link from 'next/link'
import Header from '../components/header'
import styles from './pwRequest.module.css'
import constants from '../constants.json'
@ -96,9 +97,7 @@ export default function PwRequest({ globalData, globalState, setGlobalState }) {
return (
<div>
<Head>
<title>Jelszó generálás - Qmining | Frylabs.net</title>
</Head>
<Header title={'Jelszó generálás'} />
<div className={'pageHeader'}>
<h1>Jelszó generálás</h1>
</div>

View file

@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react'
import fetch from 'unfetch'
import Head from 'next/head'
import Header from '../components/header'
import LoadingIndicator from '../components/LoadingIndicator'
import styles from './ranklist.module.css'
@ -145,9 +145,7 @@ export default function RankList({ globalData, globalState, setGlobalState }) {
return (
<div>
<Head>
<title>Ranklista - Qmining | Frylabs.net</title>
</Head>
<Header title={'Ranklista'} />
<div className={styles.container}>
<div>
<center>

View file

@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react'
import React from 'react'
import { useQuery } from 'react-query'
import Head from 'next/head'
import Header from '../components/header'
import Link from 'next/link'
import constants from '../constants.json'
@ -30,9 +30,7 @@ export default function Script() {
return (
<div className={styles.content}>
<Head>
<title>Script - Qmining | Frylabs.net</title>
</Head>
<Header title={'Script'} />
<div className={'pageHeader'}>
<h1>Script</h1>
</div>

View file

@ -1,11 +1,11 @@
import React, { useState, useEffect } from 'react'
import Head from 'next/head'
import Link from 'next/link'
import LoadingIndicator from '../components/LoadingIndicator'
import Modal from '../components/modal'
import SearchBar from '../components/searchBar'
import UpDownVote from '../components/upDownVote'
import Header from '../components/header'
import styles from './userfiles.module.css'
import constants from '../constants.json'
@ -455,9 +455,7 @@ export default function UserFiles({
return (
<div>
<Head>
<title>ZH-k/Vizsgák, segédanyagok - Qmining | Frylabs.net</title>
</Head>
<Header title={'ZH-k/Vizsgák, segédanyagok'} />
<div className="pageHeader">
<h1>ZH-k/Vizsgák, segédanyagok</h1>
</div>