Skip to content

Commit

Permalink
feat(auto-sync): Add an AutoSyncProvider and trigger a sync changes w…
Browse files Browse the repository at this point in the history
…hen needed
  • Loading branch information
xrutayisire committed Feb 1, 2024
1 parent 278aa67 commit 4c01c1a
Showing 14 changed files with 483 additions and 245 deletions.
Original file line number Diff line number Diff line change
@@ -6,19 +6,23 @@ import { ChangesSectionHeader } from "@components/ChangesSectionHeader";
import { CustomTypeTable } from "@components/CustomTypeTable/changesPage";
import Grid from "@components/Grid";
import { ComponentUI } from "@lib/models/common/ComponentUI";
import { ModelStatusInformation } from "@src/hooks/useModelStatus";
import ScreenshotChangesModal from "@components/ScreenshotChangesModal";
import { countMissingScreenshots } from "@src/domain/slice";
import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
import { ModelStatus } from "@lib/models/common/ModelStatus";
import { LocalOrRemoteCustomType } from "@lib/models/common/ModelData";
import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
import { ModelsStatuses } from "@src/hooks/useUnSyncChanges";
import { AuthStatus } from "@src/modules/userContext/types";

import { DevCollaborationExperiment } from "./DevCollaborationExperiment";

interface ChangesItemsProps extends ModelStatusInformation {
interface ChangesItemsProps {
unSyncedCustomTypes: LocalOrRemoteCustomType[];
unSyncedSlices: ComponentUI[];
modelsStatuses: ModelsStatuses;
authStatus: AuthStatus;
isOnline: boolean;
}

export const ChangesItems: React.FC<ChangesItemsProps> = ({
19 changes: 12 additions & 7 deletions packages/slice-machine/components/CustomTypeTable/changesPage.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import Link from "next/link";
import React from "react";
import { Box, Text } from "theme-ui";
import { ModelStatusInformation } from "@src/hooks/useModelStatus";
import { CustomTypeSM } from "@lib/models/common/CustomType";
import { ModelStatus } from "@lib/models/common/ModelStatus";
import {
@@ -10,18 +9,26 @@ import {
} from "@lib/models/common/ModelData";
import { StatusBadge } from "@src/features/changes/StatusBadge";
import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
import { AuthStatus } from "@src/modules/userContext/types";
import { ModelsStatuses } from "@src/hooks/useUnSyncChanges";

interface CustomTypeTableProps extends ModelStatusInformation {
interface CustomTypeTableProps {
customTypes: LocalOrRemoteCustomType[];
modelsStatuses: ModelsStatuses;
authStatus: AuthStatus;
isOnline: boolean;
}

const firstColumnWidth = "40%";
const secondColumnWidth = "40%";
const thirdColumnWidth = "20%";

const CustomTypeChangeRow: React.FC<
{ ct: CustomTypeSM; status: ModelStatus } & ModelStatusInformation
> = ({ ct, status, authStatus, isOnline }) => {
const CustomTypeChangeRow: React.FC<{
ct: CustomTypeSM;
status: ModelStatus;
authStatus: AuthStatus;
isOnline: boolean;
}> = ({ ct, status, authStatus, isOnline }) => {
return (
<>
<Box as={"td"} style={{ width: firstColumnWidth }}>
@@ -80,7 +87,6 @@ export const CustomTypeTable: React.FC<CustomTypeTableProps> = ({
status={modelsStatuses.customTypes[customType.local.id]}
authStatus={authStatus}
isOnline={isOnline}
modelsStatuses={modelsStatuses}
key={customType.local.id}
/>
</tr>
@@ -97,7 +103,6 @@ export const CustomTypeTable: React.FC<CustomTypeTableProps> = ({
status={modelsStatuses.customTypes[customType.remote.id]}
authStatus={authStatus}
isOnline={isOnline}
modelsStatuses={modelsStatuses}
key={customType.remote.id}
/>
</tr>
Original file line number Diff line number Diff line change
@@ -9,6 +9,7 @@ import ModalFormCard from "@components/ModalFormCard";
import { createSlice } from "@src/features/slices/actions/createSlice";
import useSliceMachineActions from "@src/modules/useSliceMachineActions";
import { getState } from "@src/apiClient";
import { useAutoSync } from "@src/features/changes/AutoSyncProvider";

import { validateSliceModalValues } from "../formsValidator";
import { InputBox } from "../components/InputBox";
@@ -30,6 +31,7 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
}) => {
const { createSliceSuccess } = useSliceMachineActions();
const [isCreatingSlice, setIsCreatingSlice] = useState(false);
const { syncChanges } = useAutoSync();

const onSubmit = async (values: FormValues) => {
const sliceName = values.sliceName;
@@ -47,6 +49,8 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
createSliceSuccess(serverState.libraries);

onSuccess(newSlice, libraryName);

syncChanges();
},
});
};
Original file line number Diff line number Diff line change
@@ -13,6 +13,7 @@ import { CustomTypeFormat } from "@slicemachine/manager";
import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";

import { renameCustomType } from "@src/features/customTypes/actions/renameCustomType";
import { useAutoSync } from "@src/features/changes/AutoSyncProvider";

interface RenameCustomTypeModalProps {
isChangesLocal: boolean;
@@ -32,6 +33,7 @@ export const RenameCustomTypeModal: React.FC<RenameCustomTypeModalProps> = ({
const customTypeName = customType?.label ?? "";
const customTypeId = customType?.id ?? "";
const { renameCustomTypeSuccess } = useSliceMachineActions();
const { syncChanges } = useAutoSync();

const [isRenaming, setIsRenaming] = useState(false);

@@ -46,7 +48,10 @@ export const RenameCustomTypeModal: React.FC<RenameCustomTypeModalProps> = ({
await renameCustomType({
model: customType,
newLabel: values.customTypeName,
onSuccess: renameCustomTypeSuccess,
onSuccess: (renamedCustomType) => {
renameCustomTypeSuccess(renamedCustomType);
syncChanges();
},
});
}
setIsRenaming(false);
45 changes: 44 additions & 1 deletion packages/slice-machine/components/Navigation/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ErrorBoundary } from "@prismicio/editor-ui";
import { Box, ErrorBoundary, Icon, ProgressCircle } from "@prismicio/editor-ui";
import { Suspense, type FC } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
@@ -27,6 +27,7 @@ import useSliceMachineActions from "@src/modules/useSliceMachineActions";
import { getChangelog } from "@src/modules/environment";
import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
import { useRepositoryInformation } from "@src/hooks/useRepositoryInformation";
import { useAutoSync } from "@src/features/changes/AutoSyncProvider";

import { ChangesListItem } from "./ChangesListItem";
import { Environment } from "./Environment";
@@ -45,6 +46,9 @@ const Navigation: FC = () => {
useSliceMachineActions();
const { repositoryName, repositoryDomain, repositoryUrl } =
useRepositoryInformation();
const { autoSyncStatus } = useAutoSync();

console.log("autoSyncStatus:", autoSyncStatus);

return (
<SideNav>
@@ -67,6 +71,45 @@ const Navigation: FC = () => {
className={styles.environmentDivider}
/>

<Box alignItems="center" gap={8}>
{autoSyncStatus === "syncing" && (
<>
SYNCING
<ProgressCircle />
</>
)}
{autoSyncStatus === "synced" && (
<>
SYNCED
<Icon size="medium" name="check" color="green11" />
</>
)}
{autoSyncStatus === "failed" && (
<>
FAILED
<Icon size="medium" name="close" color="tomato11" />
</>
)}
{autoSyncStatus === "offline" && (
<>
OFFLINE
<Icon size="medium" name="linkOff" color="grey11" />
</>
)}
{autoSyncStatus === "not-logged-in" && (
<>
NOT LOGGED IN
<Icon size="medium" name="block" color="grey11" />
</>
)}
</Box>

<Divider
variant="edgeFaded"
color="grey6"
className={styles.environmentDivider}
/>

<SideNavRepository
repositoryName={repositoryName}
repositoryDomain={repositoryDomain}
45 changes: 24 additions & 21 deletions packages/slice-machine/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -37,6 +37,7 @@ import { ThemeProvider as ThemeUIThemeProvider, useThemeUI } from "theme-ui";
import { AppLayout, AppLayoutContent } from "@components/AppLayout";
import { InAppGuideProvider } from "@src/features/inAppGuide/InAppGuideContext";
import { InAppGuideDialog } from "@src/features/inAppGuide/InAppGuideDialog";
import { AutoSyncProvider } from "@src/features/changes/AutoSyncProvider";

import SliceMachineApp from "../components/App";
import LoadingPage from "../components/LoadingPage";
@@ -152,27 +153,29 @@ function App({
</AppLayout>
)}
>
<InAppGuideProvider>
<RouteChangeProvider>
<Suspense fallback={<LoadingPage />}>
<ComponentLayout>
<Component {...pageProps} />
</ComponentLayout>
</Suspense>
</RouteChangeProvider>
<ErrorBoundary
onError={(error) => {
console.error(
`An error occurred while rendering the in-app guide`,
error,
);
}}
>
<Suspense>
<InAppGuideDialog />
</Suspense>
</ErrorBoundary>
</InAppGuideProvider>
<AutoSyncProvider>
<InAppGuideProvider>
<RouteChangeProvider>
<Suspense fallback={<LoadingPage />}>
<ComponentLayout>
<Component {...pageProps} />
</ComponentLayout>
</Suspense>
</RouteChangeProvider>
<ErrorBoundary
onError={(error) => {
console.error(
`An error occurred while rendering the in-app guide`,
error,
);
}}
>
<Suspense>
<InAppGuideDialog />
</Suspense>
</ErrorBoundary>
</InAppGuideProvider>
</AutoSyncProvider>
</ErrorBoundary>
</PersistGate>
</ConnectedRouter>
Loading

0 comments on commit 4c01c1a

Please sign in to comment.