Add Shelf form integration + Pull shared module + code cleanup

src/components/add-category/AddCategory.tsx

@@ -6,7 +6,7 @@ import { ReactComponent as TimeIcon } from '../../assets/icons/time.svg';
 import { ReactComponent as TimerIcon } from '../../assets/icons/timer.svg';
 import { ReactComponent as TextIcon } from '../../assets/icons/text.svg';
 import { addCategory, getCategoryDetails } from "../../services/category";
-import { User } from "../../shared/models/user";
+import { MobileUser } from "../../shared/models/user";
 
 type ownProps = {
     hidePopup: () => void
@@ -17,7 +17,7 @@ const IconSet = [<BrainIcon />, <TimeIcon />, <TimerIcon />, <TextIcon />]
 export const AddCategory: React.FC<ownProps> = (props: ownProps) => {
     const [newCategory, setnewCategory] = useState<string>('');
     const [showIconSet, setShowIconSet] = useState<Boolean>(false);
-    const userProfile: User = JSON.parse(localStorage.getItem('userProfile') || "");
+    const userProfile: MobileUser = JSON.parse(localStorage.getItem('userProfile') || "");
 
     const addNewCategory = () => {
         addCategory(newCategory).then((response: any) => {

src/components/add-shelf/AddShelf.tsx

@@ -3,17 +3,20 @@ import styles from './AddShelf.module.scss';
 import { ReactComponent as CloseIcon } from '../../assets/icons/close.svg';
 import { ReactComponent as PlusIcon } from '../../assets/icons/plus.svg';
 import { ReactComponent as CheckCircle } from '../../assets/icons/check.svg';
-import { IShelf } from "../../structure/shelf";
-import { userProfileData } from "../../App";
+import { Shelf } from "../../shared/models/shelf";
+import { MobileUser } from "../../shared/models/user";
+import { addShelf, getShelfDetails } from "../../services/shelf";
 
 export const AddShelf: React.FC = () => {
-    const [selectedCategoryIndex, setCategoryIndex] = useState<number>();
-    const [newShelf, setnewSelf] = useState<IShelf>({
+    const userProfile: MobileUser = JSON.parse(localStorage.getItem('userProfile') || "");
+    
+    const [selectedCategory, setSelectedCategory] = useState<string>("");
+
+    const [newShelf, setnewSelf] = useState<Shelf>({
         name: '',
-        words: [],
-        revisedWords: [],
         description: '',
-        viewPermission: 'PRIVATE'
+        isArchived: false,
+        viewType: 'PRIVATE',
     });
 
     return <section className="modalPage">
@@ -49,16 +52,16 @@ export const AddShelf: React.FC = () => {
                     </button>
                 </header>
                 <ul>
-                    { userProfileData.categories.map((category, index) => {
-                        return <li key={category.name} onClick={() => setCategoryIndex(index)}
-                        className={index === selectedCategoryIndex ? '' : styles.inactive}>
-                            { index === selectedCategoryIndex && <span className={styles.checkmark}> <CheckCircle /> </span> }
+                    { userProfile && userProfile.categories?.map((category, index) => {
+                        return <li key={index} onClick={() => setSelectedCategory(category._id)}
+                        className={category._id === selectedCategory ? '' : styles.inactive}>
+                            { category._id === selectedCategory && <span className={styles.checkmark}> <CheckCircle /> </span> }
                             <div className={styles.icon}>
                                 { category.icon }
                             </div>
                             <div className={styles.info}>
                                 <label> { category.name } </label>
-                                <span> { category.shelves.length } Shelves </span>
+                                <span> { category.shelves?.length } Shelves </span>
                             </div>
                         </li>
                     })}
@@ -67,10 +70,10 @@ export const AddShelf: React.FC = () => {
 
             <section className={styles.toggleHolder}>
                 <label> Public </label>
-                <div className={styles.toggle + ' ' + (newShelf.viewPermission === 'PUBLIC' ? styles.on : styles.off)} onClick={ () => {
+                <div className={styles.toggle + ' ' + (newShelf.viewType === 'PUBLIC' ? styles.on : styles.off)} onClick={ () => {
                         setnewSelf({
                             ...newShelf,
-                            viewPermission: newShelf.viewPermission === 'PRIVATE' ? 'PUBLIC' : 'PRIVATE',
+                            viewType: newShelf.viewType === 'PRIVATE' ? 'PUBLIC' : 'PRIVATE',
                         });
                     } }>
                     <span></span>
@@ -78,9 +81,21 @@ export const AddShelf: React.FC = () => {
             </section>
 
             <button className={styles.publishButton} onClick={() => {
-                if (selectedCategoryIndex !== undefined) {
-                    userProfileData.categories[selectedCategoryIndex].shelves.push(newShelf);
-                    window.history.back();
+                if (selectedCategory !== undefined) {
+
+                    try {
+                        addShelf(selectedCategory, newShelf.name, newShelf.isArchived, newShelf.viewType, newShelf.description).then((response: any) => {
+                            getShelfDetails(response.data).then((data: any) => {
+                                userProfile.categories.find(category => category._id === selectedCategory)?.shelves?.push(data.data);
+                                localStorage.setItem('userProfile', JSON.stringify(userProfile));
+                                window.history.back();
+                            });
+                        })
+                    } catch (e) {
+                        console.log(e);
+                        window.alert("Failed to add shelf");
+                    }
+
                 } else {
                     alert("select category");
                 }

src/components/categories/Categories.tsx

@@ -6,7 +6,7 @@ import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circl
 import { NavLink } from "react-router-dom";
 import { AddCategory } from "../add-category/AddCategory";
 import { Category } from "../../shared/models/category";
-import { User } from "../../shared/models/user";
+import { MobileUser, User } from "../../shared/models/user";
 
 export const Categories: React.FC = () => {
     const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState<Boolean>(false);
@@ -21,7 +21,7 @@ export const Categories: React.FC = () => {
     }, [renderKey])
 
     const initUserProfile = () => {
-        const userProfile: User = JSON.parse(localStorage.getItem('userProfile') || "");
+        const userProfile: MobileUser = JSON.parse(localStorage.getItem('userProfile') || "");
         if (userProfile.categories) {
             setCategories(userProfile.categories);
         }
@@ -29,10 +29,9 @@ export const Categories: React.FC = () => {
 
     const filterCategories = (text: string) => {
         if (text.length > 0) {
-            let result: any = categoryResult.filter(category => {
+            let result = categoryResult.filter(category => {
                 return category.name.toLowerCase().includes(text.toLowerCase());
             });
-            console.log(result)
             setCategories(result);
         } else {
             initUserProfile();

src/components/home/Home.tsx

@@ -16,13 +16,13 @@ import { NavLink } from "react-router-dom";
 import { AddCategory } from "../add-category/AddCategory";
 import { useHistory } from "react-router-dom";
 import { userProfileData } from "../../App";
-import { User } from "../../shared/models/user";
+import { MobileUser } from "../../shared/models/user";
 import { getAllData } from "../../services/user";
 
 export const Home: React.FC = () => {
     const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState<Boolean>(false);
     const history = useHistory();
-    const [userProfile, setUserProfile] = useState<User>();
+    const [userProfile, setUserProfile] = useState<MobileUser>();
     const [renderKey, setRenderKey] = useState<number>(0);
     
     useEffect(() => {
@@ -119,7 +119,7 @@ export const Home: React.FC = () => {
             </ul>
         </section> */}
 
-        {/* <section className={styles.Shelf}>
+        <section className={styles.Shelf}>
             <header className={styles.blockHeader}>
                 <h4>
                     <BookShelfIcon />
@@ -158,13 +158,13 @@ export const Home: React.FC = () => {
                     })
                 })}
             </ul>
-        </section> */}
+        </section>
 
-        { userProfile && <section className={styles.Grid}>
+        { userProfile && userProfile.categories && <section className={styles.Grid}>
             <header className={styles.blockHeader}>
                 <h4>
                     <GridIcon />
-                    Categories { <span>({userProfile.categories?.length})</span> }
+                    Categories { <span>({userProfile.categories.length})</span> }
                 </h4>
                 <NavLink to={'/categories'} className={styles.expandButton}>
                     <ExpandIcon />
@@ -174,9 +174,9 @@ export const Home: React.FC = () => {
                 </button>
             </header>
             <ul>
-                {userProfile.categories?.map((category: any, index) => {
+                {userProfile.categories?.map((category, index) => {
                     return <li key={index} onClick={() => {
-                        history.push('/category-details/category_id=' + index);
+                        history.push('/category-details/category_id=' + category._id);
                     }}>
                         <div className={styles.icon}>
                             {category.icon}

src/services/shelf.ts

@@ -1,19 +1,23 @@
 import axios from "axios";
 import { API_TOKEN, SERVER_URL } from "../App";
+import { viewPermissionType } from "../shared/models/variables";
 
 
-export const getAllShelf = async (categoryId: string) => {
-    return await axios.get(SERVER_URL + '/shelf/details/?_id=' + { categoryId: categoryId },
+export const getShelfDetails = async (categoryId: string) => {
+    return await axios.get(SERVER_URL + '/shelf/details/?_id=' + categoryId,
         {
             headers: API_TOKEN
         })
 }
 
-export const addShelf = async (categoryId: string, name: string) => {
+export const addShelf = async (categoryId: string, name: string, isArchived: boolean, viewType: viewPermissionType, description?: string) => {
     return await axios.post(SERVER_URL + '/shelf/add/',
         {
             categoryId: categoryId,
-            name: name
+            name: name,
+            description: description,
+            isArchived: isArchived,
+            viewType: viewType
         },
         {
             headers: API_TOKEN

src/shared

@@ -1 +1 @@
-Subproject commit f4b5742e27cf554dc922fa1af415bafea7214b30
+Subproject commit d222fdf4c43980569323c9d50371c2d9be6b03b0