fix typing from number to Id=number|string

deep-foundation · Jan 13, 2024 · 0668df1 · 0668df1
1 parent f15ff6c
commit 0668df1
Show file tree

Hide file tree

Showing 27 changed files with 140 additions and 121 deletions.
diff --git a/imports/check.tsx b/imports/check.tsx
@@ -1,18 +1,19 @@
 import Debug from 'debug';
 import { gql } from '@apollo/client';
 import forEach from 'lodash/forEach';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 interface Node {
-  from_id?: number; id?: number; to_id?: number; type_id?: number;
+  from_id?: Id; id?: Id; to_id?: Id; type_id?: Id;
   in: Node[]; out: Node[];
 }
 
 interface Marker {
-  id: number; item_id: number; path_item_depth: number; path_item_id: number; root_id: number; position_id: string;
+  id: Id; item_id: Id; path_item_depth: Id; path_item_id: Id; root_id: Id; position_id: string;
   by_position: Marker[];
 }
 
-export const check = async (hash: { [name:string]: number }, client) => {
+export const check = async (hash: { [name:string]: Id }, client) => {
   const fetch = async () => {
     const result = await client.query({ query: gql`query FETCH_FOR_CHECK {
       mp: mp { id item_id path_item_depth path_item_id root_id position_id by_position(order_by: { path_item_depth: asc }) { id item_id path_item_depth path_item_id root_id position_id } }
@@ -28,8 +29,8 @@ export const check = async (hash: { [name:string]: number }, client) => {
     valid = false;
     console.log(...args);
   };
-  const nodesChecked: { [id: number]: boolean; } = {};
-  const markersChecked: { [id: number]: boolean; } = {};
+  const nodesChecked: { [id: Id]: boolean; } = {};
+  const markersChecked: { [id: Id]: boolean; } = {};
   const checkNode = (node: Node) => {
     if (nodesChecked[node.id]) return;
     else nodesChecked[node.id] = true;

diff --git a/imports/client-handler.tsx b/imports/client-handler.tsx
@@ -3,7 +3,7 @@ import * as icons from '@chakra-ui/icons';
 import dynamic from 'next/dynamic';
 import { DeepClient, useDeep, useDeepSubscription } from "@deep-foundation/deeplinks/imports/client";
 import { evalClientHandler as deepclientEvalClientHandler } from '@deep-foundation/deeplinks/imports/client-handler';
-import { useMinilinksFilter, useMinilinksSubscription } from "@deep-foundation/deeplinks/imports/minilinks";
+import { Id, useMinilinksFilter, useMinilinksSubscription } from "@deep-foundation/deeplinks/imports/minilinks";
 import axios from 'axios';
 import * as axiosHooks from 'axios-hooks';
 import * as classnames from 'classnames';
@@ -332,9 +332,9 @@ export const ClientHandlerRenderer = React.memo(function ClientHandlerRenderer({
 });
 
 export interface ClientHandlerProps extends Partial<ClientHandlerRendererProps> {
-  linkId: number;
-  handlerId?: number;
-  context?: number[];
+  linkId: Id;
+  handlerId?: Id;
+  context?: Id[];
   ml?: any;
   error?: any;
   onClose?: () => any,

diff --git a/imports/cyto-handler.tsx b/imports/cyto-handler.tsx
@@ -7,6 +7,7 @@ import { evalClientHandler, r } from './client-handler';
 import { useDebounceCallback } from '@react-hook/debounce';
 import { useCytoHandlersSwitch, useInsertingCytoStore } from './hooks';
 import { useCytoHandlersRules } from './cyto/hooks';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 const MonacoEditor = dynamic(() => import('@monaco-editor/react').then(m => m.default), { ssr: false });
 
 export interface CytoHandlerRendererProps {
@@ -16,17 +17,17 @@ export interface CytoHandlerRendererProps {
 };
 
 export interface CytoHandlerProps extends Partial<CytoHandlerRendererProps> {
-  linkId: number;
-  handlerId?: number;
-  onChange?: (id: number, handled?: {
-    handlerId?: number;
+  linkId: Id;
+  handlerId?: Id;
+  onChange?: (id: Id, handled?: {
+    handlerId?: Id;
     error?: any;
     elements?: any[];
     stylesheets?: any[];
   }) => void;
   elementsById: { [key: string]: any };
   cy?: any;
-  HandleCyto?: number;
+  HandleCyto?: Id;
 }
 
 export function useCytoHandlers() {
@@ -80,8 +81,8 @@ export const CytoHandlers = React.memo(function CytoHandlers({
   elementsById,
   cy,
 }: {
-  onChange: (id: number, result: any) => void;
-  handled: { [key: string]: number };
+  onChange: (id: Id, result: any) => void;
+  handled: { [key: string]: Id };
   elementsById: { [key: string]: any };
   cy?: any;
 }) {

diff --git a/imports/cyto-react-links-card.tsx b/imports/cyto-react-links-card.tsx
@@ -6,22 +6,23 @@ import { BsCheck2, BsDoorClosed, BsGrid3X2Gap, BsListUl, BsSearch } from 'react-
 import { TbPackages } from 'react-icons/tb';
 import { DotsLoader } from './dot-loader';
 import { IPackageProps, PackagesBlock } from './cyto-react-links-packages';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 interface IGridPanel {
-  id?: number;
+  id?: Id;
   src?: string;
   alt?: string;
 }
 
 interface IListPanel {
-  id?: number;
+  id?: Id;
   src?: string;
   linkName?: string;
   containerName?: string;
 }
 
 export interface ITypeIcon {
-  src: string | number;
+  src: Id;
   borderColor?: any;
   borderWidth?: any;
   boxSize?: string;
@@ -108,8 +109,8 @@ export const GridPanel = React.memo<any>(({
   borderColor?: string;
   borderColorSelected?: string;
   data: IGridPanel[];
-  selectedLink: number;
-  onSelectLink?: (linkId: number) => any;
+  selectedLink: Id;
+  onSelectLink?: (linkId: Id) => any;
   gridTemplateColumns?: string;
   columnGap?: number;
   rowGap?: number;
@@ -153,13 +154,13 @@ const CytoListItem = React.memo<any>(({
   onSelectLink,
   scrollRef,
 }:{
-  id?: number;
+  id?: Id;
   src?: string;
   linkName?: string;
   containerName?: string;
   borderColor?: string;
-  selectedLink: number;
-  onSelectLink?: (linkId: number) => any;
+  selectedLink: Id;
+  onSelectLink?: (linkId: Id) => any;
   scrollRef?: any;
 }) => {
 
@@ -211,8 +212,8 @@ const ListPanel = React.memo<any>(({
 }: {
   borderColor?: string;
   data: IListPanel[];
-  onSelectLink?: (linkId: number) => any;
-  selectedLink: number;
+  onSelectLink?: (linkId: Id) => any;
+  selectedLink: Id;
 }) => {
   const scrollRef = useRef(null);
 
@@ -244,20 +245,20 @@ export const CytoReactLinksCard = React.memo<any>(({
   selectedLinkId = 0,
 }: {
   elements: {
-    id: number;
+    id: Id;
     src?: string;
     linkName: string;
     containerName: string;
   }[];
   packages?: IPackageProps[];
-  onSubmit?: (id: number) => any;
+  onSubmit?: (id: Id) => any;
   onClose?: () => any;
   loading?: boolean;
   noResults: any;
   search?: any;
   onSearch?: any;
   fillSize?: boolean;
-  selectedLinkId?: number;
+  selectedLinkId?: Id;
 }) => {
   const [switchLayout, setSwitchLayout] = useState('grid');
   // const [switchLayout, setSwitchLayout] = useState('packages');

diff --git a/imports/cyto-react-links-packages.tsx b/imports/cyto-react-links-packages.tsx
@@ -6,6 +6,7 @@ import { DotsLoader } from './dot-loader';
 import { TbArrowRotaryFirstRight, TbBookDownload, TbAtom } from 'react-icons/tb';
 import { GridPanel } from './cyto-react-links-card';
 import _ from 'lodash';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 
 const iconVariants = {
@@ -26,13 +27,13 @@ const iconVariants = {
   }
 };
 export interface IPackage {
-  id?: number;
+  id?: Id;
   src?: string;
   containerName?: string;
   version?: string;
   isActive?: boolean; 
   typeElements?: {
-    id: number;
+    id: Id;
     src?: any;
   }[];
 }
@@ -114,7 +115,7 @@ const PackageItemAccordion = React.memo<any>(({
   isActive,
   typeElements = arrElem,
 }:IPackage) => {
-  const [expanded, setExpanded] = useState<false | number>(false);
+  const [expanded, setExpanded] = useState<false | Id>(false);
   const isOpen = id === expanded;
 
   return (<>

diff --git a/imports/cyto/editor-preview.tsx b/imports/cyto/editor-preview.tsx
@@ -1,6 +1,6 @@
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Button, Box, HStack, Flex, IconButton } from '@chakra-ui/react';
 import { useDeep, useDeepQuery, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client';
-import { Link, MinilinksInstance, MinilinksResult, useMinilinksApply, useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks';
+import { Id, Link, MinilinksInstance, MinilinksResult, useMinilinksApply, useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks';
 import { ClientHandlerRenderer, evalClientHandler } from '../client-handler';
 import { useLocalStore } from '@deep-foundation/store/local';
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
@@ -21,7 +21,7 @@ import { VscClearAll } from 'react-icons/vsc';
 
 // global._callClientHandler = callClientHandler;
 export interface EditorTab {
-  id: number;
+  id: Id;
   saved: boolean;
   active?: boolean;
   loading?: boolean;

diff --git a/imports/cyto/editor.tsx b/imports/cyto/editor.tsx
@@ -25,7 +25,7 @@ import {
   Portal,
 } from '@chakra-ui/react';
 import { useDeep, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client';
-import { Link, useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks';
+import { Id, Link, useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks';
 import { useLocalStore } from '@deep-foundation/store/local';
 import { useDebounceCallback } from '@react-hook/debounce';
 import json5 from 'json5';
@@ -52,7 +52,7 @@ const MonacoEditor = dynamic(() => import('@monaco-editor/react').then(m => m.de
 
 // global._callClientHandler = callClientHandler;
 export interface EditorTab {
-  id: number;
+  id: Id;
   saved: boolean;
   active?: boolean;
   loading?: boolean;
@@ -80,7 +80,7 @@ export function useEditorValueSaver(tab) {
 
 export function useEditorTabs() {
   const [tabs, setTabs] = useLocalStore<EditorTab[]>('editor-tabs', []);
-  const [tab, setTab] = useLocalStore<number>('editor-tab', 0);
+  const [tab, setTab] = useLocalStore<Id>('editor-tab', 0);
   const tabsRef = useRef<any>();
   tabsRef.current = tabs;
   return {
@@ -111,11 +111,11 @@ export function useEditorTabs() {
 export function useFindClientHandlerByCode({
   codeLinkId,
 }: {
-  codeLinkId: number;
+  codeLinkId: Id;
 }) {
   const deep = useDeep();
   const [hid, setHid] = useState<any>();
-  const prevCodeLinkId = useRef<number>();
+  const prevCodeLinkId = useRef<Id>();
   useEffect(() => { (async () => {
     if (!codeLinkId || codeLinkId === prevCodeLinkId.current) return;
     const { data: handlers } = await deep.select({
@@ -157,13 +157,13 @@ export const Item = React.memo(function Item({
   addTab,
   isActive = false,
 }: {
-  link: Link<number>;
+  link: Link<Id>;
   openable?: boolean;
   deletable?: boolean;
   children?: any;
   portalRef?: any;
-  closeTab?: (id: number) => void;
-  activeTab?: (id: number) => void;
+  closeTab?: (id: Id) => void;
+  activeTab?: (id: Id) => void;
   addTab?: (tab: any) => void;
   isActive?: boolean;
 }) {
@@ -239,7 +239,7 @@ export const Item = React.memo(function Item({
         </>}
         {/* <Box>{currentSymbol} | {typeSymbol}</Box> */}&nbsp;
         <Editable
-          selectAllOnFocus defaultValue={deep.nameLocal(link.id) == `${link.id}` ? '' : deep.nameLocal(link.id)}
+          selectAllOnFocus defaultValue={`${deep.nameLocal(link.id) == `${link.id}` ? '' : deep.nameLocal(link.id)}`}
           placeholder={link.type_id === deep.idLocal('@deep-foundation/core', 'Package') ? link?.value?.value : link.id} display="inline"
           onSubmit={async (value) => {
             if (deep.minilinks.byId[link.id].inByType[deep.idLocal('@deep-foundation/core', 'Contain')]?.[0]?.value) {

diff --git a/imports/cyto/handlers.tsx b/imports/cyto/handlers.tsx
@@ -3,7 +3,7 @@ import { ChevronDownIcon } from '@chakra-ui/icons';
 import { Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, Box, Flex, SimpleGrid, Text, Button, Spacer, useColorMode, InputGroup, Input, InputRightElement, Tag, TagCloseButton, TagLabel, HStack, VStack, Select, Menu, MenuButton, MenuItem, MenuList, IconButton, InputLeftElement } from '@chakra-ui/react';
 import { useDeep, useDeepQuery, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client';
 import { generateQuery, generateQueryData } from '@deep-foundation/deeplinks/imports/gql';
-import { Link, useMinilinksApply, useMinilinksQuery, useMinilinksSubscription } from '@deep-foundation/deeplinks/imports/minilinks';
+import { Id, Link, useMinilinksApply, useMinilinksQuery, useMinilinksSubscription } from '@deep-foundation/deeplinks/imports/minilinks';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CytoReactLinkAvatar } from '../cyto-react-avatar';
 import { EditorHandler } from '../editor/editor-handler';
@@ -18,9 +18,9 @@ export const CytoEditorHandlersSupportHandle = React.memo<any>(function CytoEdit
   handle,
   portalRef,
 }: {
-  support: Link<number>;
-  handler: Link<number>;
-  handle: Link<number>;
+  support: Link<Id>;
+  handler: Link<Id>;
+  handle: Link<Id>;
   portalRef?: any;
 }) {
   const deep = useDeep();
@@ -109,7 +109,7 @@ export const CytoEditorHandlersSupportHandle = React.memo<any>(function CytoEdit
 
   const Form = useCallback((
     isLink || isClient
-    ? ({ value, onInsert }: { value: string, onInsert: (id?: number) => void }) => {
+    ? ({ value, onInsert }: { value: string, onInsert: (id?: Id) => void }) => {
       return <InputGroup
         position='absolute' w='100%' 
         size='md' h='100%' left={0} top={0} borderWidth='1px' borderRadius='lg' bgColor='handlersInput'
@@ -165,7 +165,7 @@ export const CytoEditorHandlersSupportHandle = React.memo<any>(function CytoEdit
       </InputGroup>;
     }
     : isPort
-    ? ({ value, onInsert }: { value: string, onInsert: (id?: number) => void }) => {
+    ? ({ value, onInsert }: { value: string, onInsert: (id?: Id) => void }) => {
       return <InputGroup
         position='absolute' w='100%' h='100%' left={0} top={0} borderWidth='1px' borderRadius='lg' bgColor='handlersInput'
         onMouseMove={() => {
@@ -197,7 +197,7 @@ export const CytoEditorHandlersSupportHandle = React.memo<any>(function CytoEdit
         </InputRightElement> : null}
       </InputGroup>;
     }
-    : ({ value, onInsert }: { value: string, onInsert: (id?: number) => void }) => {
+    : ({ value, onInsert }: { value: string, onInsert: (id?: Id) => void }) => {
       return <InputGroup
         position='absolute' w='100%' h='100%' left={0} top={0} borderWidth='1px' borderRadius='lg' bgColor='handlersInput'
         onMouseMove={() => {
@@ -293,9 +293,9 @@ export const CytoEditorHandlersSupport = React.memo<any>(function CytoEditorHand
   handleredableIds,
   portalRef,
 }: {
-  support: Link<number>;
-  linkId: number;
-  handleredableIds: number[];
+  support: Link<Id>;
+  linkId: Id;
+  handleredableIds: Id[];
   portalRef?: any;
 }) {
   const deep = useDeep();
@@ -377,8 +377,8 @@ export const CytoEditorHandlers = React.memo<any>(function CytoEditorHandlers({
   linkId,
   handleredableIds,
 }: {
-  linkId: number;
-  handleredableIds: number[];
+  linkId: Id;
+  handleredableIds: Id[];
 }) {
   const deep = useDeep();