Updated Editing Flow and Manual Dates (#77)

Co-authored-by: Christy Presler <[email protected]>

package.json

@@ -1,21 +1,23 @@
 {
   "name": "figlog",
   "version": "1.0.0",
-  "description": "The easiest and most efficient way to document team decisions and the evolution of your changes in Figma.",
   "repository": "https://github.com/FormidableLabs/figlog.git",
-  "scripts": {
-    "build": "esbuild widget-src/Widget.tsx --bundle --outfile=dist/code.js --target=es6",
-    "tsc": "tsc --noEmit -p widget-src",
-    "watch": "bun run build -- --watch"
-  },
-  "contributors": [
-    "Ryan Srofe <[email protected]>"
-  ],
-  "license": "MIT",
   "devDependencies": {
     "@figma/plugin-typings": "*",
     "@figma/widget-typings": "*",
+    "date-fns": "^3.6.0",
     "esbuild": "*",
     "typescript": "*"
+  },
+  "contributors": [
+    "Ryan Srofe <[email protected]>",
+    "Christy Presler <[email protected]>"
+  ],
+  "description": "The easiest and most efficient way to document team decisions and the evolution of your changes in Figma.",
+  "license": "MIT",
+  "scripts": {
+    "build": "esbuild widget-src/Widget.tsx --bundle --outfile=dist/code.js --target=es6",
+    "tsc": "tsc --noEmit -p widget-src",
+    "watch": "bun run build -- --watch"
   }
 }

widget-src/Widget.tsx

@@ -1,4 +1,4 @@
-import { ChangeLog } from './types/ChangeLog';
+import { ChangeLog, ChangeLogState } from './types/ChangeLog';
 import { Header } from './components/Header';
 import { Footer } from './components/Footer';
 import { WidgetContainer } from './components/WidgetContainer';
@@ -15,7 +15,7 @@ function Widget() {
   const [showStatus, setShowStatus] = useSyncedState('showStatus', '0');
   const [showVersion, setShowVersion] = useSyncedState('showVersion', false);
   const [showBranding, setShowBranding] = useSyncedState('showBradning', true); // fixing the typo messes with branding state on existing widgets
-  const [showLogTypes, setShowLogTypes] = useSyncedState('showLogTypes', false);
+  const [showLogTypes, setShowLogTypes] = useSyncedState('showLogTypes', true);
   // Meta Data
   const [createdDate, setCreatedDate] = useSyncedState('createdDate', 0);
   const [updatedDate, setUpdatedDate] = useSyncedState('updatedDate', 0);
@@ -25,22 +25,38 @@ function Widget() {
   const [changeIds, setChangeIds] = useSyncedState<string[]>('changeKeys', []);
   const changeLogs = useSyncedMap<ChangeLog>('changes');
 
+  const updateOtherStates = (currentChangeId: string, changes: Partial<ChangeLogState>) => {
+    changeIds.map((id: string) => {
+      if (id !== currentChangeId) {
+        const otherLog = changeLogs.get(id) as ChangeLog;
+        changeLogs.set(id, { ...otherLog, state: { ...otherLog.state, ...changes }})
+      }
+    })
+  }
+
   const addChange = (changeToAdd: string) => {
     changeLogs.set(changeToAdd, {
       change: '',
       type: 'none',
       createdDate: Date.now(),
       editedDate: Date.now(),
       user: currentUser,
+      links: [],
       editCount: 0,
       state: {
+        editing: true,
         showTypeMenu: false,
         showLinkForm: false,
-        linkFormError: { label: false, url: false }
+        updates: {
+          change: '',
+          type: 'none',
+          createdDate: Date.now(),
+          linkFormError: { label: false, url: false }
+        }
       },
-      links: [],
     });
     setChangeIds([changeToAdd, ...changeIds]);
+    updateOtherStates(changeToAdd, { editing: false })
     setUpdatedDate(Date.now());
   };
   const deleteChange = (changeToDelete: string) => {
@@ -164,7 +180,7 @@ function Widget() {
         <ChangeLogList
           changeLogs={changeLogs}
           changeLogIds={changeIds}
-          adminId={adminId}
+          updateOtherStates={updateOtherStates}
           deleteChange={deleteChange}
           setUpdatedDate={setUpdatedDate}
           showTypes={showLogTypes}

widget-src/components/Button.tsx

@@ -8,15 +8,67 @@ interface ButtonProps {
   hideLabel?: boolean;
   action: () => void;
   iconSrc?: string;
+  error?: boolean;
 }
 
 export const Button = ({
   label,
   hideLabel = false,
   action,
-  iconSrc
+  iconSrc,
+  error = false,
 }: ButtonProps) => {
 
+  if (error) {
+    return (
+      <AutoLayout
+        name={`error-button-${label}`}
+        fill={COLOR.white}
+        cornerRadius={RADIUS.sm}
+        overflow="visible"
+        spacing={GAP.sm}
+        padding={PADDING.xs}
+        stroke={COLOR.red}
+        strokeWidth={SPACE.one}
+        horizontalAlignItems="center"
+        verticalAlignItems="center"
+      >
+        {iconSrc && (
+          <Frame name="Icon" overflow="visible" width={SPACE.xxs} height={SPACE.xxs}>
+            <SVG
+              name={label}
+              x={{
+                type: 'center',
+                offset: PADDING.none,
+              }}
+              y={{
+                type: 'center',
+                offset: PADDING.none,
+              }}
+              height={SPACE.xs}
+              width={SPACE.xs}
+              src={iconSrc}
+            />
+          </Frame>
+        )}
+        <Text
+          name="Label"
+          fill={COLOR.red}
+          verticalAlignText="center"
+          lineHeight={FONT.lineHeight.xs}
+          fontFamily={FONT.family}
+          fontSize={FONT.size.xs}
+          letterSpacing={FONT.letterSpacing.sm}
+          fontWeight={FONT.weight.bold}
+          textCase="upper"
+          hidden={hideLabel}
+        >
+          {label}
+        </Text>
+      </AutoLayout>
+    )
+  }
+
   return (
     <AutoLayout
       name={`button-${label}`}

widget-src/components/ChangeLogList.tsx

@@ -1,4 +1,4 @@
-import { ChangeLog } from '../types/ChangeLog';
+import { ChangeLog, ChangeLogState } from '../types/ChangeLog';
 import { PADDING } from '../utilities/Styles';
 import { ChangeLogRow } from './ChangeLogRow';
 
@@ -8,7 +8,7 @@ const { AutoLayout, useEffect } = widget;
 interface ChangeLogListProps {
   changeLogIds: string[];
   changeLogs: SyncedMap<ChangeLog>;
-  adminId: string;
+  updateOtherStates: (changeId: string, changes: Partial<ChangeLogState>) => void;
   deleteChange: (changeId: string) => void;
   setUpdatedDate: (updatedDate: number) => void;
   showTypes: boolean;
@@ -17,13 +17,13 @@ interface ChangeLogListProps {
 export const ChangeLogList = ({
   changeLogIds,
   changeLogs,
-  // adminId,
+  updateOtherStates,
   deleteChange,
   setUpdatedDate,
   showTypes
 }: ChangeLogListProps) => {
   useEffect(() => {
-    console.log('ChangeLogs', changeLogs.entries());
+    // console.log('ChangeLogs', changeLogs.entries());
   });
 
   return (
@@ -37,16 +37,9 @@ export const ChangeLogList = ({
         horizontal: PADDING.none,
       }}
     >
-      {changeLogIds.map((changeLogId, index) => {
-        const changeLog = changeLogs.get(changeLogId) as ChangeLog;
-
-        function isEditable(): boolean {
-          // if widget admin
-          // if (adminId === currentUser?.id) { return true; }
-          // if changeLog owner
-          // if (changeLog?.user?.id === currentUser?.id) { return true; }
-          return true;
-        }
+      {changeLogs.entries().sort((a, b) => b[1].createdDate - a[1].createdDate ).map((changeLogArr, index) => {
+        const changeLogId = changeLogArr[0];
+        const changeLog = changeLogArr[1];
 
         return (
           <ChangeLogRow
@@ -55,17 +48,10 @@ export const ChangeLogList = ({
             changeLog={changeLog}
             isLastRow={index === changeLogIds.length - 1}
             updateChange={changes => changeLogs.set(changeLogId, { ...changeLog, ...changes })}
-            updateOthers={changes => {
-              changeLogIds.map((id) => {
-                if (id !== changeLogId) {
-                  const otherLog = changeLogs.get(id) as ChangeLog;
-                  changeLogs.set(id, { ...otherLog, ...changes })
-                }
-              })
-            }}
+            updateChangeState={changes => changeLogs.set(changeLogId, { ...changeLog, state: { ... changes }})}
+            updateOtherStates={updateOtherStates}
             deleteChange={() => deleteChange(changeLogId)}
             setUpdatedDate={setUpdatedDate}
-            isEditable={isEditable()}
             showTypes={showTypes}
           />
         );