Skip to content

Commit

Permalink
Move web editor logic to shared
Browse files Browse the repository at this point in the history
  • Loading branch information
jakzaizzat committed Apr 19, 2024
1 parent 22d1022 commit edd9cea
Show file tree
Hide file tree
Showing 17 changed files with 159 additions and 286 deletions.
115 changes: 1 addition & 114 deletions apps/mobile/src/contexts/GalleryEditor/collectionLayout.ts
Original file line number Diff line number Diff line change
@@ -1,102 +1,6 @@
import { graphql } from 'react-relay';
import { readInlineData } from 'relay-runtime';

import { collectionLayoutParseFragment$key } from '~/generated/collectionLayoutParseFragment.graphql';
import { removeNullValues } from '~/shared/relay/removeNullValues';

import { StagedItem, StagedRowList } from './types';
import { DEFAULT_COLUMNS, generate12DigitId } from './util';
// This file contains helper methods to manipulate collections, layouts, and related data used for the Collection Editor and its drag and drop interface.

type WhitespaceBlock = {
id: string;
whitespace: 'whitespace';
};

type Section<T> = {
id: string;
items: ReadonlyArray<T | WhitespaceBlock>;
columns: number;
};
type CollectionWithLayout<T> = Array<Section<T>>;

export function parseCollectionLayoutGraphql<T>(
tokens: T[],
collectionLayoutRef: collectionLayoutParseFragment$key,
ignoreWhitespace = false
): CollectionWithLayout<T> {
const layout = readInlineData(
graphql`
fragment collectionLayoutParseFragment on CollectionLayout @inline {
sections
sectionLayout {
whitespace
columns
}
}
`,
collectionLayoutRef
);

const sections = removeNullValues(layout?.sections ?? []);
const sectionLayout = removeNullValues(layout?.sectionLayout ?? []);

return parseCollectionLayout(
tokens,
{
sections,
sectionLayout,
},
ignoreWhitespace
);
}

type CollectionLayout = {
sections: Array<number>;
sectionLayout: Array<{ whitespace: ReadonlyArray<number | null> | null; columns: number | null }>;
};

// Given a list of tokens in the collection and the collection layout settings,
// returns an object that represents the full structure of the collection layout with sections, items, and whitespace blocks.
export function parseCollectionLayout<T>(
tokens: ReadonlyArray<T>,
collectionLayout: CollectionLayout,
ignoreWhitespace = false
): CollectionWithLayout<T> {
if (tokens.length === 0) {
return [{ id: generate12DigitId(), items: [], columns: DEFAULT_COLUMNS }];
}

const parsedCollection = collectionLayout.sections.reduce(
(allSections: CollectionWithLayout<T>, sectionStartIndex: number, index: number) => {
const nextSection = collectionLayout.sections[index + 1];
const sectionEndIndex = nextSection ? nextSection - 1 : tokens.length;

let section: ReadonlyArray<T | WhitespaceBlock> = tokens.slice(
sectionStartIndex,
sectionEndIndex + 1
);
if (!ignoreWhitespace) {
section = insertWhitespaceBlocks(
section,
removeNullValues(collectionLayout.sectionLayout[index]?.whitespace)
);
}
const sectionId = generate12DigitId();

allSections.push({
id: sectionId,
items: section,
columns: collectionLayout.sectionLayout[index]?.columns ?? 1,
});

return allSections;
},
[]
);

return parsedCollection;
}
// This file contains helper methods to manipulate collections, layouts, and related data used for the Collection Editor and its drag and drop interface.

// Each value in the whitespace list represents the index of the NFT that a whitespace appears before.
// For example, whitespace: [0] means that there is one whitespace before the first NFT in the collection.
Expand Down Expand Up @@ -177,20 +81,3 @@ export function getWhitespacePositionsFromSection(sectionItems: StagedItem[]): n
});
return result;
}

export function insertWhitespaceBlocks<T>(
items: ReadonlyArray<T>,
whitespaceList: number[]
): Array<T | WhitespaceBlock> {
const result: Array<T | WhitespaceBlock> = [...items];
// Insert whitespace blocks into the list of items to stage according to the saved whitespace indexes.
// Offset the index to insert at by the number of whitespaces already added
whitespaceList.forEach((index, offset) =>
result.splice(index + offset, 0, {
id: `blank-${generate12DigitId()}`,
whitespace: 'whitespace',
})
);

return result;
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import { readInlineData } from 'relay-runtime';

import { getInitialCollectionsFromServerFragment$key } from '~/generated/getInitialCollectionsFromServerFragment.graphql';
import { removeNullValues } from '~/shared/relay/removeNullValues';
import { parseCollectionLayoutGraphql } from '~/shared/utils/collectionLayout';
import { generate12DigitId } from '~/shared/utils/generate12DigitId';

import { parseCollectionLayoutGraphql } from './collectionLayout';
import { StagedRowList, StagedSection, StagedSectionList } from './types';
import { generate12DigitId } from './util';

export function getInitialCollectionsFromServer(
galleryRef: getInitialCollectionsFromServerFragment$key
Expand Down
13 changes: 0 additions & 13 deletions apps/mobile/src/contexts/GalleryEditor/util.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,3 @@
export function generate12DigitId() {
return Math.round(Math.random() * 1000000000000).toString();
}

export const DEFAULT_COLUMNS = 3;
export const MIN_COLUMNS = 1;
export const SOFT_CAP_MAX_COLUMNS = 6;
export const HARD_CAP_MAX_COLUMNS = 10;

export function isValidColumns(columns: number) {
return columns >= MIN_COLUMNS && columns <= HARD_CAP_MAX_COLUMNS;
}

// https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/sortable/src/utilities/arrayMove.ts
/**
* Move an array item to a different position. Returns a new array with the item moved to the new position.
Expand Down
6 changes: 3 additions & 3 deletions apps/mobile/src/utils/isFeatureEnabled.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@ const ROLE_FLAGS: Record<Role, Record<FeatureFlag, boolean>> = {
GALLERY_EDITOR: true,
},
BETA_TESTER: {
GALLERY_EDITOR: false,
GALLERY_EDITOR: true,
},
EARLY_ACCESS: {
GALLERY_EDITOR: false,
GALLERY_EDITOR: true,
},
EMAIL_TESTER: {
GALLERY_EDITOR: false,
GALLERY_EDITOR: true,
},
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import IconContainer from '~/components/core/IconContainer';
import { HStack } from '~/components/core/Spacer/Stack';
import { BaseM, TitleDiatypeM } from '~/components/core/Text/Text';
import { useCollectionEditorContext } from '~/contexts/collectionEditor/CollectionEditorContext';
import useMaxColumns from '~/contexts/collectionEditor/useMaxColumns';
import { ColumnAdjusterQuery } from '~/generated/ColumnAdjusterQuery.graphql';
import CircleMinusIcon from '~/icons/CircleMinusIcon';
import CirclePlusIcon from '~/icons/CirclePlusIcon';
import useMaxColumnsGalleryEditor from '~/shared/hooks/useMaxColumnsGalleryEditor';
import colors from '~/shared/theme/colors';

type Props = {
Expand All @@ -23,7 +23,7 @@ function ColumnAdjuster({ sectionId }: Props) {
viewer {
... on Viewer {
__typename
...useMaxColumnsFragment
...useMaxColumnsGalleryEditorFragment
}
}
}
Expand All @@ -35,7 +35,7 @@ function ColumnAdjuster({ sectionId }: Props) {
throw new Error('Expected viewer to be present');
}

const maxColumns = useMaxColumns(query.viewer);
const maxColumns = useMaxColumnsGalleryEditor(query.viewer);

const { incrementColumns, decrementColumns, activeSectionId, sections } =
useCollectionEditorContext();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ import { useTrack } from '~/shared/contexts/AnalyticsContext';
import { useReportError } from '~/shared/contexts/ErrorReportingContext';
import { ErrorWithSentryMetadata } from '~/shared/errors/ErrorWithSentryMetadata';
import { usePromisifiedMutation } from '~/shared/relay/usePromisifiedMutation';
import { generate12DigitId } from '~/shared/utils/generate12DigitId';
import { generateLayoutFromCollection } from '~/utils/collectionLayout';
import { generate12DigitId } from '~/utils/generate12DigitId';

import { getAutogeneratedGallery } from './getAutogeneratedGallery';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { graphql, readInlineData } from 'react-relay';

import { getAutogeneratedGalleryFragment$key } from '~/generated/getAutogeneratedGalleryFragment.graphql';
import { removeNullValues } from '~/shared/relay/removeNullValues';
import { generate12DigitId } from '~/utils/generate12DigitId';
import { generate12DigitId } from '~/shared/utils/generate12DigitId';

import { StagedCollectionList, StagedSection } from './GalleryEditorContext';
import { groupCollectionsByAddress } from './PiecesSidebar/groupCollectionsByAddress';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import {
} from '~/components/GalleryEditor/GalleryEditorContext';
import { getInitialCollectionsFromServerFragment$key } from '~/generated/getInitialCollectionsFromServerFragment.graphql';
import { removeNullValues } from '~/shared/relay/removeNullValues';
import { parseCollectionLayoutGraphql } from '~/utils/collectionLayout';
import { generate12DigitId } from '~/utils/generate12DigitId';
import { parseCollectionLayoutGraphql } from '~/shared/utils/collectionLayout';
import { generate12DigitId } from '~/shared/utils/generate12DigitId';

export function getInitialCollectionsFromServer(
galleryRef: getInitialCollectionsFromServerFragment$key
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/NftGallery/NftGallery.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import NftPreviewWrapper from '~/components/NftPreview/GalleryNftPreviewWrapper'
import { NftGalleryFragment$key } from '~/generated/NftGalleryFragment.graphql';
import { NftGalleryQueryFragment$key } from '~/generated/NftGalleryQueryFragment.graphql';
import { removeNullValues } from '~/shared/relay/removeNullValues';
import { parseCollectionLayoutGraphql } from '~/utils/collectionLayout';
import { parseCollectionLayoutGraphql } from '~/shared/utils/collectionLayout';

type Props = {
queryRef: NftGalleryQueryFragment$key;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
StagedSectionList,
useGalleryEditorContext,
} from '~/components/GalleryEditor/GalleryEditorContext';
import { generate12DigitId } from '~/utils/generate12DigitId';
import { generate12DigitId } from '~/shared/utils/generate12DigitId';

const deepClone = rfdc();

Expand Down
29 changes: 0 additions & 29 deletions apps/web/src/contexts/collectionEditor/useMaxColumns.ts

This file was deleted.

3 changes: 1 addition & 2 deletions apps/web/src/utils/collectionLayout.test.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { StagedItem } from '~/components/GalleryEditor/GalleryEditorContext';
import { insertWhitespaceBlocks, parseCollectionLayout } from '~/shared/utils/collectionLayout';

import {
generateLayoutFromCollection,
getWhitespacePositionsFromStagedItems,
insertWhitespaceBlocks,
parseCollectionLayout,
} from './collectionLayout';

function generateTestNft(): StagedItem {
Expand Down
Loading

0 comments on commit edd9cea

Please sign in to comment.