Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add a commit to Add comment requesting help to implement "Download as .csv" button #459

Merged
merged 3 commits into from
Jul 1, 2024
Merged

add a commit to Add comment requesting help to implement "Download as .csv" button #459

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
36495ce
add a commit to @coderabbitai
cohenaj194 Jul 1, 2024
69d446d
add csv button
cohenaj194 Jul 1, 2024
a65f7d2
perfect @coderabbitai that worked
cohenaj194 Jul 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions app/routes/wow.legacy-marketshare.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ import { getOribosLink } from '~/components/utilities/getOribosLink'
import { getSaddlebagWoWLink } from '~/components/utilities/getSaddlebagWoWLink'
import DebouncedInput from '~/components/Common/DebouncedInput'

// @coderabbitai help us add in the "Download as .csv" button to this page
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 1, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Offer assistance to implement the "Download as .csv" button.

The comment indicates that help is needed to add a "Download as .csv" button to the page.

Would you like me to provide an implementation for the "Download as .csv" button? This would include creating a button component and adding the necessary logic to generate and download the CSV file.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@coderabbitai We already have that under https://github.com/ff14-advanced-market-search/saddlebag-with-pockets/blob/master/app/components/utilities/CSVButton.tsx

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cohenaj194, thank you for pointing out the existing CSVButton component. To integrate this button into the wow.legacy-marketshare.tsx page, you can use the following approach:

  1. Import the CSVButton component.
  2. Pass the relevant data and column definitions to the CSVButton component.

Here's an example of how to do this:

import CSVButton from '~/components/utilities/CSVButton'

// Inside the Results component
const Results = ({
  data,
  sortByValue,
  server,
  region
}: {
  data: Array<LegacyMarketshareItem>
  sortByValue: LegacyMarketshareSortBy
  server: string
  region: WoWServerRegion
}) => {
  const { darkmode } = useTypedSelector(({ user }) => user)
  const [sortBy, setSortBy] = useState<LegacyMarketshareSortBy>(sortByValue)
  const [globalFilter, setGlobalFilter] = useState('')

  const chartData = getChartData(data, sortBy)

  const columnList = getColumnList(region, server)

  // Define the columns for the CSV
  const csvColumns = columnList.map(({ columnId, header }) => ({
    title: header,
    value: columnId
  }))

  return (
    <PageWrapper>
      <Title title={pageTitle} />
      <ContentContainer>
        <>
          <TabbedButtons
            currentValue={sortBy}
            onClick={(value) => {
              if (assertIsSortBy(value)) setSortBy(value)
            }}
            options={sortByOptions}
          />
          <div className="md:hidden py-2">
            <Select
              title="Sort Results By"
              options={sortByOptions}
              name="sortBy"
              id="sortBy"
              onChange={(e) => {
                const value = e.target.value
                if (assertIsSortBy(value)) setSortBy(value)
              }}
            />
          </div>
          <TreemapChart
            chartData={chartData}
            darkMode={darkmode}
            backgroundColor={darkmode ? '#1f2937' : '#f3f4f6'}
          />
        </>
      </ContentContainer>

      <div className="hidden sm:flex w-full justify-end">
        <DebouncedInput
          onDebouncedChange={(value) => {
            setGlobalFilter(value)
          }}
          className={'p-2 rounded-md'}
          placeholder={'Search...'}
        />
      </div>

      <div className="hidden sm:block">
        <FullTable<LegacyMarketshareItem>
          data={data}
          sortingOrder={[{ id: sortBy, desc: true }]}
          columnList={columnList}
          globalFilter={globalFilter}
          setGlobalFilter={setGlobalFilter}
        />
      </div>
      <MobileTable
        data={data}
        sortingOrder={[{ id: sortBy, desc: true }]}
        columnList={getMobileColumns(sortBy, sortByOptions)}
        rowLabels={columnList}
        columnSelectOptions={sortByOptions.map(({ value }) => value)}
      />
      
      {/* Add the CSVButton here */}
      <CSVButton
        filename="legacy_marketshare.csv"
        data={data}
        columns={csvColumns}
      />
    </PageWrapper>
  )
}

This example shows how to integrate the CSVButton by passing the data and csvColumns to it. The csvColumns are derived from the columnList, ensuring that the CSV includes the same columns as the table.

Analysis chain
Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Display the content of the CSVButton.tsx file to understand its implementation
cat app/components/utilities/CSVButton.tsx

Length of output: 1761

Learnings added 
Learnt from: cohenaj194
PR: ff14-advanced-market-search/saddlebag-with-pockets#459
File: app/routes/wow.legacy-marketshare.tsx:36-36
Timestamp: 2024-07-01T13:26:19.358Z
Learning: The `CSVButton` component in the `saddlebag-with-pockets` repository is used to generate and download CSV files. It can be integrated into any page by importing it and passing the appropriate `filename`, `data`, and `columns` props.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

Learnings used 
Learnt from: cohenaj194
PR: ff14-advanced-market-search/saddlebag-with-pockets#0
File: :0-0
Timestamp: 2024-06-09T21:34:49.875Z
Learning: User: cohenaj194 prefers detailed, actionable responses that directly address the code issues with specific solutions and examples.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@coderabbitai I want you to gather up all related issues, tickets, pull requests and implementations using the https://github.com/coderabbitai We already have that under https://github.com/ff14-advanced-market-search/saddlebag-with-pockets/blob/master/app/components/utilities/CSVButton.tsx and its use would be import CSVButton from '~/components/utilities/CSVButton'

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cohenaj194, I have gathered the relevant information regarding the CSVButton component:

Related Pull Requests

Related Implementations

The CSVButton component is used in the following files:

  1. app/routes/ffxiv.self-purchase.tsx
  2. app/components/FFXIVResults/listings/ListingTable.tsx
  3. app/components/FFXIVResults/Marketshare/index.tsx
  4. app/components/FFXIVResults/FullScan/Results.tsx
  5. app/components/FFXIVResults/item-history/SaleHistoryTable.tsx
  6. app/components/WoWResults/ShortagePredictor/Results.tsx
  7. app/components/WoWResults/FullScan/SmallTable.tsx
  8. app/components/WoWResults/MarketshareResults/index.tsx
  9. app/components/WoWResults/PetMarketshareResults/index.tsx

Each of these files imports and utilizes the CSVButton component to enable CSV downloads.

Would you like any specific details or further assistance with the integration of the CSVButton component?

Analysis chain
Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for issues and pull requests mentioning CSVButton
gh issue list --search "CSVButton" --json number,title,url,state
gh pr list --search "CSVButton" --json number,title,url,state

# Search for all instances of CSVButton usage in the codebase
rg 'CSVButton' --json

Length of output: 10456

Learnings used 
Learnt from: cohenaj194
PR: ff14-advanced-market-search/saddlebag-with-pockets#0
File: :0-0
Timestamp: 2024-06-09T21:34:49.875Z
Learning: User: cohenaj194 prefers detailed, actionable responses that directly address the code issues with specific solutions and examples.

Learnt from: cohenaj194
PR: ff14-advanced-market-search/saddlebag-with-pockets#459
File: app/routes/wow.legacy-marketshare.tsx:36-36
Timestamp: 2024-07-01T13:26:19.555Z
Learning: The `CSVButton` component in the `saddlebag-with-pockets` repository is used to generate and download CSV files. It can be integrated into any page by importing it and passing the appropriate `filename`, `data`, and `columns` props.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cohenaj194, the error Cannot read properties of undefined (reading 'Core/Series/SeriesRegistry.js') suggests there might be a misconfiguration or an issue with how Highcharts or its modules are being imported or initialized. Here are some steps to diagnose and potentially fix the issue:

  1. Check Highcharts Import and Initialization:
    Ensure that Highcharts and its modules are correctly imported and initialized in the files where they are used. For example, in app/components/Charts/Treemap.tsx:

    import Highcharts from 'highcharts'
import addHighchartsTreemap from 'highcharts/modules/treemap'
import HighchartsReact from 'highcharts-react-official'

addHighchartsTreemap(Highcharts)

  2. Verify Highcharts Version Compatibility:
    Ensure that the versions of highcharts, highcharts-react-official, and any Highcharts modules you are using are compatible with each other.

  3. Check for Missing Dependencies:
    Sometimes, certain Highcharts modules depend on other modules. Make sure all necessary dependencies are installed and imported.

  4. Review Other Files:
    Review the other files where Highcharts is used to ensure there are no similar issues. Here are some examples:

    • app/routes/wow.item-data.$itemId.tsx
    • app/components/FFXIVResults/item-history/ServerDistributionChart.tsx
    • app/components/FFXIVResults/item-history/SalesByHourChart.tsx
    • app/components/FFXIVResults/item-history/PriceHistoryChart.tsx
    • app/components/Charts/PriceQuantityLineChart.tsx

If the issue persists, please share more details about the code where the error occurs, and I can provide further assistance.

Analysis chain
Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for Highcharts usage in the codebase
rg 'Highcharts' --json

Length of output: 8462

Learnings used 
Learnt from: cohenaj194
PR: ff14-advanced-market-search/saddlebag-with-pockets#0
File: :0-0
Timestamp: 2024-06-09T21:34:49.875Z
Learning: User: cohenaj194 prefers detailed, actionable responses that directly address the code issues with specific solutions and examples.

Learnt from: cohenaj194
PR: ff14-advanced-market-search/saddlebag-with-pockets#459
File: app/routes/wow.legacy-marketshare.tsx:36-36
Timestamp: 2024-07-01T13:26:19.555Z
Learning: The `CSVButton` component in the `saddlebag-with-pockets` repository is used to generate and download CSV files. It can be integrated into any page by importing it and passing the appropriate `filename`, `data`, and `columns` props.

Learnt from: cohenaj194
PR: ff14-advanced-market-search/saddlebag-with-pockets#459
File: app/routes/wow.legacy-marketshare.tsx:36-36
Timestamp: 2024-07-01T13:31:53.912Z
Learning: To place a component above existing components in a React component, ensure it is rendered before the target components within the JSX structure.

Copy link
Contributor Author

@cohenaj194 cohenaj194 Jul 1, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@coderabbitai Note how this is done in app/routes/ffxiv.self-purchase.tsx can we do something similar here?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cohenaj194, here is how you can implement the CSVButton in app/routes/wow.legacy-marketshare.tsx similar to its implementation in app/routes/ffxiv.self-purchase.tsx:

  1. Import the CSVButton component.
  2. Create a div containing the CSVButton and the DebouncedInput.
  3. Render this div before the table components.

Here is the updated code:

import CSVButton from '~/components/utilities/CSVButton'

// Inside the Results component
const Results = ({
  data,
  sortByValue,
  server,
  region
}: {
  data: Array<LegacyMarketshareItem>
  sortByValue: LegacyMarketshareSortBy
  server: string
  region: WoWServerRegion
}) => {
  const { darkmode } = useTypedSelector(({ user }) => user)
  const [sortBy, setSortBy] = useState<LegacyMarketshareSortBy>(sortByValue)
  const [globalFilter, setGlobalFilter] = useState('')

  const chartData = getChartData(data, sortBy)

  const columnList = getColumnList(region, server)

  // Define the columns for the CSV
  const csvColumns = columnList.map(({ columnId, header }) => ({
    title: header,
    value: columnId
  }))

  return (
    <PageWrapper>
      <Title title={pageTitle} />
      <ContentContainer>
        <>
          <TabbedButtons
            currentValue={sortBy}
            onClick={(value) => {
              if (assertIsSortBy(value)) setSortBy(value)
            }}
            options={sortByOptions}
          />
          <div className="md:hidden py-2">
            <Select
              title="Sort Results By"
              options={sortByOptions}
              name="sortBy"
              id="sortBy"
              onChange={(e) => {
                const value = e.target.value
                if (assertIsSortBy(value)) setSortBy(value)
              }}
            />
          </div>
          <TreemapChart
            chartData={chartData}
            darkMode={darkmode}
            backgroundColor={darkmode ? '#1f2937' : '#f3f4f6'}
          />
        </>
      </ContentContainer>

      <div className="flex justify-between">
        <CSVButton
          filename="legacy_marketshare.csv"
          data={data}
          columns={csvColumns}
        />
        <DebouncedInput
          onDebouncedChange={(value) => {
            setGlobalFilter(value)
          }}
          className={'hidden sm:block p-2 rounded-md'}
          placeholder={'Search...'}
        />
      </div>

      <div className="hidden sm:block">
        <FullTable<LegacyMarketshareItem>
          data={data}
          sortingOrder={[{ id: sortBy, desc: true }]}
          columnList={columnList}
          globalFilter={globalFilter}
          setGlobalFilter={setGlobalFilter}
        />
      </div>
      <MobileTable
        data={data}
        sortingOrder={[{ id: sortBy, desc: true }]}
        columnList={getMobileColumns(sortBy, sortByOptions)}
        rowLabels={columnList}
        columnSelectOptions={sortByOptions.map(({ value }) => value)}
      />
    </PageWrapper>
  )
}

This code places the CSVButton and the DebouncedInput inside a div with flex and justify-between classes, ensuring they appear above the table components.

Let me know if you need any further assistance!

Analysis chain
Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Display the content of the ffxiv.self-purchase.tsx file to understand the implementation of CSVButton
cat app/routes/ffxiv.self-purchase.tsx

Length of output: 6490

Learnings added 
Learnt from: cohenaj194
PR: ff14-advanced-market-search/saddlebag-with-pockets#459
File: app/routes/wow.legacy-marketshare.tsx:0-0
Timestamp: 2024-07-01T13:41:52.545Z
Learning: To replicate the implementation of the `CSVButton` from `app/routes/ffxiv.self-purchase.tsx` in another file, render the `CSVButton` and `DebouncedInput` inside a `div` with `flex` and `justify-between` classes before the table components.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

Learnings used 
Learnt from: cohenaj194
PR: ff14-advanced-market-search/saddlebag-with-pockets#0
File: :0-0
Timestamp: 2024-06-09T21:34:49.875Z
Learning: User: cohenaj194 prefers detailed, actionable responses that directly address the code issues with specific solutions and examples.

Learnt from: cohenaj194
PR: ff14-advanced-market-search/saddlebag-with-pockets#459
File: app/routes/wow.legacy-marketshare.tsx:36-36
Timestamp: 2024-07-01T13:26:19.555Z
Learning: The `CSVButton` component in the `saddlebag-with-pockets` repository is used to generate and download CSV files. It can be integrated into any page by importing it and passing the appropriate `filename`, `data`, and `columns` props.

Learnt from: cohenaj194
PR: ff14-advanced-market-search/saddlebag-with-pockets#459
File: app/routes/wow.legacy-marketshare.tsx:36-36
Timestamp: 2024-07-01T13:31:53.912Z
Learning: To place a component above existing components in a React component, ensure it is rendered before the target components within the JSX structure.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect @CodeRabbit that works ❤️

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!


const inputMap: Record<string, string> = {
homeRealmId: 'Home Realm',
region: 'Region',
Expand Down
Loading