<commit_before>import { GetServerSideProps } from 'next'
import { useTranslation } from 'next-i18next'
import { useRouter } from 'next/router'
import OmniAural, { useOmniAural, /* useOmniAuralEffect */ } from 'omniaural'
import type { MediaRef } from 'podverse-shared'
import { useEffect, useRef, useState } from 'react'
// import { useCookies } from 'react-cookie'
import {
  ClipListItem,
  List,
  MessageWithAction,
  Meta,
  PageHeader,
  PageScrollableContent,
  Pagination,
  scrollToTopOfPageScrollableContent,
  Tiles
} from '~/components'
import { Page } from '~/lib/utility/page'
import { PV } from '~/resources'
import { isNotAllSortOption } from '~/resources/Filters'
import { getCategoryById, getCategoryBySlug } from '~/services/category'
import { getMediaRefsByQuery } from '~/services/mediaRef'
import { getDefaultServerSideProps } from '~/services/serverSideHelpers'

// eslint-disable-next-line
const categories = require('~/resources/Categories/TopLevelCategories.json')
interface ServerProps extends Page {
  serverCategoryId: string | null
  serverClipsListData: MediaRef[]
  serverClipsListDataCount: number
  serverFilterFrom: string
  serverFilterPage: number
  serverFilterSort: string
}

const keyPrefix = 'pages_clips'

export default function Clips({
  serverCategoryId,
  serverClipsListData,
  serverClipsListDataCount,
  serverFilterFrom,
  serverFilterPage,
  serverFilterSort,
  // serverGlobalFilters
}: ServerProps) {
  /* Initialize */

  const router = useRouter()
  const { t } = useTranslation()
  // const [cookies, setCookie, removeCookie] = useCookies([])
  const [filterCategoryId, setFilterCategoryId] = useState<string | null>(serverCategoryId || null)
  const [filterFrom, setFilterFrom] = useState<string>(serverFilterFrom)
  const [filterPage, setFilterPage] = useState<number>(serverFilterPage)
  const [filterSort, setFilterSort] = useState<string>(serverFilterSort)
  const [clipsListData, setListData] = useState<MediaRef[]>(serverClipsListData)
  const [clipsListDataCount, setListDataCount] = useState<number>(serverClipsListDataCount)
  const [userInfo] = useOmniAural('session.userInfo')
  // const [videoOnlyMode, setVideoOnlyMode] = useState<boolean>(serverGlobalFilters?.videoOnlyMode || OmniAural.state.globalFilters.videoOnlyMode.value())
  const initialRender = useRef<boolean>(true)
  const pageCount = Math.ceil(clipsListDataCount / PV.Config.QUERY_RESULTS_LIMIT_DEFAULT)
  const isCategoryPage = !!router.query?.category
  const selectedCategory = isCategoryPage ? getCategoryById(filterCategoryId) : null
  const pageHeaderText = selectedCategory ? `${t('Clips')} > ${selectedCategory.title}` : t('Clips')

  /* useEffects */<commit_msg>Run prettier<commit_after>import { GetServerSideProps } from 'next'
import { useTranslation } from 'next-i18next'
import { useRouter } from 'next/router'
import OmniAural, { useOmniAural /* useOmniAuralEffect */ } from 'omniaural'
import type { MediaRef } from 'podverse-shared'
import { useEffect, useRef, useState } from 'react'
// import { useCookies } from 'react-cookie'
import {
  ClipListItem,
  List,
  MessageWithAction,
  Meta,
  PageHeader,
  PageScrollableContent,
  Pagination,
  scrollToTopOfPageScrollableContent,
  Tiles
} from '~/components'
import { Page } from '~/lib/utility/page'
import { PV } from '~/resources'
import { isNotAllSortOption } from '~/resources/Filters'
import { getCategoryById, getCategoryBySlug } from '~/services/category'
import { getMediaRefsByQuery } from '~/services/mediaRef'
import { getDefaultServerSideProps } from '~/services/serverSideHelpers'

// eslint-disable-next-line
const categories = require('~/resources/Categories/TopLevelCategories.json')
interface ServerProps extends Page {
  serverCategoryId: string | null
  serverClipsListData: MediaRef[]
  serverClipsListDataCount: number
  serverFilterFrom: string
  serverFilterPage: number
  serverFilterSort: string
}

const keyPrefix = 'pages_clips'

export default function Clips({
  serverCategoryId,
  serverClipsListData,
  serverClipsListDataCount,
  serverFilterFrom,
  serverFilterPage,
  serverFilterSort
}: // serverGlobalFilters
ServerProps) {
  /* Initialize */

  const router = useRouter()
  const { t } = useTranslation()
  // const [cookies, setCookie, removeCookie] = useCookies([])
  const [filterCategoryId, setFilterCategoryId] = useState<string | null>(serverCategoryId || null)
  const [filterFrom, setFilterFrom] = useState<string>(serverFilterFrom)
  const [filterPage, setFilterPage] = useState<number>(serverFilterPage)
  const [filterSort, setFilterSort] = useState<string>(serverFilterSort)
  const [clipsListData, setListData] = useState<MediaRef[]>(serverClipsListData)
  const [clipsListDataCount, setListDataCount] = useState<number>(serverClipsListDataCount)
  const [userInfo] = useOmniAural('session.userInfo')
  // const [videoOnlyMode, setVideoOnlyMode] = useState<boolean>(serverGlobalFilters?.videoOnlyMode || OmniAural.state.globalFilters.videoOnlyMode.value())
  const initialRender = useRef<boolean>(true)
  const pageCount = Math.ceil(clipsListDataCount / PV.Config.QUERY_RESULTS_LIMIT_DEFAULT)
  const isCategoryPage = !!router.query?.category
  const selectedCategory = isCategoryPage ? getCategoryById(filterCategoryId) : null
  const pageHeaderText = selectedCategory ? `${t('Clips')} > ${selectedCategory.title}` : t('Clips')

  /* useEffects */
{'fraction_non_alphanumeric': 0.10956875809735332, 'fraction_numerical': 0.0007403294466037387, 'mean_word_length': 6.036458333333333, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5675150', 'n_tokens_mistral': 1625, 'n_tokens_neox': 1616, 'n_words': 349}