Full Sql migration

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "axios": "^0.26.0",
     "bootstrap": "^5.1.3",
     "firebase": "^9.1.3",
     "immer": "^9.0.6",

src/components/App.jsx

@@ -9,7 +9,7 @@ import Home from './Home'
 import Error404 from './404';
 import NewVideo from './NewVideo'
 import VideoDetail from './VideoDetail';
-import Group from './GroupProfile';
+import Group from './Profile';
 import EditProfile from './EditProfile';
 import { useState } from 'react'
 import { QueryParamProvider } from 'use-query-params'

src/components/Card.jsx

@@ -5,7 +5,7 @@ import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import {FaPlay} from 'react-icons/fa';
 import defaultImg from '../assets/default_video.PNG'
-import {_ownerNames} from '../utils/constants'
+import {_ownerNames} from '../utils/ids_temp'
 
 function Card(props) {
   const { project } = props;

src/components/EditProfile.jsx

@@ -1,17 +1,18 @@
 import React, { useState, useEffect } from 'react'
 import md5 from 'md5'
 import './styles/VideosDisplay.scss'
-import styles from './styles/GroupProfile.module.scss'
+import styles from './styles/Profile.module.scss'
 import { Spinner, Button, Input } from 'reactstrap'
 import Group from '../firebase/groups'
 import Tag from './Tag'
 import SocialMediaEdit from './SocialMediaEdit'
-import { AiTwotoneEdit } from 'react-icons/ai'
+import { AiTwotoneEdit, AiOutlineSave } from 'react-icons/ai'
 import { DEFAULT_BIO, MAX_CATEGORIES } from '../utils/constants'
 import { Redirect } from 'react-router'
 import {auth} from '../base'
 import { equalSets } from '../utils/math'
-import {AiOutlineSave} from 'react-icons/ai'
+import {getProfile, updateProfile} from '../models/profiles'
+import {emails} from '../utils/ids_temp'
 
 // import ProfileVideos from './ProfileVideos'
 
@@ -20,7 +21,8 @@ const EditProfile = (props) => {
     const [profileData, setprofileData] = useState({
         id: null,
         name: null,
-        desc: null,
+        email: null,
+        description: null,
         fb: null,
         ig: null,
     });
@@ -42,36 +44,63 @@ const EditProfile = (props) => {
 
 
     useEffect(() => {
-        const groupId = props.match.params.id;
-        console.log("Group id", groupId);
+        const groupUid = props.match.params.id;
+        //const email = emails[groupUid];
         async function fetchData() {
-            const group = await Group.getGroupById(groupId);
-            console.log("Profile Data:\n", group)
+            getProfile(groupUid).then(data => {
+                console.log('PG Profile:\n', data)
+                setprofileData(data);
+                setOriginalData(data);
+                setLoading(false);
 
-            if (group.error) {
-                setLoading(false)
-                seterrorNotFound(group.error);
-                return
-            }
-            group.id = groupId;
-            setprofileData(group);
-            setOriginalData(group);
-
-            setLoading(false);
-            setProfilePicURL(getGravatarURL(groupId));
-            const currentUser = auth.currentUser
-            if (currentUser) {
-                setisOwner(groupId == currentUser.email)
-            } else {
-                setisOwner(false);
-            }
-
-            if (group.tags) {
-                setTags(group.tags);
-                setOriginalTags(group.tags);
-            } 
+                setProfilePicURL(getGravatarURL(data.email));
+
+                if (data.tags) {
+                    setTags(data.tags);
+                    setOriginalTags(data.tags);
+                }
+
+                const currentUser = auth.currentUser
+                if (currentUser) {
+                    console.log("Is profile owner");
+                    setisOwner(data.email == currentUser.email)
+                }
+            }).catch((err) => {
+                console.log('error fetching profile');
+                seterrorNotFound(JSON.stringify(err));
+                setLoading(false);
+            });
+
         }
 
+        // async function fetchData() {
+            // const group = await Group.getGroupById(groupId);
+        //     console.log("Profile Data:\n", group)
+
+        //     if (group.error) {
+        //         setLoading(false)
+        //         seterrorNotFound(group.error);
+        //         return
+        //     }
+        //     group.id = groupId;
+        //     setprofileData(group);
+        //     setOriginalData(group);
+
+        //     setLoading(false);
+        //     setProfilePicURL(getGravatarURL(groupId));
+        //     const currentUser = auth.currentUser
+        //     if (currentUser) {
+        //         setisOwner(groupId == currentUser.email)
+        //     } else {
+        //         setisOwner(false);
+        //     }
+
+        //     if (group.tags) {
+        //         setTags(group.tags);
+        //         setOriginalTags(group.tags);
+        //     } 
+        // }
+
         fetchData();
     }, []);
 
@@ -82,6 +111,8 @@ const EditProfile = (props) => {
     }
 
     const handleOnChange = (event) => {
+        console.log('Updated profileData');
+        console.log(profileData);
         setprofileData({
             ...profileData,
             [event.target.id]: event.target.textContent,
@@ -99,65 +130,66 @@ const EditProfile = (props) => {
         setcurrentTag(event.target.value);
     }
 
+
+    const validateCurrentTag = () => {
+        return currentTag.length > 26;
+    }
+
+    const addTag = () => {  
+        if (tags.length +1 > MAX_CATEGORIES) return;  // add sound effects?
+
+        setTags((tags) => [...tags, currentTag]);
+        setcurrentTag("");
+    }
+
+    const deleteTag = (index) => {
+        console.log("deleting", tags[index]);
+        setTags(tags.filter((tag, i) => i !== index));
+    }
+
     const onSave = async () => {
+        console.log("profile to submit:");
+        console.dir(profileData);
+        console.log(tags);
         setShowSpinner(true);
-        if (dataDidChange(originalData, profileData) || tagsDidChange(originalTags, tags)) {
 
-            // remove @ for fb and ig vals
+        if (dataDidChange(originalData, profileData) || tagsDidChange(originalTags, tags)) {
             if (!profileData.name) {
                 console.log("El nombre no puede estar vacío.")
                 setShowSpinner(false);
                 return;
             }
 
+            // remove @ for fb and ig vals
             if (profileData.fb && profileData.fb.startsWith('@')) {
                 profileData.fb = profileData.fb.slice(1);
             }
             if (profileData.ig && profileData.ig.startsWith('@')) {
                 profileData.ig = profileData.ig.slice(1);
             }
 
-            const data = {
-                ...profileData,
-                tags
-            }
+            // Overwrite previous tags
+            profileData.tags = tags;
 
-            const res = await Group.updateGroup(data);
-            if (res.ok) {
-                console.log("Updated Succesfully!");
-                // redirect
+            updateProfile(profileData).then(result => {
+                console.log(result);
+                // redirect on succesful update
                 setInterval(() => {
                     setShowSpinner(false);
                     setRedirect(true)
                 }, 1000);
 
-            } else {
-                console.log("Something went wrong", res.error);
-                setShowSpinner(false);
-            }
+            }).catch(err => {
+                console.log("Something went wrong", err);
+                setShowSpinner(false);            
+            })
+
         } else {
             console.log("No data to update");
             setShowSpinner(false);
         }
     }
 
-
-    const validateCurrentTag = () => {
-        return currentTag.length > 26;
-    }
-
-    const addTag = () => {  
-        if (tags.length +1 > MAX_CATEGORIES) return;  // add sound effects?
-
-        setTags((tags) => [...tags, currentTag]);
-        setcurrentTag("");
-    }
-
-    const deleteTag = (index) => {
-        console.log("deleting", tags[index]);
-        setTags(tags.filter((tag, i) => i !== index));
-    }
-
     if (loading) return (
         <div className={styles.containerLoading}>
             <Spinner children="" style={{ width: '15rem', height: '15rem' }} />
@@ -187,8 +219,8 @@ const EditProfile = (props) => {
                 </div>
                 <div className={styles.nameAndDesc}>
                     <p contenteditable="True" id="name" onBlur={handleOnChange} className={styles.profileName}>{profileData.name}  <AiTwotoneEdit /></p>
-                    <p contenteditable="True" id="desc" onBlur={handleOnChange} className={styles.profileDesc}>
-                        {profileData.desc ||
+                    <p contenteditable="True" id="description" onBlur={handleOnChange} className={styles.profileDesc}>
+                        {profileData.description ||
                             DEFAULT_BIO(profileData.name)}  <AiTwotoneEdit />
                     </p>
 

src/components/NavBar.jsx

@@ -15,6 +15,7 @@ import useLogin from '../hooks/useLogin'
 import mGlass from '../assets/mGlass.png'
 import { BiSearchAlt2 } from 'react-icons/bi'
 import { auth } from '../base'
+import { uids } from '../utils/ids_temp';
 
 const placeholders = {
     'owner': 'Busca por nombre de grupo',
@@ -37,7 +38,6 @@ const NavHeader = (props) => {
     const [placeholderSearch, setplaceholderSearch] = useState(placeholders["owner"])
 
     const { location, history } = props;
-    console.log("You are now at ", location.pathname)
 
     const { isMd, isSm } = useMediaSize();
     const toggle = () => setOpen(!dropdownopen);
@@ -120,7 +120,7 @@ const NavHeader = (props) => {
                                                 </DropdownItem>
                                                 <DropdownItem divider />
                                                 <DropdownItem>
-                                                    <NavLink style={{ color: 'white' }} className='nav-link' to={`/p/${profileId}`}>
+                                                    <NavLink style={{ color: 'white' }} className='nav-link' to={`/p/${uids[profileId]}`}>
                                                         PERFIL
                                                     </NavLink>
                                                 </DropdownItem>
@@ -184,7 +184,7 @@ const NavHeader = (props) => {
                                         </DropdownItem>
                                         <DropdownItem divider />
                                         <DropdownItem>
-                                            <NavLink style={{ color: 'white' }} className='nav-link' to={`/p/${profileId}`}>
+                                            <NavLink style={{ color: 'white' }} className='nav-link' to={`/p/${uids[profileId]}`}>
                                                 PERFIL
                                             </NavLink>
                                         </DropdownItem>