feat(photo): add photo app

src/App.tsx

@@ -9,7 +9,7 @@ import store from "store";
 import theme from "theme";
 import Auth from "auth";
 import Base from "base";
-import { openApp, closeApp } from "base/store";
+import { openApp, closeApp, bringToTop } from "base/store";
 
 const App = () => {
   // move to more apporpiate place
@@ -19,6 +19,7 @@ const App = () => {
       ...window.os,
       openApp: (param) => store.dispatch(openApp(param)),
       closeApp: (param) => store.dispatch(closeApp(param)),
+      bringToTop: (param) => store.dispatch(bringToTop(param)),
       events: {},
     };
 

src/apps/folder/Content/index.tsx

@@ -19,7 +19,7 @@ interface IProps {
   route: string;
 }
 
-const Content = ({ files, user, fileAction, route }: IProps) => {
+const Content = ({ files, user, fileAction, route, app }: IProps) => {
   return (
     <>
       <Wrapper>
@@ -28,6 +28,7 @@ const Content = ({ files, user, fileAction, route }: IProps) => {
           route={route}
           user={user}
           files={files}
+          instanceId={app.id}
         />
       </Wrapper>
     </>

src/apps/folder/index.tsx

@@ -11,6 +11,8 @@ import { Acrylic } from "atoms/styled";
 import NavigationBar from "./navigationBar";
 import { bringToTop } from "base/store";
 import { IFile } from "./interfaces";
+import { dispatchEvent } from "utils/events";
+import useDidUpdate from "utils/hooks/useDidUpdate";
 
 const Wrapper = styled.div`
   height: 100%;
@@ -45,6 +47,14 @@ const getPathName = (path: string) => {
 };
 
 const Folder = ({ path, app, id, onMouseDown }: IProps) => {
+  const { firstRender } = useDidUpdate();
+  const dispatchFolderLoadEvent = React.useCallback(() => {
+    // dispatch a fake animation complete event so dependent can do their work on route change
+    dispatchEvent("ANIMATED_FOLDER_ANIMATION_COMPLETED", {
+      appName: app.appName,
+      id,
+    });
+  }, [app, id]);
   const { getCurrent, push, navigate, state: history } = useHistory(path);
   const isMetaKey = React.useRef(false);
   const wrapperRef = React.useRef<HTMLDivElement>(null);
@@ -82,6 +92,9 @@ const Folder = ({ path, app, id, onMouseDown }: IProps) => {
   React.useEffect(() => {
     // to focus on path change so keyboard shortcut will work
     wrapperRef.current?.focus();
+    if (!firstRender) {
+      dispatchFolderLoadEvent();
+    }
   }, [getCurrent()]);
 
   const previousRoute = React.useCallback(() => {

src/apps/folder/store/routes.ts

@@ -148,11 +148,31 @@ export const folderMap: IFile = {
                     id: "img1",
                     name: "temple.jpg",
                     icon: "image",
-                    path: "assests/images/temple.jpg",
+                    path: "temple.jpg",
                   },
                   appName: "photo",
                   order: 0,
                 },
+                img2: {
+                  data: {
+                    id: "img2",
+                    name: "lady.jpg",
+                    icon: "image",
+                    path: "lady.jpg",
+                  },
+                  appName: "photo",
+                  order: 1,
+                },
+                img3: {
+                  data: {
+                    id: "img3",
+                    name: "flower.jpg",
+                    icon: "image",
+                    path: "flower.jpg",
+                  },
+                  appName: "photo",
+                  order: 2,
+                },
               },
             },
             Documents: {

src/apps/index.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import Folder from "apps/folder";
+import Photo from "apps/photo";
 import { IApp, IMetaData } from "base/interfaces";
 import AnimatedFileWrapper from "atoms/animatedFileWrapper";
 
@@ -44,6 +45,24 @@ const App = ({
         </AnimatedFileWrapper>
       );
     }
+    case "photo": {
+      return (
+        <AnimatedFileWrapper
+          appName={app.appName}
+          id={id}
+          style={style}
+          metaData={metaData}
+          weight={weight}
+        >
+          <Photo
+            {...(data as any)}
+            instanceId={id}
+            appName={app.appName}
+            onMouseDown={onMouseDown}
+          />
+        </AnimatedFileWrapper>
+      );
+    }
   }
 
   return null;

src/apps/photo/icon.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { Image, AppImage } from "atoms/styled";
+import useAnimationEndRender from "utils/hooks/useAnimationEndRender";
+
+interface IProps {
+  path: string;
+  instanceId?: string;
+}
+
+const PhotoIcon = ({ path, instanceId }: IProps) => {
+  const { render } = useAnimationEndRender({ instanceId });
+
+  return render ? (
+    <Image
+      height={64}
+      style={{ padding: "4px 0" }}
+      src={require(`apps/photo/assests/${path}`).default}
+    />
+  ) : (
+    <AppImage size={64} name="photo"></AppImage>
+  );
+};
+
+export default React.memo(PhotoIcon);

src/apps/photo/index.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import AppShell from "apps/shell";
+import styled from "styled-components";
+
+import { Image, Stack, Text } from "atoms/styled";
+import useAnimationEndRender from "utils/hooks/useAnimationEndRender";
+
+const Wrapper = styled(Stack)`
+  background: ${({ theme }) => theme.colors.plain};
+`;
+
+interface IProps {
+  path: string;
+  instanceId: string;
+  appName: string;
+  onMouseDown: (event: React.MouseEvent) => void;
+}
+
+const Photo = ({ path, appName, instanceId, onMouseDown }: IProps) => {
+  const { render } = useAnimationEndRender({ instanceId });
+
+  return (
+    <AppShell
+      onMouseDown={onMouseDown}
+      appName={appName}
+      instanceId={instanceId}
+      icon="photo"
+      name="Photo"
+    >
+      <Wrapper fullHeight fullWidth alignItems="center" justifyContent="center">
+        {render ? (
+          <Image
+            style={{ maxHeight: "100%" }}
+            src={require(`apps/photo/assests/${path}`).default}
+          />
+        ) : (
+          <Text textAlign="center">Loading Image...</Text>
+        )}
+      </Wrapper>
+    </AppShell>
+  );
+};
+
+export default React.memo(Photo);

src/apps/shell/index.tsx

@@ -0,0 +1,94 @@
+import styled from "styled-components";
+import * as React from "react";
+
+import { Acrylic, Stack, Text, Icon, StackItem } from "atoms/styled";
+import AppImage from "atoms/styled/appImage";
+
+const Wrapper = styled(Acrylic)`
+  width: 720px;
+  min-width: 240px;
+  min-height: 240px;
+  height: 480px;
+  border-radius: ${({ theme }) => theme.borderRadius}px;
+  resize: both;
+  overflow: auto;
+`;
+
+const TopBar = styled.div`
+  height: 38px;
+  padding: 0 16px;
+`;
+
+const Content = styled.div`
+  height: 100%;
+  width: 100%;
+`;
+
+type IProps = ReactHTMLElement<
+  "div",
+  {
+    icon: string;
+    name: string;
+    appName: string;
+    instanceId: string;
+    children: React.ReactChild;
+  }
+>;
+
+const AppShell = ({
+  icon,
+  name,
+  appName,
+  instanceId,
+  children,
+  onMouseDown,
+  ref,
+  ...rest
+}: IProps) => {
+  return (
+    <Wrapper
+      {...rest}
+      data-id="app-shell-wrapper"
+      onMouseDown={() => {
+        window.os.bringToTop({ appName, instanceId });
+      }}
+    >
+      <Stack fullWidth fullHeight flexDirection="column">
+        <StackItem flexShrink={0} data-test="topbar">
+          <TopBar data-id="app-shell-top-bar" onMouseDown={onMouseDown}>
+            <Stack
+              alignItems="center"
+              justifyContent="space-between"
+              fullHeight
+            >
+              <Stack alignItems="center">
+                <AppImage height={24} name={icon} style={{ paddingRight: 8 }} />
+                <Text weight={700} variant="mediumPlus">
+                  {name}
+                </Text>
+              </Stack>
+              <Stack>
+                <Icon
+                  onClick={() => window.os.closeApp({ appName, instanceId })}
+                  size={12}
+                  iconName="ChromeClose"
+                  cursor="pointer"
+                />
+              </Stack>
+            </Stack>
+          </TopBar>
+        </StackItem>
+        <StackItem flexGrow={2} style={{ overflow: "hidden" }}>
+          <Content
+            onMouseDown={(e) => e.stopPropagation()}
+            data-id="app-shell-content"
+          >
+            {children}
+          </Content>
+        </StackItem>
+      </Stack>
+    </Wrapper>
+  );
+};
+
+export default AppShell;

src/atoms/appIcon/customIcon.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import PhotoIcon from "apps/photo/icon";
+
+const map = {
+  photo: PhotoIcon,
+};
+
+interface IProps {
+  data: Record<string, any>;
+  appName: "photo";
+  // folder instance id
+  instanceId?: string;
+}
+
+const CustomIcon = ({ data, appName, instanceId }: IProps) => {
+  const AppIcon = map[appName];
+  // pass everything from the data let the icon decide
+  return <AppIcon {...(data as any)} instanceId={instanceId} />;
+};
+
+export default CustomIcon;

src/atoms/appIcon/index.tsx

@@ -6,6 +6,7 @@ import "./icons.scss";
 import { AppImage } from "atoms/styled";
 import Label from "./label";
 import useActions from "./useActions";
+import CustomIcon from "./customIcon";
 
 const SymlinkIcon = styled(AppImage)`
   position: absolute;
@@ -55,6 +56,9 @@ type IProps = ReactHTMLElement<
     name: string;
     fileId: string;
     symlink?: boolean;
+    appName: "folder" | "photo";
+    data: Record<string, any>;
+    instanceId?: string;
   }
 >;
 
@@ -68,6 +72,9 @@ const AppIcon = ({
   name,
   icon,
   innnerRef,
+  appName,
+  data,
+  instanceId,
   fileId,
   ...rest
 }: IProps) => {
@@ -105,7 +112,11 @@ const AppIcon = ({
           rest.className || ""
         }`}
       >
-        <AppImage className="icon__image" name={icon} size={64} />
+        {appName === "folder" ? (
+          <AppImage className="icon__image" name={icon} size={64} />
+        ) : (
+          <CustomIcon instanceId={instanceId} appName={appName} data={data} />
+        )}
         <Label
           desktop={desktop}
           onKeyDown={(e) => e?.stopPropagation()}

src/atoms/styled/appImage/index.tsx

@@ -12,7 +12,7 @@ export const availableIcons: Record<string, string> = {
   calendar: "calendar.png",
   edge: "edge.png",
   mail: "mail.png",
-  photos: "photos.png",
+  photo: "photo.svg",
   settings: "settings.png",
   partlyCloudy: "partly-cloudy.png",
   myPc: "my-pc.png",

src/atoms/styled/index.tsx

@@ -94,6 +94,7 @@ export const Stack = styled.div<
 `;
 
 export const Image = styled.img<Pick<React.CSSProperties, "width" | "height">>`
+  -webkit-user-drag: none;
   ${({ width }) => width && `width: ${getPixel(width)}`};
   ${({ height }) => height && `height: ${getPixel(height)}`};
 `;