djakro
djakro
WWasp-lang
Created by djakro on 6/12/2024 in #🙋questions
Can't redirect after action taken
Im losing my marbles on this one. I'm using
useHistory
useHistory
from react-router-dom to try to redirect to 1 of 2 pages. But i can't get the redirect to work for the LIFE of me. My log response payload is:
[ Server ] Response payload: {
[ Server ] message: 'Webhook received and processed',
[ Server ] gptResponse: '2',
[ Server ] redirectUrl: '/not-a-good-fit'
[ Server ] }
[ Server ] Response payload: {
[ Server ] message: 'Webhook received and processed',
[ Server ] gptResponse: '2',
[ Server ] redirectUrl: '/not-a-good-fit'
[ Server ] }
Which is great that shows redirectUrl is being chosen correctly and gpt4o is giving me the ideal response. So why no redirect :sadboi: , i would use
useNavigate
useNavigate
but thats in new router-dom.
import React, { useEffect, useRef, useState } from 'react';
import { useHistory } from 'react-router-dom';

declare global {
interface Window {
Tally: any;
}
}

const ApplicationForm: React.FC = () => {
const iframeRef = useRef<HTMLIFrameElement>(null);
const [isLoading, setIsLoading] = useState(false);
const history = useHistory();

useEffect(() => {
const script = document.createElement('script');
script.src = 'https://tally.so/widgets/embed.js';
script.async = true;
script.onload = () => {
if (window.Tally) {
window.Tally.loadEmbeds();
} else {
document.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((iframe) => {
iframe.setAttribute('src', iframe.getAttribute('data-tally-src')!);
});
}
};
script.onerror = () => {
document.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((iframe) => {
iframe.setAttribute('src', iframe.getAttribute('data-tally-src')!);
});
};

document.body.appendChild(script);

window.addEventListener('message', handleFormSubmit);

return () => {
document.body.removeChild(script);
window.removeEventListener('message', handleFormSubmit);
};
}, []);

const handleFormSubmit = async (event: MessageEvent) => {
console.log('Received message event:', event);
console.log('Event data:', event.data);
console.log('Event origin:', event.origin);
console.log('Event type:', event.type);

if (event.origin === 'https://tally.so' && event.data?.event === 'Tally.FormSubmitted') {
const formData = event.data.payload;
console.log('Form data received:', formData);

setIsLoading(true);

try {
const response = await fetch('https://b168-99-250-72-13.ngrok-free.app/webhook/callback', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
});

console.log('Response received:', response);

if (!response.ok) {
throw new Error('Error calling webhook');
}

const data = await response.json();
console.log('Response data:', data);

const gptResponse = data.gptResponse;
console.log('GPT-4 Response:', gptResponse);

const redirectUrl = data.redirectUrl;
console.log('Redirect URL:', redirectUrl);

if (redirectUrl) {
console.log('Redirecting to', redirectUrl);
history.push(redirectUrl);
} else {
console.error('Unexpected GPT-4 response or missing redirect URL:', gptResponse);
}
} catch (error) {
console.error('Error calling webhook:', error);
} finally {
setIsLoading(false);
}
}
};

return (
<div className="container mx-auto px-6 py-12">
{isLoading ? (
<div>Loading...</div>
) : (
<iframe
ref={iframeRef}
data-tally-src="https://tally.so/embed/3E118B?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1"
loading="lazy"
width="100%"
height="1239"
frameBorder="0"
marginHeight={0}
marginWidth={0}
title="AI Engineer Application"
></iframe>
)}
</div>
);
};

export default ApplicationForm;
import React, { useEffect, useRef, useState } from 'react';
import { useHistory } from 'react-router-dom';

declare global {
interface Window {
Tally: any;
}
}

const ApplicationForm: React.FC = () => {
const iframeRef = useRef<HTMLIFrameElement>(null);
const [isLoading, setIsLoading] = useState(false);
const history = useHistory();

useEffect(() => {
const script = document.createElement('script');
script.src = 'https://tally.so/widgets/embed.js';
script.async = true;
script.onload = () => {
if (window.Tally) {
window.Tally.loadEmbeds();
} else {
document.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((iframe) => {
iframe.setAttribute('src', iframe.getAttribute('data-tally-src')!);
});
}
};
script.onerror = () => {
document.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((iframe) => {
iframe.setAttribute('src', iframe.getAttribute('data-tally-src')!);
});
};

document.body.appendChild(script);

window.addEventListener('message', handleFormSubmit);

return () => {
document.body.removeChild(script);
window.removeEventListener('message', handleFormSubmit);
};
}, []);

const handleFormSubmit = async (event: MessageEvent) => {
console.log('Received message event:', event);
console.log('Event data:', event.data);
console.log('Event origin:', event.origin);
console.log('Event type:', event.type);

if (event.origin === 'https://tally.so' && event.data?.event === 'Tally.FormSubmitted') {
const formData = event.data.payload;
console.log('Form data received:', formData);

setIsLoading(true);

try {
const response = await fetch('https://b168-99-250-72-13.ngrok-free.app/webhook/callback', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
});

console.log('Response received:', response);

if (!response.ok) {
throw new Error('Error calling webhook');
}

const data = await response.json();
console.log('Response data:', data);

const gptResponse = data.gptResponse;
console.log('GPT-4 Response:', gptResponse);

const redirectUrl = data.redirectUrl;
console.log('Redirect URL:', redirectUrl);

if (redirectUrl) {
console.log('Redirecting to', redirectUrl);
history.push(redirectUrl);
} else {
console.error('Unexpected GPT-4 response or missing redirect URL:', gptResponse);
}
} catch (error) {
console.error('Error calling webhook:', error);
} finally {
setIsLoading(false);
}
}
};

return (
<div className="container mx-auto px-6 py-12">
{isLoading ? (
<div>Loading...</div>
) : (
<iframe
ref={iframeRef}
data-tally-src="https://tally.so/embed/3E118B?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1"
loading="lazy"
width="100%"
height="1239"
frameBorder="0"
marginHeight={0}
marginWidth={0}
title="AI Engineer Application"
></iframe>
)}
</div>
);
};

export default ApplicationForm;
14 replies
WWasp-lang
Created by djakro on 6/11/2024 in #🙋questions
Some crazy WASP error!
Hey guys! This is a different project from my main design one so its pretty new, so i can afford any breaking fixes lol. I don't know what the heck happened but i get this error:
[ Server ] > server@0.0.0 watch
[ Server ] > nodemon --exec 'npm run bundle-and-start || exit 1'
[ Server ]
[ Client ] > RecruitAI@0.0.0 start
[ Client ] > npm run validate-env && vite
[ Client ]
[ Server ] [nodemon] 2.0.22
[ Server ] [nodemon] to restart at any time, enter `rs`
[ Server ] [nodemon] watching path(s): src/**/* ../../../src/**/* .env
[ Server ] [nodemon] watching extensions: ts,mts,js,mjs,json
[ Server ] [nodemon] starting `npm run bundle-and-start || exit 1`
[ Client ]
[ Client ] > RecruitAI@0.0.0 validate-env
[ Client ] > node -r dotenv/config ./scripts/validate-env.mjs
[ Client ]
[ Client ] 🔍 Validating environment variables...
[ Server ]
[ Server ] > server@0.0.0 bundle-and-start
[ Server ] > npm run bundle && npm run start
[ Server ]
[ Server ]
[ Server ] > server@0.0.0 bundle
[ Server ] > rollup --config --silent
[ Server ]
[ Client ]
[ Client ] VITE v5.2.13 ready in 321 ms
[ Client ]
[ Client ] ➜ Local: http://localhost:3000/
[ Client ] ➜ Network: http://192.168.0.128:3000/
[ Client ] ➜ press h + enter to show help
[ Server ]
[ Server ] > server@0.0.0 start
[ Server ] > npm run validate-env && node --enable-source-maps -r dotenv/config bundle/server.js
[ Server ]
[ Server ]
[ Server ] > server@0.0.0 validate-env
[ Server ] > node -r dotenv/config ./scripts/validate-env.mjs
[ Server ]
[ Server ] 🔍 Validating environment variables...
[ Server!] node:internal/modules/esm/resolve:264
[ Server!] throw new ERR_MODULE_NOT_FOUND(
[ Server!] ^
[ Server!]
[ Server!] Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/jacobferrari/Documents/RecruitAI/RecruitAI/.wasp/out/sdk/wasp/dist/ext-src/queries.js.js' imported from /Users/jacobferrari/Documents/RecruitAI/RecruitAI/.wasp/out/sdk/wasp/dist/server/operations/queries/index.js
[ Server!] at finalizeResolution (node:internal/modules/esm/resolve:264:11)
[ Server!] at moduleResolve (node:internal/modules/esm/resolve:924:10)
[ Server!] at defaultResolve (node:internal/modules/esm/resolve:1148:11)
[ Server!] at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12)
[ Server!] at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)
[ Server!] at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
[ Server!] at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
[ Server!] at link (node:internal/modules/esm/module_job:86:36) {
[ Server!] code: 'ERR_MODULE_NOT_FOUND',
[ Server!] url: 'file:///Users/jacobferrari/Documents/RecruitAI/RecruitAI/.wasp/out/sdk/wasp/dist/ext-src/queries.js.js'
[ Server!] }
[ Server!]
[ Server!] Node.js v21.7.1
[ Server ] [nodemon] app crashed - waiting for file changes before starting...


👀 --- [Warning] Your wasp project reported following warnings during compilation: ---

- Wasp was unable to verify your database is up to date. Running `wasp db migrate-dev` may fix this and will provide more info.
[ Server ] > server@0.0.0 watch
[ Server ] > nodemon --exec 'npm run bundle-and-start || exit 1'
[ Server ]
[ Client ] > RecruitAI@0.0.0 start
[ Client ] > npm run validate-env && vite
[ Client ]
[ Server ] [nodemon] 2.0.22
[ Server ] [nodemon] to restart at any time, enter `rs`
[ Server ] [nodemon] watching path(s): src/**/* ../../../src/**/* .env
[ Server ] [nodemon] watching extensions: ts,mts,js,mjs,json
[ Server ] [nodemon] starting `npm run bundle-and-start || exit 1`
[ Client ]
[ Client ] > RecruitAI@0.0.0 validate-env
[ Client ] > node -r dotenv/config ./scripts/validate-env.mjs
[ Client ]
[ Client ] 🔍 Validating environment variables...
[ Server ]
[ Server ] > server@0.0.0 bundle-and-start
[ Server ] > npm run bundle && npm run start
[ Server ]
[ Server ]
[ Server ] > server@0.0.0 bundle
[ Server ] > rollup --config --silent
[ Server ]
[ Client ]
[ Client ] VITE v5.2.13 ready in 321 ms
[ Client ]
[ Client ] ➜ Local: http://localhost:3000/
[ Client ] ➜ Network: http://192.168.0.128:3000/
[ Client ] ➜ press h + enter to show help
[ Server ]
[ Server ] > server@0.0.0 start
[ Server ] > npm run validate-env && node --enable-source-maps -r dotenv/config bundle/server.js
[ Server ]
[ Server ]
[ Server ] > server@0.0.0 validate-env
[ Server ] > node -r dotenv/config ./scripts/validate-env.mjs
[ Server ]
[ Server ] 🔍 Validating environment variables...
[ Server!] node:internal/modules/esm/resolve:264
[ Server!] throw new ERR_MODULE_NOT_FOUND(
[ Server!] ^
[ Server!]
[ Server!] Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/jacobferrari/Documents/RecruitAI/RecruitAI/.wasp/out/sdk/wasp/dist/ext-src/queries.js.js' imported from /Users/jacobferrari/Documents/RecruitAI/RecruitAI/.wasp/out/sdk/wasp/dist/server/operations/queries/index.js
[ Server!] at finalizeResolution (node:internal/modules/esm/resolve:264:11)
[ Server!] at moduleResolve (node:internal/modules/esm/resolve:924:10)
[ Server!] at defaultResolve (node:internal/modules/esm/resolve:1148:11)
[ Server!] at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12)
[ Server!] at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)
[ Server!] at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
[ Server!] at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
[ Server!] at link (node:internal/modules/esm/module_job:86:36) {
[ Server!] code: 'ERR_MODULE_NOT_FOUND',
[ Server!] url: 'file:///Users/jacobferrari/Documents/RecruitAI/RecruitAI/.wasp/out/sdk/wasp/dist/ext-src/queries.js.js'
[ Server!] }
[ Server!]
[ Server!] Node.js v21.7.1
[ Server ] [nodemon] app crashed - waiting for file changes before starting...


👀 --- [Warning] Your wasp project reported following warnings during compilation: ---

- Wasp was unable to verify your database is up to date. Running `wasp db migrate-dev` may fix this and will provide more info.
things are WILDING out. I think this line is key
[ Server!] url: 'file:///Users/jacobferrari/Documents/RecruitAI/RecruitAI/.wasp/out/sdk/wasp/dist/ext-src/queries.js.js'
[ Server!] url: 'file:///Users/jacobferrari/Documents/RecruitAI/RecruitAI/.wasp/out/sdk/wasp/dist/ext-src/queries.js.js'
Pretty sure it shouldn't be looking there. Something kind of similar to this happened way back when I was using direct imports but from what I see and done all my imports are relative. Heres a link to the full WASP project code: https://www.mediafire.com/file/78efctqk6a6e75h/RecruitAI.zip/file
18 replies
WWasp-lang
Created by djakro on 5/30/2024 in #🙋questions
CORS Issues After Deployment (Email Auth)
Access to XMLHttpRequest at 'https://desi...' from origin 'https://desi...' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index-Bh8OtO0g.js:57


POST https://des... net::ERR_FAILED

signup:1 Access to XMLHttpRequest at 'https://desi...' from origin 'https:...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index-Bh8OtO0g.js:57


GET https://desig... net::ERR_FAILED 502 (Bad Gateway)
Access to XMLHttpRequest at 'https://desi...' from origin 'https://desi...' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index-Bh8OtO0g.js:57


POST https://des... net::ERR_FAILED

signup:1 Access to XMLHttpRequest at 'https://desi...' from origin 'https:...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index-Bh8OtO0g.js:57


GET https://desig... net::ERR_FAILED 502 (Bad Gateway)
Sorry to keep berading with questions (although i seem to eventually solve them haha. But i'm getting CORS errors during the signup and login process after deploying. Do i have to setup CORS in a different way upon deployment? I thought WASP handled that. Also the app isnt ready yet so i just deleted the full url
47 replies
WWasp-lang
Created by djakro on 5/27/2024 in #🙋questions
Best Solution to Automate Workflows
I definitely need advice. Im beginning to automate workflows in businesses (connecting APIs with an LLM on top) Im about to start developing for clients. I had always used make .com before because it’s easy to connect APIs together. But now I’ve gotten pretty decent at using WASP & React and I feel like that can be more flexible than something low code. Also something lacking with make is the ability to create a dashboard if I need the user to click a button or type some input to start the workflow automation. Can I use WASP in an away where I can run API requests in a chain at scheduled times and create multiple dashboards with it ? Or better yet should I combo WASP with make? WASP can be used to make the dashboards? Or I guess WASP makes CRON jobs pretty easy and this is the way? Also note: the goal is create these workflow automations quick and lower cost (let’s say $20k on avg per project) (right now if I’m building it out that doesn’t matter but when we hire team on it will) Haha just want advice 🙏
8 replies
WWasp-lang
Created by djakro on 5/14/2024 in #🙋questions
Anyone got RAG working with WASP?
My current approach is to use langchains build in vector storage but i want the vector data to be stored in Postgre database that WASP makes. - crappy coder that uses AI to code religiously
10 replies
WWasp-lang
Created by djakro on 4/13/2024 in #🙋questions
freaking out a little bit
WASP 13.2 [ Client ] > OpenSaaS@0.0.0 start [ Client ] > npm run validate-env && vite [ Client ] [ Server ] > server@0.0.0 watch [ Server ] > nodemon --exec 'npm run bundle-and-start || exit 1' [ Server ] [ Client ] [ Client ] > OpenSaaS@0.0.0 validate-env [ Client ] > node -r dotenv/config ./scripts/validate-env.mjs [ Client ] [ Client!] node:internal/modules/esm/resolve:264 [ Client!] throw new ERR_MODULE_NOT_FOUND( [ Client!] ^ [ Client!] [ Client!] Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/jacobferrari/Documents/WASP App/my-saas/app/node_modules/wasp/dist/universal/validators.js' imported from /Users/jacobferrari/Documents/WASP App/my-saas/app/.wasp/out/web-app/scripts/validate-env.mjs [ Client!] at finalizeResolution (node:internal/modules/esm/resolve:264:11) [ Client!] at moduleResolve (node:internal/modules/esm/resolve:924:10) [ Client!] at defaultResolve (node:internal/modules/esm/resolve:1148:11) [ Client!] at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12) [ Client!] at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25) [ Client!] at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38) [ Client!] at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39) [ Client!] at link (node:internal/modules/esm/module_job:86:36) { [ Client!] code: 'ERR_MODULE_NOT_FOUND', [ Client!] url: 'file:///Users/jacobferrari/Documents/WASP%20App/my-saas/app/node_modules/wasp/dist/universal/validators.js' [ Client!] } [ Client!] [ Client!] Node.js v21.7.1 No idea what’s causing it, already tried deleting package-lock and wasp folder and reinstalling.
45 replies