Fix: Changed file and component names (#1934)

Changed file and component names
This commit is contained in:
Gaurav
2023-10-09 19:12:25 +05:30
committed by GitHub
parent 150d1a880c
commit a09456055e
24 changed files with 134 additions and 137 deletions

View File

@ -3,10 +3,10 @@ import { getCompaniesOptimisticEffectDefinition } from '@/companies/graphql/opti
import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries'; import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries';
import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries'; import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCompanyImport'; import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCompanyImport';
import { EntityTable } from '@/ui/data-table/components/EntityTable'; import { DataTable } from '@/ui/data-table/components/DataTable';
import { EntityTableEffect } from '@/ui/data-table/components/EntityTableEffect'; import { DataTableEffect } from '@/ui/data-table/components/DataTableEffect';
import { TableContext } from '@/ui/data-table/contexts/TableContext'; import { TableContext } from '@/ui/data-table/contexts/TableContext';
import { useUpsertEntityTableItem } from '@/ui/data-table/hooks/useUpsertEntityTableItem'; import { useUpsertDataTableItem } from '@/ui/data-table/hooks/useUpsertDataTableItem';
import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext'; import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
@ -33,7 +33,7 @@ export const CompanyTable = () => {
); );
const [updateEntityMutation] = useUpdateOneCompanyMutation(); const [updateEntityMutation] = useUpdateOneCompanyMutation();
const upsertEntityTableItem = useUpsertEntityTableItem(); const upsertDataTableItem = useUpsertDataTableItem();
const [getWorkspaceMember] = useGetWorkspaceMembersLazyQuery(); const [getWorkspaceMember] = useGetWorkspaceMembersLazyQuery();
const { const {
@ -76,14 +76,14 @@ export const CompanyTable = () => {
if (!data.updateOneCompany) { if (!data.updateOneCompany) {
return; return;
} }
upsertEntityTableItem(data.updateOneCompany); upsertDataTableItem(data.updateOneCompany);
}, },
}); });
}; };
return ( return (
<TableContext.Provider value={{ onColumnsChange: persistColumns }}> <TableContext.Provider value={{ onColumnsChange: persistColumns }}>
<EntityTableEffect <DataTableEffect
getRequestResultKey="companies" getRequestResultKey="companies"
useGetRequest={useGetCompaniesQuery} useGetRequest={useGetCompaniesQuery}
getRequestOptimisticEffectDefinition={ getRequestOptimisticEffectDefinition={
@ -107,7 +107,7 @@ export const CompanyTable = () => {
ViewBarRecoilScopeContext: TableRecoilScopeContext, ViewBarRecoilScopeContext: TableRecoilScopeContext,
}} }}
> >
<EntityTable <DataTable
updateEntityMutation={({ updateEntityMutation={({
variables, variables,
}: { }: {

View File

@ -1,6 +1,6 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useSetEntityTableData } from '@/ui/data-table/hooks/useSetEntityTableData'; import { useSetDataTableData } from '@/ui/data-table/hooks/useSetDataTableData';
import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { tableColumnsScopedState } from '@/ui/data-table/states/tableColumnsScopedState'; import { tableColumnsScopedState } from '@/ui/data-table/states/tableColumnsScopedState';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
@ -14,13 +14,13 @@ export const CompanyTableMockDataEffect = () => {
tableColumnsScopedState, tableColumnsScopedState,
TableRecoilScopeContext, TableRecoilScopeContext,
); );
const setEntityTableData = useSetEntityTableData(); const setDataTableData = useSetDataTableData();
useEffect(() => { useEffect(() => {
setEntityTableData(mockedCompaniesData, [], []); setDataTableData(mockedCompaniesData, [], []);
setTableColumns(companiesAvailableColumnDefinitions); setTableColumns(companiesAvailableColumnDefinitions);
}, [setEntityTableData, setTableColumns]); }, [setDataTableData, setTableColumns]);
return <></>; return <></>;
}; };

View File

@ -1,4 +1,4 @@
import { EntityTable } from '@/ui/data-table/components/EntityTable'; import { DataTable } from '@/ui/data-table/components/DataTable';
import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext'; import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
import { useUpdateOneCompanyMutation } from '~/generated/graphql'; import { useUpdateOneCompanyMutation } from '~/generated/graphql';
@ -15,7 +15,7 @@ export const CompanyTableMockMode = () => {
ViewBarRecoilScopeContext: TableRecoilScopeContext, ViewBarRecoilScopeContext: TableRecoilScopeContext,
}} }}
> >
<EntityTable updateEntityMutation={useUpdateOneCompanyMutation} /> <DataTable updateEntityMutation={useUpdateOneCompanyMutation} />
</ViewBarContext.Provider> </ViewBarContext.Provider>
</> </>
); );

View File

@ -4,9 +4,9 @@ import {
useGetPeopleQuery, useGetPeopleQuery,
} from '~/generated/graphql'; } from '~/generated/graphql';
import { useSetPeopleEntityTable } from '../hooks/useSetPeopleEntityTable'; import { useSetPeopleDataTable } from '../hooks/useSetPeopleDataTable';
export const PeopleEntityTableDataEffect = ({ export const PeopleDataTableDataEffect = ({
orderBy = [ orderBy = [
{ {
createdAt: SortOrder.Desc, createdAt: SortOrder.Desc,
@ -17,14 +17,14 @@ export const PeopleEntityTableDataEffect = ({
orderBy?: PersonOrderByWithRelationInput[]; orderBy?: PersonOrderByWithRelationInput[];
whereFilters?: any; whereFilters?: any;
}) => { }) => {
const setPeopleEntityTable = useSetPeopleEntityTable(); const setPeopleDataTable = useSetPeopleDataTable();
useGetPeopleQuery({ useGetPeopleQuery({
variables: { orderBy, where: whereFilters }, variables: { orderBy, where: whereFilters },
onCompleted: (data) => { onCompleted: (data) => {
const people = data.people ?? []; const people = data.people ?? [];
setPeopleEntityTable(people); setPeopleDataTable(people);
}, },
}); });

View File

@ -2,7 +2,7 @@ import { useLocation } from 'react-router-dom';
import { useRecoilCallback } from 'recoil'; import { useRecoilCallback } from 'recoil';
import { useResetTableRowSelection } from '@/ui/data-table/hooks/useResetTableRowSelection'; import { useResetTableRowSelection } from '@/ui/data-table/hooks/useResetTableRowSelection';
import { isFetchingEntityTableDataState } from '@/ui/data-table/states/isFetchingEntityTableDataState'; import { isFetchingDataTableDataState } from '@/ui/data-table/states/isFetchingDataTableDataState';
import { numberOfTableRowsState } from '@/ui/data-table/states/numberOfTableRowsState'; import { numberOfTableRowsState } from '@/ui/data-table/states/numberOfTableRowsState';
import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { tableRowIdsState } from '@/ui/data-table/states/tableRowIdsState'; import { tableRowIdsState } from '@/ui/data-table/states/tableRowIdsState';
@ -21,7 +21,7 @@ import { peopleLinkedinUrlFamilyState } from '../states/peopleLinkedinUrlFamilyS
import { peopleNameCellFamilyState } from '../states/peopleNamesFamilyState'; import { peopleNameCellFamilyState } from '../states/peopleNamesFamilyState';
import { peoplePhoneFamilyState } from '../states/peoplePhoneFamilyState'; import { peoplePhoneFamilyState } from '../states/peoplePhoneFamilyState';
export const useSetPeopleEntityTable = () => { export const useSetPeopleDataTable = () => {
const resetTableRowSelection = useResetTableRowSelection(); const resetTableRowSelection = useResetTableRowSelection();
const tableContextScopeId = useRecoilScopeId(TableRecoilScopeContext); const tableContextScopeId = useRecoilScopeId(TableRecoilScopeContext);
@ -130,7 +130,7 @@ export const useSetPeopleEntityTable = () => {
set(currentPageLocationState, currentLocation); set(currentPageLocationState, currentLocation);
set(isFetchingEntityTableDataState, false); set(isFetchingDataTableDataState, false);
}, },
[currentLocation, resetTableRowSelection, tableContextScopeId], [currentLocation, resetTableRowSelection, tableContextScopeId],
); );

View File

@ -3,10 +3,10 @@ import { getPeopleOptimisticEffectDefinition } from '@/people/graphql/optimistic
import { usePersonTableContextMenuEntries } from '@/people/hooks/usePeopleTableContextMenuEntries'; import { usePersonTableContextMenuEntries } from '@/people/hooks/usePeopleTableContextMenuEntries';
import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries'; import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries';
import { useSpreadsheetPersonImport } from '@/people/hooks/useSpreadsheetPersonImport'; import { useSpreadsheetPersonImport } from '@/people/hooks/useSpreadsheetPersonImport';
import { EntityTable } from '@/ui/data-table/components/EntityTable'; import { DataTable } from '@/ui/data-table/components/DataTable';
import { EntityTableEffect } from '@/ui/data-table/components/EntityTableEffect'; import { DataTableEffect } from '@/ui/data-table/components/DataTableEffect';
import { TableContext } from '@/ui/data-table/contexts/TableContext'; import { TableContext } from '@/ui/data-table/contexts/TableContext';
import { useUpsertEntityTableItem } from '@/ui/data-table/hooks/useUpsertEntityTableItem'; import { useUpsertDataTableItem } from '@/ui/data-table/hooks/useUpsertDataTableItem';
import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext'; import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
@ -32,7 +32,7 @@ export const PeopleTable = () => {
); );
const [updateEntityMutation] = useUpdateOnePersonMutation(); const [updateEntityMutation] = useUpdateOnePersonMutation();
const upsertEntityTableItem = useUpsertEntityTableItem(); const upsertDataTableItem = useUpsertDataTableItem();
const { openPersonSpreadsheetImport } = useSpreadsheetPersonImport(); const { openPersonSpreadsheetImport } = useSpreadsheetPersonImport();
const { const {
@ -55,7 +55,7 @@ export const PeopleTable = () => {
return ( return (
<TableContext.Provider value={{ onColumnsChange: persistColumns }}> <TableContext.Provider value={{ onColumnsChange: persistColumns }}>
<EntityTableEffect <DataTableEffect
getRequestResultKey="people" getRequestResultKey="people"
useGetRequest={useGetPeopleQuery} useGetRequest={useGetPeopleQuery}
getRequestOptimisticEffectDefinition={ getRequestOptimisticEffectDefinition={
@ -79,7 +79,7 @@ export const PeopleTable = () => {
ViewBarRecoilScopeContext: TableRecoilScopeContext, ViewBarRecoilScopeContext: TableRecoilScopeContext,
}} }}
> >
<EntityTable <DataTable
updateEntityMutation={({ updateEntityMutation={({
variables, variables,
}: { }: {
@ -91,7 +91,7 @@ export const PeopleTable = () => {
if (!data.updateOnePerson) { if (!data.updateOnePerson) {
return; return;
} }
upsertEntityTableItem(data.updateOnePerson); upsertDataTableItem(data.updateOnePerson);
}, },
}) })
} }

View File

@ -5,7 +5,7 @@ import { ActionBar } from '@/ui/action-bar/components/ActionBar';
import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSelector'; import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSelector';
export const EntityTableActionBar = () => { export const DataTableActionBar = () => {
const selectedRowIds = useRecoilValue(selectedRowIdsSelector); const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
return <ActionBar selectedIds={selectedRowIds} />; return <ActionBar selectedIds={selectedRowIds} />;

View File

@ -17,8 +17,8 @@ import { useSetRowSelectedState } from '../hooks/useSetRowSelectedState';
import { TableHeader } from '../table-header/components/TableHeader'; import { TableHeader } from '../table-header/components/TableHeader';
import { TableHotkeyScope } from '../types/TableHotkeyScope'; import { TableHotkeyScope } from '../types/TableHotkeyScope';
import { EntityTableBody } from './EntityTableBody'; import { DataTableBody } from './DataTableBody';
import { EntityTableHeader } from './EntityTableHeader'; import { DataTableHeader } from './DataTableHeader';
const StyledTable = styled.table` const StyledTable = styled.table`
border-collapse: collapse; border-collapse: collapse;
@ -86,7 +86,7 @@ type OwnProps = {
updateEntityMutation: (params: any) => void; updateEntityMutation: (params: any) => void;
}; };
export const EntityTable = ({ updateEntityMutation }: OwnProps) => { export const DataTable = ({ updateEntityMutation }: OwnProps) => {
const tableBodyRef = useRef<HTMLDivElement>(null); const tableBodyRef = useRef<HTMLDivElement>(null);
const setRowSelectedState = useSetRowSelectedState(); const setRowSelectedState = useSetRowSelectedState();
@ -127,8 +127,8 @@ export const EntityTable = ({ updateEntityMutation }: OwnProps) => {
<ScrollWrapper> <ScrollWrapper>
<div> <div>
<StyledTable className="entity-table-cell"> <StyledTable className="entity-table-cell">
<EntityTableHeader /> <DataTableHeader />
<EntityTableBody /> <DataTableBody />
</StyledTable> </StyledTable>
</div> </div>
</ScrollWrapper> </ScrollWrapper>

View File

@ -7,10 +7,10 @@ import { useScrollWrapperScopedRef } from '@/ui/utilities/scroll/hooks/useScroll
import { RowIdContext } from '../contexts/RowIdContext'; import { RowIdContext } from '../contexts/RowIdContext';
import { RowIndexContext } from '../contexts/RowIndexContext'; import { RowIndexContext } from '../contexts/RowIndexContext';
import { isFetchingEntityTableDataState } from '../states/isFetchingEntityTableDataState'; import { isFetchingDataTableDataState } from '../states/isFetchingDataTableDataState';
import { tableRowIdsState } from '../states/tableRowIdsState'; import { tableRowIdsState } from '../states/tableRowIdsState';
import { EntityTableRow } from './EntityTableRow'; import { DataTableRow } from './DataTableRow';
type SpaceProps = { type SpaceProps = {
top?: number; top?: number;
@ -22,15 +22,13 @@ const StyledSpace = styled.td<SpaceProps>`
${({ bottom }) => bottom && `padding-bottom: ${bottom}px;`} ${({ bottom }) => bottom && `padding-bottom: ${bottom}px;`}
`; `;
export const EntityTableBody = () => { export const DataTableBody = () => {
const scrollWrapperRef = useScrollWrapperScopedRef(); const scrollWrapperRef = useScrollWrapperScopedRef();
const tableRowIds = useRecoilValue(tableRowIdsState); const tableRowIds = useRecoilValue(tableRowIdsState);
const isNavbarSwitchingSize = useRecoilValue(isNavbarSwitchingSizeState); const isNavbarSwitchingSize = useRecoilValue(isNavbarSwitchingSizeState);
const isFetchingEntityTableData = useRecoilValue( const isFetchingDataTableData = useRecoilValue(isFetchingDataTableDataState);
isFetchingEntityTableDataState,
);
const rowVirtualizer = useVirtual({ const rowVirtualizer = useVirtual({
size: tableRowIds.length, size: tableRowIds.length,
@ -45,7 +43,7 @@ export const EntityTableBody = () => {
? rowVirtualizer.totalSize - items[items.length - 1].end ? rowVirtualizer.totalSize - items[items.length - 1].end
: 0; : 0;
if (isFetchingEntityTableData || isNavbarSwitchingSize) { if (isFetchingDataTableData || isNavbarSwitchingSize) {
return null; return null;
} }
@ -62,7 +60,7 @@ export const EntityTableBody = () => {
return ( return (
<RowIdContext.Provider value={rowId} key={rowId}> <RowIdContext.Provider value={rowId} key={rowId}>
<RowIndexContext.Provider value={virtualItem.index}> <RowIndexContext.Provider value={virtualItem.index}>
<EntityTableRow <DataTableRow
key={virtualItem.index} key={virtualItem.index}
ref={virtualItem.measureRef} ref={virtualItem.measureRef}
rowId={rowId} rowId={rowId}

View File

@ -16,7 +16,7 @@ import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
import { TableCell } from '../table-cell/components/TableCell'; import { TableCell } from '../table-cell/components/TableCell';
import { TableHotkeyScope } from '../types/TableHotkeyScope'; import { TableHotkeyScope } from '../types/TableHotkeyScope';
export const EntityTableCell = ({ cellIndex }: { cellIndex: number }) => { export const DataTableCell = ({ cellIndex }: { cellIndex: number }) => {
const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState); const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
const currentRowId = useContext(RowIdContext); const currentRowId = useContext(RowIdContext);

View File

@ -14,10 +14,10 @@ import { FilterDefinition } from '@/ui/view-bar/types/FilterDefinition';
import { SortDefinition } from '@/ui/view-bar/types/SortDefinition'; import { SortDefinition } from '@/ui/view-bar/types/SortDefinition';
import { SortOrder } from '~/generated/graphql'; import { SortOrder } from '~/generated/graphql';
import { useSetEntityTableData } from '../hooks/useSetEntityTableData'; import { useSetDataTableData } from '../hooks/useSetDataTableData';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext'; import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
export const EntityTableEffect = ({ export const DataTableEffect = ({
useGetRequest, useGetRequest,
getRequestResultKey, getRequestResultKey,
getRequestOptimisticEffectDefinition, getRequestOptimisticEffectDefinition,
@ -45,7 +45,7 @@ export const EntityTableEffect = ({
setActionBarEntries?: () => void; setActionBarEntries?: () => void;
setContextMenuEntries?: () => void; setContextMenuEntries?: () => void;
}) => { }) => {
const setEntityTableData = useSetEntityTableData(); const setDataTableData = useSetDataTableData();
const { registerOptimisticEffect } = useOptimisticEffect(); const { registerOptimisticEffect } = useOptimisticEffect();
useGetRequest({ useGetRequest({
@ -53,7 +53,7 @@ export const EntityTableEffect = ({
onCompleted: (data: any) => { onCompleted: (data: any) => {
const entities = data[getRequestResultKey] ?? []; const entities = data[getRequestResultKey] ?? [];
setEntityTableData(entities, filterDefinitionArray, sortDefinitionArray); setDataTableData(entities, filterDefinitionArray, sortDefinitionArray);
registerOptimisticEffect({ registerOptimisticEffect({
variables: { orderBy, where: whereFilters }, variables: { orderBy, where: whereFilters },

View File

@ -18,7 +18,7 @@ import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTa
import { tableColumnsScopedState } from '../states/tableColumnsScopedState'; import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown'; import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown';
import { EntityTableColumnMenu } from './EntityTableColumnMenu'; import { DataTableHeaderPlusButton } from './DataTableHeaderPlusButton';
import { SelectAllCheckbox } from './SelectAllCheckbox'; import { SelectAllCheckbox } from './SelectAllCheckbox';
const COLUMN_MIN_WIDTH = 75; const COLUMN_MIN_WIDTH = 75;
@ -65,7 +65,7 @@ const StyledAddIconButtonWrapper = styled.div`
position: relative; position: relative;
`; `;
const StyledEntityTableColumnMenu = styled(EntityTableColumnMenu)` const StyledDataTableColumnMenu = styled(DataTableHeaderPlusButton)`
position: absolute; position: absolute;
right: 0; right: 0;
top: 100%; top: 100%;
@ -81,7 +81,7 @@ const StyledColumnHeadContainer = styled.div`
z-index: 1; z-index: 1;
`; `;
export const EntityTableHeader = () => { export const DataTableHeader = () => {
const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState( const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState(
resizeFieldOffsetState, resizeFieldOffsetState,
); );
@ -219,7 +219,7 @@ export const EntityTableHeader = () => {
position="middle" position="middle"
/> />
{isColumnMenuOpen && ( {isColumnMenuOpen && (
<StyledEntityTableColumnMenu <StyledDataTableColumnMenu
onAddColumn={toggleColumnMenu} onAddColumn={toggleColumnMenu}
onClickOutside={toggleColumnMenu} onClickOutside={toggleColumnMenu}
/> />

View File

@ -14,20 +14,20 @@ import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRe
import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector'; import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
import { ColumnDefinition } from '../types/ColumnDefinition'; import { ColumnDefinition } from '../types/ColumnDefinition';
const StyledColumnMenu = styled(StyledDropdownMenu)` const StyledHeaderPlusButton = styled(StyledDropdownMenu)`
font-weight: ${({ theme }) => theme.font.weight.regular}; font-weight: ${({ theme }) => theme.font.weight.regular};
`; `;
type EntityTableColumnMenuProps = { type DataTableHeaderPlusButtonProps = {
onAddColumn?: () => void; onAddColumn?: () => void;
onClickOutside?: () => void; onClickOutside?: () => void;
} & ComponentProps<'div'>; } & ComponentProps<'div'>;
export const EntityTableColumnMenu = ({ export const DataTableHeaderPlusButton = ({
onAddColumn, onAddColumn,
onClickOutside = () => undefined, onClickOutside = () => undefined,
...props ...props
}: EntityTableColumnMenuProps) => { }: DataTableHeaderPlusButtonProps) => {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const hiddenTableColumns = useRecoilScopedValue( const hiddenTableColumns = useRecoilScopedValue(
@ -52,7 +52,7 @@ export const EntityTableColumnMenu = ({
return ( return (
// eslint-disable-next-line twenty/no-spread-props // eslint-disable-next-line twenty/no-spread-props
<StyledColumnMenu {...props} ref={ref}> <StyledHeaderPlusButton {...props} ref={ref}>
<StyledDropdownMenuItemsContainer> <StyledDropdownMenuItemsContainer>
{hiddenTableColumns.map((column) => ( {hiddenTableColumns.map((column) => (
<MenuItem <MenuItem
@ -68,6 +68,6 @@ export const EntityTableColumnMenu = ({
/> />
))} ))}
</StyledDropdownMenuItemsContainer> </StyledDropdownMenuItemsContainer>
</StyledColumnMenu> </StyledHeaderPlusButton>
); );
}; };

View File

@ -0,0 +1,52 @@
import { forwardRef } from 'react';
import styled from '@emotion/styled';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { ColumnContext } from '../contexts/ColumnContext';
import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
import { CheckboxCell } from './CheckboxCell';
import { DataTableCell } from './DataTableCell';
const StyledRow = styled.tr<{ selected: boolean }>`
background: ${(props) =>
props.selected ? props.theme.accent.quaternary : 'none'};
`;
type DataTableRowProps = {
rowId: string;
};
export const DataTableRow = forwardRef<HTMLTableRowElement, DataTableRowProps>(
({ rowId }, ref) => {
const visibleTableColumns = useRecoilScopedValue(
visibleTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const { currentRowSelected } = useCurrentRowSelected();
return (
<StyledRow
ref={ref}
data-testid={`row-id-${rowId}`}
selected={currentRowSelected}
data-selectable-id={rowId}
>
<td>
<CheckboxCell />
</td>
{visibleTableColumns.map((column, columnIndex) => {
return (
<ColumnContext.Provider value={column} key={column.key}>
<DataTableCell cellIndex={columnIndex} />
</ColumnContext.Provider>
);
})}
<td></td>
</StyledRow>
);
},
);

View File

@ -1,53 +0,0 @@
import { forwardRef } from 'react';
import styled from '@emotion/styled';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { ColumnContext } from '../contexts/ColumnContext';
import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
import { CheckboxCell } from './CheckboxCell';
import { EntityTableCell } from './EntityTableCell';
const StyledRow = styled.tr<{ selected: boolean }>`
background: ${(props) =>
props.selected ? props.theme.accent.quaternary : 'none'};
`;
type EntityTableRowProps = {
rowId: string;
};
export const EntityTableRow = forwardRef<
HTMLTableRowElement,
EntityTableRowProps
>(({ rowId }, ref) => {
const visibleTableColumns = useRecoilScopedValue(
visibleTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const { currentRowSelected } = useCurrentRowSelected();
return (
<StyledRow
ref={ref}
data-testid={`row-id-${rowId}`}
selected={currentRowSelected}
data-selectable-id={rowId}
>
<td>
<CheckboxCell />
</td>
{visibleTableColumns.map((column, columnIndex) => {
return (
<ColumnContext.Provider value={column} key={column.key}>
<EntityTableCell cellIndex={columnIndex} />
</ColumnContext.Provider>
);
})}
<td></td>
</StyledRow>
);
});

View File

@ -9,7 +9,7 @@ import { ColumnHeadDropdownId } from '../constants/ColumnHeadDropdownId';
import { useTableColumns } from '../hooks/useTableColumns'; import { useTableColumns } from '../hooks/useTableColumns';
import { ColumnDefinition } from '../types/ColumnDefinition'; import { ColumnDefinition } from '../types/ColumnDefinition';
export type EntityTableHeaderOptionsProps = { export type DataTableHeaderOptionsProps = {
column: ColumnDefinition<FieldMetadata>; column: ColumnDefinition<FieldMetadata>;
isFirstColumn: boolean; isFirstColumn: boolean;
isLastColumn: boolean; isLastColumn: boolean;
@ -21,7 +21,7 @@ export const TableColumnDropdownMenu = ({
isFirstColumn, isFirstColumn,
isLastColumn, isLastColumn,
primaryColumnKey, primaryColumnKey,
}: EntityTableHeaderOptionsProps) => { }: DataTableHeaderOptionsProps) => {
const { handleColumnVisibilityChange, handleMoveTableColumn } = const { handleColumnVisibilityChange, handleMoveTableColumn } =
useTableColumns(); useTableColumns();

View File

@ -5,7 +5,7 @@ import { ContextMenu } from '@/ui/context-menu/components/ContextMenu';
import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSelector'; import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSelector';
export const EntityTableContextMenu = () => { export const DataTableContextMenu = () => {
const selectedRowIds = useRecoilValue(selectedRowIdsSelector); const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
return <ContextMenu selectedIds={selectedRowIds} />; return <ContextMenu selectedIds={selectedRowIds} />;
}; };

View File

@ -8,14 +8,14 @@ import { entityCountInCurrentViewState } from '@/ui/view-bar/states/entityCountI
import { FilterDefinition } from '@/ui/view-bar/types/FilterDefinition'; import { FilterDefinition } from '@/ui/view-bar/types/FilterDefinition';
import { SortDefinition } from '@/ui/view-bar/types/SortDefinition'; import { SortDefinition } from '@/ui/view-bar/types/SortDefinition';
import { isFetchingEntityTableDataState } from '../states/isFetchingEntityTableDataState'; import { isFetchingDataTableDataState } from '../states/isFetchingDataTableDataState';
import { numberOfTableRowsState } from '../states/numberOfTableRowsState'; import { numberOfTableRowsState } from '../states/numberOfTableRowsState';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext'; import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { tableRowIdsState } from '../states/tableRowIdsState'; import { tableRowIdsState } from '../states/tableRowIdsState';
import { useResetTableRowSelection } from './useResetTableRowSelection'; import { useResetTableRowSelection } from './useResetTableRowSelection';
export const useSetEntityTableData = () => { export const useSetDataTableData = () => {
const resetTableRowSelection = useResetTableRowSelection(); const resetTableRowSelection = useResetTableRowSelection();
const tableContextScopeId = useRecoilScopeId(TableRecoilScopeContext); const tableContextScopeId = useRecoilScopeId(TableRecoilScopeContext);
@ -63,7 +63,7 @@ export const useSetEntityTableData = () => {
sortDefinitionArray, sortDefinitionArray,
); );
set(isFetchingEntityTableDataState, false); set(isFetchingDataTableDataState, false);
}, },
[resetTableRowSelection, tableContextScopeId], [resetTableRowSelection, tableContextScopeId],
); );

View File

@ -2,7 +2,7 @@ import { useRecoilCallback } from 'recoil';
import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState'; import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState';
export const useUpsertEntityTableItem = () => export const useUpsertDataTableItem = () =>
useRecoilCallback( useRecoilCallback(
({ set, snapshot }) => ({ set, snapshot }) =>
<T extends { id: string }>(entity: T) => { <T extends { id: string }>(entity: T) => {

View File

@ -2,7 +2,7 @@ import { useRecoilCallback } from 'recoil';
import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState'; import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState';
export const useUpsertEntityTableItems = () => export const useUpsertDataTableItems = () =>
useRecoilCallback( useRecoilCallback(
({ set, snapshot }) => ({ set, snapshot }) =>
<T extends { id: string }>(entities: T[]) => { <T extends { id: string }>(entities: T[]) => {

View File

@ -0,0 +1,6 @@
import { atom } from 'recoil';
export const isFetchingDataTableDataState = atom<boolean>({
key: 'isFetchingDataTableDataState',
default: true,
});

View File

@ -1,6 +0,0 @@
import { atom } from 'recoil';
export const isFetchingEntityTableDataState = atom<boolean>({
key: 'isFetchingEntityTableDataState',
default: true,
});

View File

@ -6,9 +6,9 @@ import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimis
import { CompanyTable } from '@/companies/table/components/CompanyTable'; import { CompanyTable } from '@/companies/table/components/CompanyTable';
import { SEARCH_COMPANY_QUERY } from '@/search/graphql/queries/searchCompanyQuery'; import { SEARCH_COMPANY_QUERY } from '@/search/graphql/queries/searchCompanyQuery';
import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider'; import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
import { EntityTableActionBar } from '@/ui/data-table/action-bar/components/EntityTableActionBar'; import { DataTableActionBar } from '@/ui/data-table/action-bar/components/DataTableActionBar';
import { EntityTableContextMenu } from '@/ui/data-table/context-menu/components/EntityTableContextMenu'; import { DataTableContextMenu } from '@/ui/data-table/context-menu/components/DataTableContextMenu';
import { useUpsertEntityTableItem } from '@/ui/data-table/hooks/useUpsertEntityTableItem'; import { useUpsertDataTableItem } from '@/ui/data-table/hooks/useUpsertDataTableItem';
import { useUpsertTableRowId } from '@/ui/data-table/hooks/useUpsertTableRowId'; import { useUpsertTableRowId } from '@/ui/data-table/hooks/useUpsertTableRowId';
import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext'; import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
@ -28,7 +28,7 @@ const StyledTableContainer = styled.div`
export const Companies = () => { export const Companies = () => {
const [insertCompany] = useInsertOneCompanyMutation(); const [insertCompany] = useInsertOneCompanyMutation();
const upsertEntityTableItem = useUpsertEntityTableItem(); const upsertDataTableItem = useUpsertDataTableItem();
const upsertTableRowIds = useUpsertTableRowId(); const upsertTableRowIds = useUpsertTableRowId();
const { triggerOptimisticEffects } = useOptimisticEffect(); const { triggerOptimisticEffects } = useOptimisticEffect();
@ -46,7 +46,7 @@ export const Companies = () => {
update: (_cache, { data }) => { update: (_cache, { data }) => {
if (data?.createOneCompany) { if (data?.createOneCompany) {
upsertTableRowIds(data?.createOneCompany.id); upsertTableRowIds(data?.createOneCompany.id);
upsertEntityTableItem(data?.createOneCompany); upsertDataTableItem(data?.createOneCompany);
triggerOptimisticEffects('Company', [data?.createOneCompany]); triggerOptimisticEffects('Company', [data?.createOneCompany]);
} }
}, },
@ -71,8 +71,8 @@ export const Companies = () => {
<StyledTableContainer> <StyledTableContainer>
<CompanyTable /> <CompanyTable />
</StyledTableContainer> </StyledTableContainer>
<EntityTableActionBar /> <DataTableActionBar />
<EntityTableContextMenu /> <DataTableContextMenu />
</RecoilScope> </RecoilScope>
</PageBody> </PageBody>
</PageContainer> </PageContainer>

View File

@ -4,9 +4,9 @@ import { v4 } from 'uuid';
import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect'; import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
import { PeopleTable } from '@/people/table/components/PeopleTable'; import { PeopleTable } from '@/people/table/components/PeopleTable';
import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider'; import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
import { EntityTableActionBar } from '@/ui/data-table/action-bar/components/EntityTableActionBar'; import { DataTableActionBar } from '@/ui/data-table/action-bar/components/DataTableActionBar';
import { EntityTableContextMenu } from '@/ui/data-table/context-menu/components/EntityTableContextMenu'; import { DataTableContextMenu } from '@/ui/data-table/context-menu/components/DataTableContextMenu';
import { useUpsertEntityTableItem } from '@/ui/data-table/hooks/useUpsertEntityTableItem'; import { useUpsertDataTableItem } from '@/ui/data-table/hooks/useUpsertDataTableItem';
import { useUpsertTableRowId } from '@/ui/data-table/hooks/useUpsertTableRowId'; import { useUpsertTableRowId } from '@/ui/data-table/hooks/useUpsertTableRowId';
import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext'; import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
@ -26,7 +26,7 @@ const StyledTableContainer = styled.div`
export const People = () => { export const People = () => {
const [insertOnePerson] = useInsertOnePersonMutation(); const [insertOnePerson] = useInsertOnePersonMutation();
const upsertEntityTableItem = useUpsertEntityTableItem(); const upsertDataTableItem = useUpsertDataTableItem();
const upsertTableRowIds = useUpsertTableRowId(); const upsertTableRowIds = useUpsertTableRowId();
const { triggerOptimisticEffects } = useOptimisticEffect(); const { triggerOptimisticEffects } = useOptimisticEffect();
@ -43,7 +43,7 @@ export const People = () => {
update: (_cache, { data }) => { update: (_cache, { data }) => {
if (data?.createOnePerson) { if (data?.createOnePerson) {
upsertTableRowIds(data?.createOnePerson.id); upsertTableRowIds(data?.createOnePerson.id);
upsertEntityTableItem(data?.createOnePerson); upsertDataTableItem(data?.createOnePerson);
triggerOptimisticEffects('Person', [data?.createOnePerson]); triggerOptimisticEffects('Person', [data?.createOnePerson]);
} }
}, },
@ -67,8 +67,8 @@ export const People = () => {
<StyledTableContainer> <StyledTableContainer>
<PeopleTable /> <PeopleTable />
</StyledTableContainer> </StyledTableContainer>
<EntityTableActionBar /> <DataTableActionBar />
<EntityTableContextMenu /> <DataTableContextMenu />
</RecoilScope> </RecoilScope>
</PageBody> </PageBody>
</PageContainer> </PageContainer>