admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Make token update synchronous on FE (#11486)

Browse Source 
1. Removing tokenPair internal variable of ApolloFactory. We will relay
on cookieStorage
2. setting the cookie explicitely instead of only relaying on recoil
cookieEffect which is too late
This commit is contained in:
Charles Bochet
2025-04-10 01:39:25 +02:00
committed by GitHub
parent 7bd68ad176
commit a7e6564017
28 changed files with 160 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/EmailsFieldDisplay.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import { useEmailsField } from '@/object-record/record-field/meta-types/hooks/useEmailsField';
import { useEmailsFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useEmailsFieldDisplay';
import { EmailsDisplay } from '@/ui/field/display/components/EmailsDisplay';
export const EmailsFieldDisplay = () => {
const { fieldValue } = useEmailsField();
const { fieldValue } = useEmailsFieldDisplay();
return <EmailsDisplay value={fieldValue} />;
};
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx
+1 -4
View File
@@ -2,9 +2,7 @@ import { Theme, withTheme } from '@emotion/react';
import { styled } from '@linaria/react';
import { Ref } from 'react';
const StyledOuterContainer = styled.div<{
hasSoftFocus?: boolean;
}>`
const StyledOuterContainer = styled.div`
align-items: center;
display: flex;
height: 100%;
@@ -50,7 +48,6 @@ export const RecordTableCellDisplayContainer = ({
}
onClick={onClick}
ref={scrollRef}
hasSoftFocus={softFocus}
onContextMenu={onContextMenu}
>
{placeholderForEmptyCell ? (
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellWrapper.tsx
+1 -2
View File
@@ -1,5 +1,3 @@
import { useMemo } from 'react';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
@@ -9,6 +7,7 @@ import { isTableCellInEditModeComponentFamilyState } from '@/object-record/recor
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
import { useMemo } from 'react';
export const RecordTableCellWrapper = ({
children,
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx
+6 -12
View File
@@ -18,25 +18,19 @@ const StyledTd = styled.td<{
width?: number;
}>`
border-bottom: 1px solid
${({ borderColor, hasBottomBorder }) =>
hasBottomBorder ? borderColor : 'transparent'};
${({ borderColor, hasBottomBorder, isDragging }) =>
hasBottomBorder && !isDragging ? borderColor : 'transparent'};
color: ${({ fontColor }) => fontColor};
border-right: ${({ borderColor, hasRightBorder }) =>
hasRightBorder ? `1px solid ${borderColor}` : 'none'};
border-right: ${({ borderColor, hasRightBorder, isDragging }) =>
hasRightBorder && !isDragging ? `1px solid ${borderColor}` : 'none'};
padding: 0;
transition: 0.3s ease;
text-align: left;
background: ${({ backgroundColor }) => backgroundColor};
${({ isDragging }) =>
isDragging
? `
background-color: transparent;
border-color: transparent;
`
: ''}
background: ${({ backgroundColor, isDragging }) =>
isDragging ? 'transparent' : backgroundColor};
${({ freezeFirstColumns }) =>
freezeFirstColumns
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx
+16 -7
View File
@@ -6,10 +6,9 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { onToggleColumnFilterComponentState } from '@/object-record/record-table/states/onToggleColumnFilterComponentState';
import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState';
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
import { useToggleScrollWrapper } from '@/ui/utilities/scroll/hooks/useToggleScrollWrapper';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useLingui } from '@lingui/react/macro';
import { useTableColumns } from '../../hooks/useTableColumns';
import { ColumnDefinition } from '../../types/ColumnDefinition';
import {
IconArrowLeft,
IconArrowRight,
@@ -18,6 +17,8 @@ import {
IconSortDescending,
} from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
import { useTableColumns } from '../../hooks/useTableColumns';
import { ColumnDefinition } from '../../types/ColumnDefinition';
export type RecordTableColumnHeadDropdownMenuProps = {
column: ColumnDefinition<FieldMetadata>;
@@ -28,6 +29,9 @@ export const RecordTableColumnHeadDropdownMenu = ({
}: RecordTableColumnHeadDropdownMenuProps) => {
const { t } = useLingui();
const { toggleScrollXWrapper, toggleScrollYWrapper } =
useToggleScrollWrapper();
const visibleTableColumns = useRecoilComponentValueV2(
visibleTableColumnsComponentSelector,
);
@@ -46,16 +50,21 @@ export const RecordTableColumnHeadDropdownMenu = ({
const { closeDropdown } = useDropdown(column.fieldMetadataId + '-header');
const handleColumnMoveLeft = () => {
const closeDropdownAndToggleScroll = () => {
closeDropdown();
toggleScrollXWrapper(true);
toggleScrollYWrapper(false);
};
const handleColumnMoveLeft = () => {
closeDropdownAndToggleScroll();
if (!canMoveLeft) return;
handleMoveTableColumn('left', column);
};
const handleColumnMoveRight = () => {
closeDropdown();
closeDropdownAndToggleScroll();
if (!canMoveRight) return;
@@ -63,7 +72,7 @@ export const RecordTableColumnHeadDropdownMenu = ({
};
const handleColumnVisibility = () => {
closeDropdown();
closeDropdownAndToggleScroll();
handleColumnVisibilityChange(column);
};
@@ -75,13 +84,13 @@ export const RecordTableColumnHeadDropdownMenu = ({
);
const handleSortClick = () => {
closeDropdown();
closeDropdownAndToggleScroll();
onToggleColumnSort?.(column.fieldMetadataId);
};
const handleFilterClick = () => {
closeDropdown();
closeDropdownAndToggleScroll();
onToggleColumnFilter?.(column.fieldMetadataId);
};
packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableTrEffect.tsx
+1 -9
View File
@@ -1,4 +1,3 @@
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { isRowVisibleComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowVisibleComponentFamilyState';
import { useScrollWrapperElement } from '@/ui/utilities/scroll/hooks/useScrollWrapperElement';
import { useSetRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyStateV2';
@@ -9,7 +8,6 @@ type RecordTableTrEffectProps = {
};
export const RecordTableTrEffect = ({ recordId }: RecordTableTrEffectProps) => {
const { onIndexRecordsLoaded } = useRecordIndexContextOrThrow();
const { scrollWrapperHTMLElement } = useScrollWrapperElement();
const setIsRowVisible = useSetRecoilComponentFamilyStateV2(
@@ -29,7 +27,6 @@ export const RecordTableTrEffect = ({ recordId }: RecordTableTrEffectProps) => {
const isIntersecting = entry.isIntersecting;
if (isIntersecting) {
onIndexRecordsLoaded?.();
setIsRowVisible(true);
}
@@ -50,12 +47,7 @@ export const RecordTableTrEffect = ({ recordId }: RecordTableTrEffectProps) => {
return () => {
observer.disconnect();
};
}, [
onIndexRecordsLoaded,
recordId,
scrollWrapperHTMLElement,
setIsRowVisible,
]);
}, [recordId, scrollWrapperHTMLElement, setIsRowVisible]);
return <></>;
};