axios problems

client/src/App.tsx

@@ -7,7 +7,7 @@ import { IUser } from './schemas';
 
 // pages, ui, styles
 import Subscriptions from './components/pages/Subscriptions/Subscriptions';
-import Browser from './components/pages/Browser';
+import Browser from './components/ui/Browser';
 import Collection from './components/pages/Collection';
 import Login from './components/pages/Login';
 import Profile from './components/pages/Profile';
@@ -61,7 +61,7 @@ function App() {
             <Route path="/profile"                element={<Profile />} />
             <Route path="/collections"            element={<CollectionBrowser />} />
             <Route path="/collections/:id"        element={<Collection />} />
-            <Route path="/explore"                element={<Browser />} />
+            <Route path="/explore"                element={<Browser header="" searchFunction={() => {}} />} />
             <Route path="/recipe/:id"             element={<Recipe />} />
             <Route path="/subscriptions"          element={<Subscriptions />} />
             <Route path="/subscriptions/:id"      element={<Collection />} />

client/src/components/pages/Browser.tsx

@@ -1,18 +0,0 @@
-import Protect from "../../util/Protect";
-import { Button, Page } from "../ui";
-
-export default function Browser() {
-    return (
-        <Protect>
-            <h1>Search recipes</h1>
-            <div>
-                <input type="text"></input>
-                <Button>ADVANCED SEARCH</Button>
-            </div>
-
-            {/* divider */}
-
-            {/* recipe cards, or "no recipes matching your search" */}
-        </Protect>
-    )
-}

client/src/components/pages/Register/collection.tsx

@@ -18,6 +18,14 @@ const InitialCollection: RegisterVariantType = ({ transitionDisplay, receiveChan
         setUser(login.user);
     }
 
+    useEffect(() => {
+        if (input) {
+            setTimeout(() => {
+                unwrapLogin(input);
+            }, 750);
+        }
+    }, [])
+
     const handleClick = async () => {
         if (!user) return;
         const collection: ICollection = {
@@ -29,19 +37,13 @@ const InitialCollection: RegisterVariantType = ({ transitionDisplay, receiveChan
             datemodified: now
         }
 
+        console.log(collection);
+
         const result = await createNewCollection(collection);
         console.log(result);
         if (result) transitionDisplay(VariantLabel.AddFriends);
     }
 
-    useEffect(() => {
-        if (input) {
-            setTimeout(() => {
-                unwrapLogin(input);
-            }, 2000);
-        }
-    }, [])
-
     useEffect(() => {    
         if (user && receiveChange) {
             receiveChange(user);

client/src/components/ui/Browser.tsx

@@ -0,0 +1,25 @@
+import { FC, useEffect, useState } from "react";
+import Protect from "../../util/Protect";
+import Form from "./Form";
+
+interface BrowserProps {
+    children?: JSX.Element[]
+    header: string
+    searchFunction: (...params: any) => any
+}
+
+const Browser: FC<BrowserProps> = ({ children, header, searchFunction }) => {
+    const [form, setForm] = useState<any>();
+
+    useEffect(() => {
+        
+    })
+
+    return (
+        <Protect>
+            <h1>{header}</h1>
+        </Protect>
+    )
+}
+
+export default Browser;

client/src/components/ui/Form.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent } from "react";
+import { ChangeEvent, FC } from "react";
 import { v4 } from 'uuid';
 import RichText from "./RichText";
 
@@ -20,7 +20,7 @@ export interface FormConfig<T> {
     extraStyles?: string
 }
 
-export default class Form<T>{
+export default class Form<T> {
     private parent: string;
     private labels: string[];
     private keys: string[];
@@ -39,6 +39,8 @@ export default class Form<T>{
         this.getState = config.getState;
         this.richTextInitialValue = config.richTextInitialValue;
         this.extraStyles = config.extraStyles;
+
+        this.mount();
     }
 
     update(e: ChangeEvent<HTMLElement>, idx: number) {

client/src/util/Protect.tsx

@@ -4,7 +4,7 @@ import Divider from "../components/ui/Divider";
 import { useAuthContext } from "../context/AuthContext";
 import { ProtectPortal } from "./types";
 
-const Protect: ProtectPortal = ({ children = <></> }) => {
+const Protect: ProtectPortal = ({ children }) => {
     const { user } = useAuthContext();
     const navigate = useNavigate();
 
@@ -22,7 +22,7 @@ const Protect: ProtectPortal = ({ children = <></> }) => {
     } else {
         return (
             <Page>
-                { children }
+                { children || <></> }
             </Page>
         )
     }

client/src/util/apiUtils.tsx

@@ -3,7 +3,7 @@ import { IAuthContext } from "../context/AuthContext";
 import axios from "axios";
 const API = import.meta.env.APISTRING || "http://localhost:8080";
 
-axios.defaults.withCredentials = true;
+axios.defaults.withCredentials = false;
 axios.defaults.headers['Content-Type'] = 'application/json';
 
 export const getBaseAPI = async () => {
@@ -57,7 +57,7 @@ export const attemptRegister = async (body: IUser) => {
         const response = await axios({
             method: "POST",
             url: API + '/auth/register',
-            data: JSON.stringify(body)
+            data: body
         })
 
         return Promise.resolve(response.data);
@@ -72,8 +72,8 @@ export const createNewCollection = async (body: ICollection) => {
         const response = await axios({
             method: "POST",
             url: API + '/collection',
-            data: JSON.stringify(body)
+            data: body
-        });
+        })
 
         return Promise.resolve(response.data);
     } catch (e: any) {

server/auth/index.ts

@@ -9,8 +9,6 @@ const UserInstance = new User();
 export default class AuthService {
     // methods for local strategies
     async register(data: IUser) {
-        const { email, password } = data;
-
         data.datecreated = now;
         data.datemodified = now;
         data.active = true;
@@ -18,19 +16,23 @@ export default class AuthService {
 
         try {
             // not allowed to use email address that already exists
-            const user = await UserInstance.getOneByEmail(email);
+            const user = await UserInstance.getOneByEmail(data.email);
+
             if (user) throw createError('409', 'Email already in use');
 
             // hash password and create new user record
-            const salt = await bcrypt.genSalt();
+            const salt = await bcrypt.genSalt(12);
-            bcrypt.hash(password!, salt, async (err, hash) => {
+            console.log(salt);
+            console.log(data.password);
+
+            bcrypt.hash(data.password!, salt, (err, hash) => {
                 if (err) throw err;
                 const newData = {
                     ...data,
                     password: hash
                 }
 
-                await UserInstance.post(newData);
+                UserInstance.post(newData);
             })
 
             return true;

server/auth/middlewares.ts

@@ -4,8 +4,6 @@ import { StatusCode } from "../util/types";
 export function restrictAccess(req: Request, res: Response, next: NextFunction) {
     if (req.isAuthenticated()) {
         next();
-    } else {
-        res.status(StatusCode.Forbidden).send({ ok: false, user: undefined })
     }
 }
 

server/routes/auth.ts

@@ -57,7 +57,7 @@ export const authRoute = (app: Express, passport: PassportStatic) => {
 
     router.post('/register', async (req, res, next) => {
         try {
-            const data: IUser = req.body;
+            const data = req.body;
             const response = await AuthInstance.register(data);
             if (!response) res.status(400).send({ ok: false });
             res.status(200).send({ ok: true });

server/routes/collection.ts

@@ -30,6 +30,8 @@ export const collectionRoute = (app: Express) => {
 
     router.post('/', restrictAccess, async (req, res, next) => {
         const data = req.body;
+        console.log(data);
+
         try {
             const result = await CollectionInstance.post(data);
             res.status(result.code).send(result.data);