How to use contexts - 10 common examples

function App({ location, history }) {
  const {
    user: {
      actions: { onCloseSigninModal, onInitSession, onLogout }
    },
    requestHelpers: { auth, initSession, uploadFileOnChat }
  } = useAppContext();
  const { signinModalShown, username } = useMyState();
  const {
    actions: {
      onPostFileUploadStatus,
      onPostUploadComplete,
      onResetChat,
      onSendFirstDirectMessage,
      onUpdateClientToApiServerProgress
    }
  } = useChatContext();
  const {
    actions: { onInitContent }
  } = useContentContext();
  const {
    state: { updateDetail, updateNoticeShown }
  } = useNotiContext();

export default function Main() {
  const { userId, managementLevel } = useMyState();
  const canManage = useMemo(() => managementLevel > 1, [managementLevel]);
  const {
    requestHelpers: { loadAccountTypes, loadModerators }
  } = useAppContext();
  const {
    state: { accountTypes, accountTypesLoaded, moderators, moderatorsLoaded },
    actions: { onLoadAccountTypes, onLoadModerators }
  } = useManagementContext();
  const [accountTypeModalTarget, setAccountTypeModalTarget] = useState(null);
  const [moderatorModalTarget, setModeratorModalTarget] = useState(null);
  const [addAccountTypeModalShown, setAddAccountTypeModalShown] = useState(
    false
  );
  const [addModeratorModalShown, setAddModeratorModalShown] = useState(false);
  useEffect(() => {
    initModerators();
    initAccountTypes();
    async function initModerators() {
      const data = await loadModerators();
      onLoadModerators(data);

const {
    user: {
      actions: { onCloseSigninModal, onInitSession, onLogout }
    },
    requestHelpers: { auth, initSession, uploadFileOnChat }
  } = useAppContext();
  const { signinModalShown, username } = useMyState();
  const {
    actions: {
      onPostFileUploadStatus,
      onPostUploadComplete,
      onResetChat,
      onSendFirstDirectMessage,
      onUpdateClientToApiServerProgress
    }
  } = useChatContext();
  const {
    actions: { onInitContent }
  } = useContentContext();
  const {
    state: { updateDetail, updateNoticeShown }
  } = useNotiContext();
  const {
    state: { pageVisible },
    actions: { onChangePageVisibility }
  } = useViewContext();
  const [mobileMenuShown, setMobileMenuShown] = useState(false);
  const visibilityChangeRef = useRef(null);
  const hiddenRef = useRef(null);
  const authRef = useRef(null);
  const mounted = useRef(true);

},
    requestHelpers: { auth, initSession, uploadFileOnChat }
  } = useAppContext();
  const { signinModalShown, username } = useMyState();
  const {
    actions: {
      onPostFileUploadStatus,
      onPostUploadComplete,
      onResetChat,
      onSendFirstDirectMessage,
      onUpdateClientToApiServerProgress
    }
  } = useChatContext();
  const {
    actions: { onInitContent }
  } = useContentContext();
  const {
    state: { updateDetail, updateNoticeShown }
  } = useNotiContext();
  const {
    state: { pageVisible },
    actions: { onChangePageVisibility }
  } = useViewContext();
  const [mobileMenuShown, setMobileMenuShown] = useState(false);
  const visibilityChangeRef = useRef(null);
  const hiddenRef = useRef(null);
  const authRef = useRef(null);
  const mounted = useRef(true);

  useEffect(() => {
    mounted.current = true;
    return function cleanUp() {

style = {},
  uploader,
  videoCode,
  videoId
}) {
  const {
    requestHelpers: {
      addVideoView,
      checkXPEarned,
      fetchVideoThumbUrl,
      updateCurrentlyWatching,
      updateUserXP,
      updateTotalViewDuration,
      updateVideoXPEarned
    }
  } = useAppContext();
  const { profileTheme, twinkleXP, userId } = useMyState();
  const {
    state: {
      videos: { currentVideoSlot }
    },
    actions: { onEmptyCurrentVideoSlot, onFillCurrentVideoSlot }
  } = useExploreContext();
  const {
    state: { pageVisible }
  } = useViewContext();
  const {
    actions: {
      onChangeUserXP,
      onSetVideoImageUrl,
      onSetVideoStarted,
      onSetVideoXpEarned,

export default function Home({ history, location }) {
  const {
    requestHelpers: { uploadProfilePic }
  } = useAppContext();
  const {
    actions: { onUploadProfilePic }
  } = useContentContext();
  const { userId } = useMyState();
  const [alertModalShown, setAlertModalShown] = useState(false);
  const [imageEditModalShown, setImageEditModalShown] = useState(false);
  const [imageUri, setImageUri] = useState(null);
  const [processing, setProcessing] = useState(false);

  return (
    
      <div>
        <div>
           setAlertModalShown(true)}
            onLoadImage={upload =&gt; {
              setImageEditModalShown(true);
              setImageUri(upload.target.result);</div></div>

onDeleteComment,
      onEditComment,
      onEditRewardComment,
      onLikeComment,
      onLoadComments,
      onLoadMoreComments,
      onLoadMoreReplies,
      onLoadRepliesOfReply,
      onUpdateStatusMsg,
      onUploadComment,
      onUploadReply,
      onRemoveStatusMsg,
      onUpdateGreeting,
      onUpdateBio
    }
  } = useContentContext();
  const {
    state: { editedStatusMsg, editedStatusColor },
    actions: { onSetEditedStatusColor, onSetEditedStatusMsg }
  } = useInputContext();
  const {
    commentsLoaded,
    email,
    emailVerified,
    greeting,
    id,
    joinDate,
    lastActive,
    online,
    statusMsg,
    profileFirstRow,
    profileSecondRow,

onSetRewardLevel,
  stars,
  timeStamp,
  videoId,
  videoViews
}) {
  const {
    authLevel,
    canDelete,
    canEdit,
    canEditPlaylists,
    canStar
  } = useMyState();
  const {
    actions: { onSetIsEditing, onSetXpRewardInterfaceShown }
  } = useContentContext();
  const {
    state: inputState,
    actions: { onSetEditForm }
  } = useInputContext();
  const { isEditing, xpRewardInterfaceShown } = useContentState({
    contentType: 'video',
    contentId: videoId
  });
  const [titleHovered, setTitleHovered] = useState(false);
  const TitleRef = useRef(null);
  const RewardInterfaceRef = useRef(null);

  useEffect(() => {
    if (!inputState['edit' + 'video' + videoId]) {
      onSetEditForm({
        contentId: videoId,

deleteReply,
  loadRepliesOfReply,
  parent,
  reply,
  reply: { likes = [], stars = [], uploader },
  rootContent,
  submitReply,
  subject
}) {
  const {
    requestHelpers: { editContent, loadReplies }
  } = useAppContext();
  const { authLevel, canDelete, canEdit, canStar, userId } = useMyState();
  const {
    actions: { onSetIsEditing, onSetXpRewardInterfaceShown }
  } = useContentContext();
  const { deleted, isEditing, xpRewardInterfaceShown } = useContentState({
    contentType: 'comment',
    contentId: reply.id
  });
  const {
    onAttachStar,
    onEditDone,
    onLikeClick,
    onRewardCommentEdit
  } = useContext(LocalContext);
  const [userListModalShown, setUserListModalShown] = useState(false);
  const [confirmModalShown, setConfirmModalShown] = useState(false);
  const ReplyInputAreaRef = useRef(null);
  const RewardInterfaceRef = useRef(null);
  const userIsUploader = userId === uploader.id;
  const userIsHigherAuth = authLevel > uploader.authLevel;

const {
    state: { pageVisible }
  } = useViewContext();
  const {
    actions: {
      onChangeUserXP,
      onSetVideoImageUrl,
      onSetVideoStarted,
      onSetVideoXpEarned,
      onSetVideoXpJustEarned,
      onSetVideoXpLoaded,
      onSetVideoXpProgress,
      onSetXpVideoWatchTime,
      onSetVideoCurrentTime
    }
  } = useContentContext();
  const {
    currentTime = 0,
    started,
    xpLoaded,
    xpEarned,
    justEarned,
    imageUrl = '',
    progress = 0,
    watchTime = 0,
    isEditing
  } = useContentState({ contentType: 'video', contentId: videoId });
  const [playing, setPlaying] = useState(false);
  const [alreadyEarned, setAlreadyEarned] = useState(false);
  const [startingPosition, setStartingPosition] = useState(0);
  const [timeAt, setTimeAt] = useState(0);
  const maxRequiredDuration = 250;