User: # Inputs

## Current File
Here is the file I'm looking at. It might be truncated from above and below and, if so, is centered around my cursor.
```src/components/dashboard/DashboardNewTablePosts.tsx
import {
  Corporate_Post_Bool_Exp,
  ExportDataDocument,
  ExportDataQuery,
  ExportDataQueryVariables,
  useGetChannelPostsWithDateQuery,
} from "api/graphql_ch_admin_user";
import { useGetChannelLocationsQuery } from "api/graphql_user";
import dayjs from "dayjs";
import useTranslation from "lang/useTranslation";
import { floor } from "lodash";
import React, { useCallback, useEffect, useState } from "react";
import useCurrentChannelStore from "src/store/useCurrentChannelStore";
import usePostsFiltersStore from "src/store/usePostsFiltersStore";
import { SelectType, getDashboardTableCurrent } from "src/utils/commonUtils";
import DataTable from "../common/DataTable";
import Pagination from "../common/Pagination";
import PostDetails from "../posts/PostDetails";
import Modal from "../utils/Modal/Modal";
import { getColumnPostsDefs } from "../utils/Table/getTableColumnDefs";
import { CalendarView, PostFilterType } from "./DashboardNew";
import { useCustomClient } from "api/urqlClient";
import { download, generateCsv, mkConfig } from "export-to-csv";
import { ColumnDef } from "@tanstack/react-table";

const LIMIT = 20;
const rowStyle: React.CSSProperties = {
  cursor: "pointer",
};

const csvConfig = mkConfig({
  fieldSeparator: ",",
  filename: "sample", // export file name (without .csv)
  decimalSeparator: ".",
  useKeysAsHeaders: true,
});

type Props = {
  loading: boolean;
  currentDateNew: SelectType;
  creatorUserId?: { creatorUserId?: string } | undefined;
  filter: PostFilterType;
  calendarActive: boolean;
  custom_filter_date?: CalendarView;
  calendar_date: CalendarView;
  condition?: Corporate_Post_Bool_Exp; //Remove the dependency if not being used anywhere.
  sphere_id?: string;
  shape_id?: string;
};

function DashboardNewTablePosts(props: Props) {
  const { currentDateNew } = props;
  // @ts-expect-error
  const currentChannel = useCurrentChannelStore((state) => state.currentChannel);
  const { selectPost, selectedPost, showPostDetail } = usePostsFiltersStore();
  const [offset, setOffset] = useState(0);
  const { t } = useTranslation();

  const [getChannelLocations] = useGetChannelLocationsQuery({
    variables: {
      channel_id: currentChannel?.channel?.id,
    },
  });
  const channel_locations = getChannelLocations?.data?.channel_location ?? [];

  let condition = getDashboardTableCurrent(
    currentDateNew,
    currentChannel?.channel.id ?? "",
    props.calendar_date,
    props.creatorUserId?.creatorUserId,
    props.filter?.postType,
    props.calendarActive,
  );

  const [resultCorporatePosts] = useGetChannelPostsWithDateQuery({
    variables: {
      // Check for use for props.condition if it is being used anywhere.
      condition: props?.condition ?? condition.condition_cp,
      limit: LIMIT,
      offset,
    },
    pause: !currentChannel?.channel.id,
  });
  const { customClient } = useCustomClient();

  const exportExcel = useCallback(async () => {
    let data;
    await customClient
      .query<ExportDataQuery, ExportDataQueryVariables>(ExportDataDocument, {
        condition: condition.condition_cp,
      })
      .toPromise()
      .then((result) => {
        if (result.data && result.data?.get_corporate_post_impressions) {
          data = result.data.get_corporate_post_impressions;
          const rowData = (data || []).map((row) => {
            return {
              Publish_date: dayjs(row?.published_at).format(t("TimeFormat.dayjs_date")) || "",
              Post_Headline: row?.title || "",
              Impressions: row?.impression || 0,
              Reactions: row?.corporate_post_reactions_aggregate?.aggregate?.count || 0,
              Comments: row?.comments_aggregate?.aggregate?.count || 0,
              Votes: row?.poll_votes_aggregate?.aggregate?.count || 0,
              Participants: row?.participants_aggregate?.aggregate?.count || 0,
            };
          });
          const csv = generateCsv(csvConfig)(rowData);
          download(csvConfig)(csv);
        }
      });
  }, [condition.condition_cp, customClient, t]);
  useEffect(() => {
    let timeout: NodeJS.Timeout;
    timeout = setTimeout(() => {
      // @ts-expect-error
      window.exportCSV = async function () {
        await exportExcel();
      };
    }, 2000);
    return () => clearTimeout(timeout);
  }, [exportExcel]);

  const data_corporate_posts = resultCorporatePosts?.data?.get_corporate_post_impressions;
  const total_posts = resultCorporatePosts.data?.get_corporate_post_impressions_aggregate.aggregate?.count ?? 0;
  const loading = props.loading || resultCorporatePosts.fetching;

  const onNext = () => {
    if (offset + LIMIT < total_posts) {
      setOffset(offset + LIMIT);
    }
  };

  const onPrevious = () => {
    if (offset > 0) {
      setOffset(offset - LIMIT);
    }
  };

  return (
    <>
      <DataTable
        columns={getColumnPostsDefs(channel_locations) as ColumnDef<any>[]}
        data={data_corporate_posts || []}
        isOverFlowY={true}
        loading={loading}
        rowStyle={rowStyle}
        onRowClick={selectPost}
      />
      <div className="bottom-0">
        <Pagination
          page={floor(offset / LIMIT)}
          perPage={LIMIT}
          total={total_posts}
          onNext={onNext}
          onPrevious={onPrevious}
        />
      </div>
      <Modal
        isOpen={showPostDetail}
        size="md"
        showCloseSign
        hideButtons
        onClose={() => {
          selectPost(null);
        }}>
        <PostDetails post={selectedPost} />
      </Modal>
    </>
  );
}

export default DashboardNewTablePosts;


```


User: ```typescript:src/components/dashboard/DashboardNewTables.tsx
import { CalendarDaysIcon } from "@heroicons/react/24/outline";
import dayjs from "dayjs";
import useTranslation from "lang/useTranslation";
import React, { useCallback, useMemo } from "react";
import { Channel } from "src/store/useCurrentChannelStore";
import { CurrentTable, SelectType } from "src/utils/commonUtils";
import { CalendarView, DateTypeCurrent, PostFilterType, SCROLL_TO } from "./DashboardNew";
import DashboardNewTableComments from "./DashboardNewTableComments";
import DashboardNewTableImpressions from "./DashboardNewTableImpressions";
import DashboardNewTableMembers from "./DashboardNewTableMembers";
import DashboardNewTableParticipants from "./DashboardNewTableParticipants";
import DashboardNewTablePosts from "./DashboardNewTablePosts";
import DashboardNewTableReactions from "./DashboardNewTableReactions";
import DashboardNewTableVotes from "./DashboardNewTableVotes";

const table_title_styles: React.CSSProperties = {
  borderLeftWidth: "2px",
  borderTopLeftRadius: "0.25rem",
  borderTopRightRadius: "0.25rem",
  borderTopWidth: "2px",
  borderRightWidth: "2px",
};

type Props = {
  currentChannel: Channel | null;
  loading: boolean;
  currentTable: CurrentTable;
  currentDateNew: SelectType;
  isCreatorOnly: boolean;
  creatorUserId?: { creatorUserId?: string } | undefined;
  filter: PostFilterType;
  calendarActive: boolean;
  calendar_date: CalendarView;
  isManagerOnly?: boolean;
};

function DashboardNewTables(props: Props) {
  const { currentTable, loading, isCreatorOnly } = props;
  const tableStyle: React.CSSProperties = {
    display: props.currentTable ? "grid" : "none",
  };
  const { t } = useTranslation();

  const renderTable = useCallback(() => {
    if (currentTable === "MEMBER") {
      return (
        <DashboardNewTableMembers
          currentDateNew={props.currentDateNew}
          loading={loading}
          isCreatorOnly={isCreatorOnly}
          creatorUserId={props.creatorUserId}
          filter={props.filter}
          calendarActive={props.calendarActive}
          calendar_date={props.calendar_date}
        />
      );
    } else if (currentTable === "POST") {
      return (
        <DashboardNewTablePosts
          currentDateNew={props.currentDateNew}
          loading={loading}
          creatorUserId={props.creatorUserId}
          filter={props.filter}
          calendarActive={props.calendarActive}
          calendar_date={props.calendar_date}
        />
      );
    } else if (currentTable === "COMMENT") {
      return (
        <DashboardNewTableComments
          currentDateNew={props.currentDateNew}
          loading={loading}
          isCreatorOnly={isCreatorOnly}
          creatorUserId={props.creatorUserId}
          filter={props.filter}
          calendarActive={props.calendarActive}
          calendar_date={props.calendar_date}
        />
      );
    } else if (currentTable === "REACTION") {
      return (
        <DashboardNewTableReactions
          currentDateNew={props.currentDateNew}
          loading={loading}
          creatorUserId={props.creatorUserId}
          filter={props.filter}
          calendarActive={props.calendarActive}
          calendar_date={props.calendar_date}
        />
      );
    } else if (currentTable === "PARTICIPANT") {
      return (
        <DashboardNewTableParticipants
          currentDateNew={props.currentDateNew}
          loading={loading}
          isCreatorOnly={isCreatorOnly}
          creatorUserId={props.creatorUserId}
          filter={props.filter}
          calendarActive={props.calendarActive}
          calendar_date={props.calendar_date}
        />
      );
    } else if (currentTable === "VOTES") {
      return (
        <DashboardNewTableVotes
          currentDateNew={props.currentDateNew}
          loading={loading}
          creatorUserId={props.creatorUserId}
          filter={props.filter}
          calendarActive={props.calendarActive}
          calendar_date={props.calendar_date}
          isManagerOnly={props.isManagerOnly}
        />
      );
    } else if (currentTable === "IMPRESSIONS") {
      return (
        <DashboardNewTableImpressions
          currentDateNew={props.currentDateNew}
          loading={loading}
          filter={props.filter}
          creatorUserId={props.creatorUserId}
          calendarActive={props.calendarActive}
          calendar_date={props.calendar_date}
        />
      );
    }
  }, [
    currentTable,
    isCreatorOnly,
    loading,
    props.calendarActive,
    props.calendar_date,
    props.creatorUserId,
    props.currentDateNew,
    props.filter,
    props.isManagerOnly,
  ]);

  const table_title = useMemo(() => {
    if (props.currentDateNew.type === DateTypeCurrent.ALL_TIME) {
      return t("DashboardPage.all_time");
    } else if (props.currentDateNew.type === DateTypeCurrent.CUSTOM) {
      return (
        "" + dayjs(props.calendar_date.startDate).format("LL") + " - " + dayjs(props.calendar_date.endDate).format("LL")
      );
    } else {
      return (
        "" +
        dayjs(props.currentDateNew.startDate).format("LL") +
        " - " +
        dayjs(props.currentDateNew.endDate).format("LL")
      );
    }
  }, [
    props.calendar_date.endDate,
    props.calendar_date.startDate,
    props.currentDateNew.endDate,
    props.currentDateNew.startDate,
    props.currentDateNew.type,
    t,
  ]);

  return (
    <div className="mt-14 my-10">
      {currentTable ? (
        <div className="py-2 bg-white flex w-fit px-2  border-gray-200" style={table_title_styles}>
          <CalendarDaysIcon height={24} />
          <span className="ml-2">{table_title}</span>
        </div>
      ) : null}
      <div className="w-full  border-2 border-gray-200 rounded" style={tableStyle} id={SCROLL_TO}>
        {renderTable()}
      </div>
    </div>
  );
}

export default DashboardNewTables;

```
```typescript:src/components/dashboard/DashboardNewTablePosts.tsx
      condition: props?.condition ?? condition.condition_cp,
```


How do I remove this general condition property and just use sphere and shape id to fetch it from the Graphql query?
Assistant: