CaptainFact / captain-fact-frontend / 20411409289

coverage: 1.46% (-1.8%) from 3.249%
20411409289

push

github

Betree 
iterate

26 of 1952 branches covered (1.33%)

Branch coverage included in aggregate %.

1 of 8 new or added lines in 4 files covered. (12.5%)

528 existing lines in 32 files now uncovered.

39 of 2500 relevant lines covered (1.56%)

0.07 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0
/app/components/Moderation/Moderation.jsx
1 
import { useLazyQuery } from '@apollo/client'
2 
import React, { useEffect } from 'react'
3 
import { useTranslation } from 'react-i18next'
4 
import { Link } from 'react-router-dom'
5 
import { Report } from 'styled-icons/octicons'
6 









7



import { toast } from '@/hooks/use-toast'










8












9



import { RANDOM_MODERATION_QUERY } from '../../API/graphql_queries'










10



import { MIN_REPUTATION_MODERATION } from '../../constants'










11



import { commentURL } from '../../lib/cf_routes'










12



import { Button } from '../ui/button'










13



import UserAppellation from '../Users/UserAppellation'










14



import UserAction from '../UsersActions/UserAction'










15



import { LoadingFrame } from '../Utils/LoadingFrame'










16



import Message from '../Utils/Message'










17



import ReputationGuard from '../Utils/ReputationGuard'










18



import ModerationForm from './ModerationForm'










19













UNCOV

20



const Moderation = () => {




×







21



  const { t } = useTranslation('moderation')




×








UNCOV

22



  const [fetchRandomModeration, { data, loading, refetch }] = useLazyQuery(RANDOM_MODERATION_QUERY)




×







23













UNCOV

24



  useEffect(() => {




×








UNCOV

25



    fetchRandomModeration()




×







26



  }, [fetchRandomModeration])










27













UNCOV

28



  const postFeedback = () => {




×








UNCOV

29



    toast({




×







30



      variant: 'success',










31



      title: 'Flag submitted',










32



      description: 'Thank you for your feedback!',










33



    })











UNCOV

34



    refetch()




×







35



  }










36













UNCOV

37



  const renderAction = (action) => (




×








UNCOV

38



    <div className="bg-white dark:bg-background rounded-lg shadow-md dark:shadow-xl p-6">




×







39



      <UserAction action={action} defaultExpanded />










40



      <div className="my-4">










41



        <div className="bg-gray-50 dark:bg-accent rounded p-4 text-center">










42



          <Button variant="outline">










43



            <Link










44



              target="_blank"










45



              to={commentURL(action.videoHashId, action.statementId, action.commentId)}










46



              className="font-bold hover:underline dark:text-foreground"










47



            >










48



              {t('seeContext')}










49



            </Link>










50



          </Button>










51



        </div>










52



      </div>










53



      <hr className="my-4 dark:border-border" />










54



      <ModerationForm action={action} onSubmit={postFeedback} />










55



    </div>










56



  )










57













UNCOV

58



  if (loading) {





×








UNCOV

59



    return <LoadingFrame />




×







60



  }










61













UNCOV

62



  const entry = data?.randomModeration




×







63













UNCOV

64



  return (




×







65



    <ReputationGuard requiredRep={MIN_REPUTATION_MODERATION}>










66



      <main className="container mx-auto px-4 py-8">










67



        <h1 className="text-4xl font-bold text-center mb-6 dark:text-foreground">










68



          {t('title')} <Report className="inline w-8 h-8" />










69



        </h1>










70



        <div className="text-center mb-8">










71



          <p className="mb-2 dark:text-foreground">{t('helpText1')}</p>










72



          <p className="mb-4 dark:text-foreground">{t('helpText2')}</p>










73



          <Link










74



            className="font-bold hover:underline dark:text-foreground dark:hover:text-primary"










75



            to="/help/moderation"










76



          >










77



            {t('learnMore')}










78



          </Link>










79



        </div>










80



        {!entry && <Message className="text-center mt-8">{t('emptyModeration')}</Message>}





×







81



        {entry && (





×







82



          <div>










83



            {renderAction(entry.action)}










84



            <hr className="my-6 dark:border-border" />










85



            {entry.flags.map(({ sourceUser, reason }) => (











UNCOV

86



              <div key={sourceUser.id} className="text-center mb-2 dark:text-foreground">




×







87



                <UserAppellation user={sourceUser} /> {t('flaggedFor', { reason })}










88



              </div>










89



            ))}










90



          </div>










91



        )}










92



      </main>










93



    </ReputationGuard>










94



  )










95



}










96












97



export default Moderation
























    

  • 

    •