feat: new quick create timeline (#1812)

Author: nekaartajaya

src/components/ExperienceEditor/ExperienceEditor.tsx

@@ -68,6 +68,8 @@ type ExperienceEditorProps = {
   onSearchUser?: (query: string) => void;
   users?: User[];
   quick?: boolean;
+  showAdvance?: boolean;
+  experienceVisibility?: VisibilityItem;
 };
 
 enum TagsProps {
@@ -97,6 +99,8 @@ export const ExperienceEditor: React.FC<ExperienceEditorProps> = props => {
     onSearchUser,
     users,
     quick = false,
+    showAdvance = false,
+    experienceVisibility,
   } = props;
   const styles = useStyles({ quick });
 
@@ -119,13 +123,13 @@ export const ExperienceEditor: React.FC<ExperienceEditorProps> = props => {
   const [newExperience, setNewExperience] =
     useState<ExperienceProps>(experience);
   const [image, setImage] = useState<string | undefined>(
-    experience.experienceImageURL,
+    experience?.experienceImageURL,
   );
   const [, setDetailChanged] = useState<boolean>(false);
   const [isLoading, setIsloading] = useState<boolean>(false);
   const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
   const [selectedVisibility, setSelectedVisibility] =
-    useState<VisibilityItem>();
+    useState<VisibilityItem>(experienceVisibility);
   const [selectedUserIds, setSelectedUserIds] = useState<User[]>([]);
   const [pageUserIds, setPageUserIds] = React.useState<number>(1);
   const [isLoadingSelectedUser, setIsLoadingSelectedUser] =
@@ -138,7 +142,8 @@ export const ExperienceEditor: React.FC<ExperienceEditorProps> = props => {
     visibility: false,
     selectedUserId: false,
   });
-  const [showAdvanceSetting, setShowAdvanceSetting] = useState<boolean>(false);
+  const [showAdvanceSetting, setShowAdvanceSetting] =
+    useState<boolean>(showAdvance);
 
   useEffect(() => {
     const experienceId = router.query.experienceId as string | null;
@@ -1039,22 +1044,22 @@ export const ExperienceEditor: React.FC<ExperienceEditorProps> = props => {
 
       <ShowIf condition={quick}>
         <div className={styles.header}>
-          <Button
-            color="primary"
-            variant="outlined"
-            style={{ width: 'auto' }}
-            onClick={handleAdvanceSetting}>
-            {i18n.t(`Experience.Editor.Btn.AdvancedSettings`)}
-          </Button>
-          <FormControl classes={{ root: styles.formControl }}>
+          <ShowIf condition={!showAdvanceSetting}>
             <Button
               color="primary"
-              variant="contained"
+              variant="outlined"
               style={{ width: 'auto' }}
-              onClick={saveExperience}>
-              {i18n.t(`Experience.Editor.Btn.${type}`)}
+              onClick={handleAdvanceSetting}>
+              {i18n.t(`Experience.Editor.Btn.AdvancedSettings`)}
             </Button>
-          </FormControl>
+          </ShowIf>
+          <Button
+            color="primary"
+            variant="contained"
+            style={{ width: 'auto', marginLeft: 'auto' }}
+            onClick={saveExperience}>
+            {i18n.t(`Experience.Editor.Btn.${type}`)}
+          </Button>
         </div>
       </ShowIf>
     </div>

src/components/ExperienceQuick/ExperienceQuick.container.tsx

@@ -11,29 +11,25 @@ import debounce from 'lodash/debounce';
 import { useExperienceHook } from 'src/hooks/use-experience-hook';
 import { useSearchHook } from 'src/hooks/use-search.hooks';
 import { useUpload } from 'src/hooks/use-upload.hook';
-import { ExperienceProps } from 'src/interfaces/experience';
+import { ExperienceProps, VisibilityItem } from 'src/interfaces/experience';
 import i18n from 'src/locale';
 import theme from 'src/themes/default';
 
 type ExperienceQuickContainerType = {
   open: boolean;
   onClose: () => void;
   onSuccess: () => void;
+  experience?: ExperienceProps;
+  selectedVisibility?: VisibilityItem;
 };
 
 export const ExperienceQuickContainer: React.FC<ExperienceQuickContainerType> =
   props => {
-    const { open, onClose, onSuccess } = props;
+    const { open, onClose, onSuccess, experience, selectedVisibility } = props;
     const [showPrompt, setShowPrompt] = useState<boolean>(false);
     // TODO: separate hook for tag, people and experience
-    const {
-      selectedExperience,
-      tags,
-      people,
-      saveExperience,
-      searchTags,
-      searchPeople,
-    } = useExperienceHook();
+    const { tags, people, saveExperience, searchTags, searchPeople } =
+      useExperienceHook();
     const { searchUsers, users } = useSearchHook();
 
     const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
@@ -79,15 +75,15 @@ export const ExperienceQuickContainer: React.FC<ExperienceQuickContainerType> =
     return (
       <>
         <Modal
-          title={i18n.t('Experience.Create.Title')}
+          title={i18n.t('Experience.Create.Quick')}
           subtitle={i18n.t('TopNavbar.Title.Experience')}
           onClose={onClose}
           open={open}
           fullScreen={isMobile}
           maxWidth="sm">
           <ExperienceEditor
             isEdit={false}
-            experience={selectedExperience}
+            experience={experience}
             tags={tags}
             people={people}
             onSearchTags={handleSearchTags}
@@ -97,6 +93,8 @@ export const ExperienceQuickContainer: React.FC<ExperienceQuickContainerType> =
             onSearchUser={handleSearchUser}
             users={users}
             quick
+            showAdvance
+            experienceVisibility={selectedVisibility}
           />
         </Modal>
 

src/components/ExperienceQuick/ExperienceQuick.style.ts

@@ -0,0 +1,103 @@
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles<Theme>(theme =>
+  createStyles({
+    root: {
+      marginBottom: theme.spacing(1),
+      border: '1px solid',
+      borderColor: '#FFF',
+      borderRadius: 10,
+      padding: 20,
+      width: '100%',
+      boxShadow: `0px 2px 10px rgba(0, 0, 0, 0.05)`,
+      position: 'relative',
+
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        width: 8,
+        top: 0,
+        left: 0,
+        height: '100%',
+        backgroundColor: '#FFF',
+        borderTopLeftRadius: 10,
+        borderBottomLeftRadius: 10,
+      },
+    },
+    image: {
+      width: 68,
+      height: 68,
+      opacity: 0.9,
+      borderRadius: 5,
+    },
+    cardContent: {
+      width: 140,
+      padding: '0px 0px 0px 20px',
+      flexGrow: 1,
+
+      '&:last-child': {
+        paddingBottom: 0,
+      },
+    },
+    title: {
+      wordBreak: 'break-word',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      [theme.breakpoints.down('xs')]: {
+        fontSize: '14px',
+      },
+    },
+    subtitle: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      [theme.breakpoints.down('xs')]: {
+        fontSize: '12px',
+        fontWeight: 500,
+      },
+    },
+    icon: {
+      [theme.breakpoints.down('xs')]: {
+        color: '#404040',
+      },
+    },
+    menu: {
+      borderRadius: 10,
+      marginTop: 8,
+    },
+    delete: {
+      color: '#FE3636',
+    },
+    error: {
+      background: '#FE3636',
+      color: '#FFF',
+      '&:hover': {
+        color: theme.palette.text.primary,
+      },
+    },
+    modal: {
+      paddingBottom: 10,
+    },
+    input: {
+      width: 560,
+      marginBottom: 0,
+      marginTop: 10,
+
+      '& .MuiInputLabel-root, .MuiInputBase-root': {
+        color: '#616161',
+      },
+      [theme.breakpoints.down('xs')]: {
+        width: '100%',
+      },
+    },
+    inputText: {
+      flex: 1,
+      height: 20,
+    },
+    action: {
+      cursor: 'pointer',
+      flex: 1,
+    },
+  }),
+);