How to use the contexts.useAppContext function in contexts

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

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 Chat({ onFileUpload }) {
  const {
    requestHelpers: {
      createNewChat,
      loadChatChannel,
      loadDMChannel,
      loadMoreChannels,
      loadMoreChatMessages,
      startNewDMChannel,
      updateChatLastRead
    }
  } = useAppContext();
  const { profilePicId, userId, username } = useMyState();
  const {
    state: {
      channelLoading,
      loaded,
      selectedChannelId,
      channelsObj,
      messages,
      channelLoadMoreButton,
      loadMoreMessages,
      recepientId,
      reconnecting,
      replyTarget,
      subject
    },
    actions: {

export default function Chat({ onFileUpload }) {
  const {
    requestHelpers: {
      createNewChat,
      loadChatChannel,
      loadDMChannel,
      loadMoreChannels,
      loadMoreChatMessages,
      startNewDMChannel,
      updateChatLastRead
    }
  } = useAppContext();
  const { profilePicId, userId, username } = useMyState();
  const {
    state: {
      loaded,
      currentChannel,
      selectedChannelId,
      channels,
      messages,
      channelLoadMoreButton,
      loadMoreMessages,
      recepientId,
      subject
    },
    actions: {
      onClearNumUnreads,
      onCreateNewChannel,

export default function Comment({
  comment,
  comment: { id, content, timeStamp },
  onDelete,
  onEditDone,
  profilePicId,
  userId,
  username
}) {
  const {
    requestHelpers: { deleteContent, editContent }
  } = useAppContext();
  const {
    actions: { onSetIsEditing }
  } = useContentContext();
  const { isEditing } = useContentState({
    contentType: 'comment',
    contentId: id
  });
  const [confirmModalShown, setConfirmModalShown] = useState(false);
  return (

export default function Comment({
  maxRewardableStars,
  noMarginForEditButton,
  onEditDone = () => {},
  star
}) {
  const {
    requestHelpers: { editRewardComment }
  } = useAppContext();
  const {
    actions: { onSetIsEditing }
  } = useContentContext();
  const { authLevel, canEdit, userId } = useMyState();
  const { isEditing } = useContentState({
    contentType: 'reward',
    contentId: star.id
  });
  const userIsUploader = star.rewarderId === userId;
  const userCanEditThis = canEdit && authLevel > star.rewarderAuthLevel;
  const editButtonShown = userIsUploader || userCanEditThis;
  const editMenuItems = [];
  if (userIsUploader || canEdit) {
    editMenuItems.push({
      label: 'Edit',
      onClick: () =>

function Comment({
  comment,
  innerRef,
  isPreview,
  parent,
  rootContent = {},
  subject,
  comment: { replies = [], likes = [], stars = [], uploader }
}) {
  subject = subject || comment.targetObj?.subject || {};
  const history = useHistory();
  const {
    requestHelpers: { checkIfUserResponded, editContent }
  } = useAppContext();
  const { authLevel, canDelete, canEdit, canStar, userId } = useMyState();
  const {
    actions: {
      onChangeSpoilerStatus,
      onSetIsEditing,
      onSetXpRewardInterfaceShown
    }
  } = useContentContext();
  const { deleted, isEditing, xpRewardInterfaceShown } = useContentState({
    contentType: 'comment',
    contentId: comment.id
  });
  const subjectState = useContentState({
    contentType: 'subject',
    contentId: subject.id
  });

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)}</div></div>

export default function Home({ history, location }) {
  const {
    user: {
      actions: { onUploadProfilePic }
    },
    requestHelpers: { uploadProfilePic }
  } = useAppContext();
  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>