WOLFLEADER
WOLFLEADER
Explore posts from servers
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 3/14/2024 in #questions
Zustand Store Creation before React
Hey, I was wondering how you could initialise a zustand store outside of react context entirely. Say i have
import DataRepository from "businesslogic/DataRepository";
import DbContext from "models/DbContext";
import { create } from "zustand";

type UseDBContext = {
dbContext: DbContext | null;
initialized: boolean;
init: () => Promise<void>;
};
export const useDBContext = create<UseDBContext>((set, get) => ({
dbContext: null,
initialized: false,
init: async () => {
let context = await DataRepository.initialize();
set({ dbContext: context, initialized: true });
},
}));
import DataRepository from "businesslogic/DataRepository";
import DbContext from "models/DbContext";
import { create } from "zustand";

type UseDBContext = {
dbContext: DbContext | null;
initialized: boolean;
init: () => Promise<void>;
};
export const useDBContext = create<UseDBContext>((set, get) => ({
dbContext: null,
initialized: false,
init: async () => {
let context = await DataRepository.initialize();
set({ dbContext: context, initialized: true });
},
}));
Now the only way i can initiate a DbContext is via the DataRepository.initialize() method. However, i dont want my dbContext to have to be null or undefined before it's initialised. I want dbContext to always have a value, and i dont really need/want the store to have to store the other params. Now an easy solution outside of the react work is DI, inject the service where you need it. In this case its not really possible in react. I can create a factory to do like
function createDBContextStore(dbContext: DB Context) {
return create((set) => ({
dbContext,
}));
}
function createDBContextStore(dbContext: DB Context) {
return create((set) => ({
dbContext,
}));
}
However this then means i dont have the global hook anymore... Any suggestions would be great.
2 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 9/15/2023 in #questions
FastAPI with nextjs pages App
Hey, I am using the t3 stack and trying to setup a fastapi inside of it as i need it for some ML stuff. I came across this https://github.com/digitros/nextjs-fastapi however it only works with app dir. Ideally i dont wont unrestricted access to this api either, i want to try limit its access to only being used from interally via trpc.
4 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 6/8/2023 in #questions
T3 Turbo Build Issue
hey guys im getting this strange error when trying to build t3 turboafter i upgraded from expo 47 to 48 https://cdn.discordapp.com/attachments/943205994123657246/1116227528688939018/image.png Has anyone else had something similar before?
8 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 4/17/2023 in #questions
React Native and Zustand Real-time data
Hey everyone, I am writing a react native app that uses mqtt for real time data comms, and needs to be able to update every 100ms if possible. I am using zustand to handle the mqtt data outside of the react tree to help reduce uneccessary renders.
onMessage: (topic, buffer) => {
if (!get().mqttData.get(topic)) return;

if (start == 0) start = new Date().getTime();

get().mqttBuffData.set(topic, buffer);

// if its been 500 ms call handle buffers
if (new Date().getTime() - start > 100) {
get().handleBuffers();
}
},
handleBuffers: () => {
start = 0;
for (let [key, value] of get().mqttBuffData) {
get().mqttData.set(key, JSON.parse(value.toString()));
}

set((state) => ({
mqttBuffData: new Map(),
}));
},
onMessage: (topic, buffer) => {
if (!get().mqttData.get(topic)) return;

if (start == 0) start = new Date().getTime();

get().mqttBuffData.set(topic, buffer);

// if its been 500 ms call handle buffers
if (new Date().getTime() - start > 100) {
get().handleBuffers();
}
},
handleBuffers: () => {
start = 0;
for (let [key, value] of get().mqttBuffData) {
get().mqttData.set(key, JSON.parse(value.toString()));
}

set((state) => ({
mqttBuffData: new Map(),
}));
},
I timed this function using new Date().getTime() before and after, and it it seems to be taking ~600ms to call the function.... which doesnt seem right
5 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 3/11/2023 in #questions
Prisma cant find ENV variable in turbo repo
@acme/db:db:push: error: Environment variable not found: DATABASE_URL.
@acme/db:db:push: --> schema.prisma:10
@acme/db:db:push: |
@acme/db:db:push: 9 | provider = "mysql"
@acme/db:db:push: 10 | url = env("DATABASE_URL")
@acme/db:db:push: error: Environment variable not found: DATABASE_URL.
@acme/db:db:push: --> schema.prisma:10
@acme/db:db:push: |
@acme/db:db:push: 9 | provider = "mysql"
@acme/db:db:push: 10 | url = env("DATABASE_URL")
when i run turbo db:push in creat-t3-turbo i am getting this. database url does infact exist in my repo so idk why its being weird
2 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 3/8/2023 in #questions
Using Upstash
Hey guys, I was wondering if i could get some insight into the best way to design the following system. I have a rough idea on how to design it but not 100% sure. So I have IoT devices in the field, and only activate when a certain sensor is enabled (which should send a notification to the user with the data). Once activated they will start sending data to my api every Xms for Y seconds. (just say data every 500ms, for 10 seconds) This data is sent over HTTP to my nextjs api with data. Sometimes it might spam the api endpoint if the frequency is quite low. To account for this I dont want to send a user a notification on their phone every time this happens. Currently what i am doing, is inserting all this data into a MessageBus table. which is exactly what it says, a message bus. I've realised this is probably in efficient, and going to move to redis streams on upstash. Now this is where im a little unsure on what to do next. So when data comes in from a device, push it to the redis stream. Cool that works, but then how should i know when to send a notification to the user? I would need some form of server that reads the redis stream, and calls the appropriate actions, but this isnt possible to do in nextjs...
62 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 2/27/2023 in #questions
EAS Build Failing without error
2 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 2/22/2023 in #questions
Zustland Multiple stores
hey when using something like zustand, how would i use a store inside another store? for example i have metaDataStore which contains metadata, that i want to use in my readerStore metadata is getting used in a callback in the readerStore. The readerStore contains an event callback for onRead() so i cant really pass it into the function
46 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 2/18/2023 in #questions
Best CSS for this design
43 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 2/3/2023 in #questions
Raw HTTP Requests to TRPC
Hey, I have an api route that I need to create in my nextjs app that will be called from a non-javascript client. How would u make a http POST request to a TRPC route?
12 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 2/3/2023 in #questions
Any Benefits to using Auth0 in Next-Auth?
Hey, currently working on an expo app that uses Auth0 for auth. Planning on using it aswell for the nextjs app. I was looking at next-auth, and it seems to provide functionality to use Auth0 as a provider. Would there realistically be any benefits to using this? I feel like it would just be easier to use the @auth0/nextjs-auth0 package, as next-auth just feels like an unnecessary middle man. I do store additional data about users, i.e their products etc, and use prisma currently, but I dont strictly need next-auth for this.
28 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 1/19/2023 in #questions
UseEffect not being called
Hey, I've got a weird bug in my react component
const MqttProvider = ({ children, options }: Props) => {
const [mqtt, setMqtt] = useState<MqttClient>();
const [connected, setConnected] = useState(false);

const onConnect = () => {
setConnected(true);
};

const onClose = () => {
setConnected(false);
};

const initMqtt = async () => {
try {
const broker = await getBroker();

const newMqtt = connect(broker, options);
newMqtt.setMaxListeners(0);
newMqtt.on("connect", onConnect);
newMqtt.on("close", onClose);
newMqtt.on("error", onClose);
setMqtt(newMqtt);
} catch (e) {
console.error(e);
}
};

useEffect(() => {
initMqtt();
}, []);

useEffect(() => {
console.log(mqtt?.connected);
}, [mqtt?.connected]);

return (
<MqttContext.Provider value={{ mqtt }}>{children}</MqttContext.Provider>
);
};
const MqttProvider = ({ children, options }: Props) => {
const [mqtt, setMqtt] = useState<MqttClient>();
const [connected, setConnected] = useState(false);

const onConnect = () => {
setConnected(true);
};

const onClose = () => {
setConnected(false);
};

const initMqtt = async () => {
try {
const broker = await getBroker();

const newMqtt = connect(broker, options);
newMqtt.setMaxListeners(0);
newMqtt.on("connect", onConnect);
newMqtt.on("close", onClose);
newMqtt.on("error", onClose);
setMqtt(newMqtt);
} catch (e) {
console.error(e);
}
};

useEffect(() => {
initMqtt();
}, []);

useEffect(() => {
console.log(mqtt?.connected);
}, [mqtt?.connected]);

return (
<MqttContext.Provider value={{ mqtt }}>{children}</MqttContext.Provider>
);
};
For some reason, when mqtt.connected is changed the useEffect is not called. For example if i start the broker, it console logs false and then when i disconnect it console logs true its almost as if the useEffect is reading the previous state. However if i change the depedency to be my connected state variable instead, it updates perfectly.... ( was previously wrapping the return in react.memo but i have removed it for this example, as it presents the same issue, the depedency of mqtt?.connected doesnt get called)
42 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 1/18/2023 in #questions
T3-Turbo Installing Expo Packages Error
Hey, when I try to add packages or update packages to my expo app in create-t3-turbo it tries running random npm commands...
> yarn add @shopify/flash-list@1.1.0 react-native@0.69.6
yarn add v1.22.19
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
warning @shopify/flash-list > recyclerlistview > prop-types > fbjs > core-js@1.2.7: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
[6/6] ⠄ @acme/db
[-/6] ⠄ waiting...
[-/6] ⠄ waiting...
[-/6] ⠄ waiting...
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
error C:\......\node_modules\@acme\db: Command failed.
Exit code: 1
Command: prisma generate
Arguments:
> yarn add @shopify/flash-list@1.1.0 react-native@0.69.6
yarn add v1.22.19
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
warning @shopify/flash-list > recyclerlistview > prop-types > fbjs > core-js@1.2.7: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
[6/6] ⠄ @acme/db
[-/6] ⠄ waiting...
[-/6] ⠄ waiting...
[-/6] ⠄ waiting...
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
error C:\......\node_modules\@acme\db: Command failed.
Exit code: 1
Command: prisma generate
Arguments:
11 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 1/12/2023 in #questions
Boosting SEO
Hey guys, I was wondering what techniques people use to boos the SEO of their websites? My current website shows up second when you google for my business, with the first result being some random instagram page. https://www.potpirate.com.au/ (yes its using yucky mui with nextjs, but eventually going to rewrite it tailwind + astro) Not really sure what to add, do i need to add more content to my site? More meta keywords?
6 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 11/19/2022 in #questions
Large POST request on ESP32 over SIM
Hey, bit of a pot shot putting it in here but anyways My Microcontroller is an esp32-cam, and I am trying to currently write a function to send a POST request containing form data to my server. I am using TinyGSM with a SIM7600 module. so currently the jpegs being captured take up 100kb in RAM this is 1/3 of the RAM, but thats fine. The issue is sending this to the SIM module. can only send 1kb over serial, so i have to chunk it into smaller sizes when sending it i.e
String head = "--PotWatcher\r\nContent-Disposition: form-data; name=\"image\"; filename=\"PotWatcherImage.jpg\"\r\nContent-Type: image/jpeg\r\n\r\n";
String tail = "\r\n--PotWatcher--\r\n";
// Make a HTTP GET request:
Serial.println("Performing HTTP POST request...");
client.print(String("POST ") + resource + " HTTP/1.1\r\n");
client.print(String("Host: ") + host + "\r\n");
client.print(String("Authorization: ") + uuid + "\r\n");
client.println("Connection: Keep-Alive");
client.println("Content-Length: " + String(length));
client.println("Content-Type: multipart/form-data;boundary=PotWatcher");
client.println();
client.print(head);

uint8_t *fbBuf = payload;
for (size_t n = 0; n < length; n = n + PACKET_SIZE)
{
if (n + PACKET_SIZE < length)
{
client.write(fbBuf, PACKET_SIZE);
fbBuf += PACKET_SIZE;
}
else if (length % PACKET_SIZE > 0)
{
size_t remainder = length % PACKET_SIZE;
client.write(fbBuf, remainder);
}
}

client.print(tail);
String head = "--PotWatcher\r\nContent-Disposition: form-data; name=\"image\"; filename=\"PotWatcherImage.jpg\"\r\nContent-Type: image/jpeg\r\n\r\n";
String tail = "\r\n--PotWatcher--\r\n";
// Make a HTTP GET request:
Serial.println("Performing HTTP POST request...");
client.print(String("POST ") + resource + " HTTP/1.1\r\n");
client.print(String("Host: ") + host + "\r\n");
client.print(String("Authorization: ") + uuid + "\r\n");
client.println("Connection: Keep-Alive");
client.println("Content-Length: " + String(length));
client.println("Content-Type: multipart/form-data;boundary=PotWatcher");
client.println();
client.print(head);

uint8_t *fbBuf = payload;
for (size_t n = 0; n < length; n = n + PACKET_SIZE)
{
if (n + PACKET_SIZE < length)
{
client.write(fbBuf, PACKET_SIZE);
fbBuf += PACKET_SIZE;
}
else if (length % PACKET_SIZE > 0)
{
size_t remainder = length % PACKET_SIZE;
client.write(fbBuf, remainder);
}
}

client.print(tail);
the issue with this is that if one of the .write()'s fails (which usually 1 does) i have no way of knowing until i get either a response from the server, or a timeout. An example of this would be https://cdn.discordapp.com/attachments/244238376167800832/1043504972156915792/image.png at this stage i am unsure on what to do. I can safely send post requests that contain little to no data (i.e for one of them i send the GPS lat and long and that works fine)
1 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 11/16/2022 in #questions
NextJS Handling binary data
hey, how do you change the body parser in nextjs? I am trying to handle raw binary file POST requests
8 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 11/15/2022 in #questions
recommended solutions for storing images
Hey, I was wondering if anyone had any recommendations for storing images for my app. Each image will be less than 150kb. Currently unsure about how many I am going to need to store Currently when it gets sent to my nextjs api route i just store it in my db as a BLOB, however I don’t believe this will scale well
6 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 11/11/2022 in #questions
Securing API Route for use with IoT devices
Hey, what would peoples recommendations be for securing my nextjs api for use with Iot devices. Previously I would use a JWT, or OAuth to secure them but im not really sure if this would suit an iot device. Essentially my device needs to be able to connect, and then send some telemetry data over https, and will do this at random intervals. Currently I am generating a cryptographically secure GUUID on the microcontroller using hardware RNG, and storing this in memory and sending this uuid up as the authorization token, which then checks if the token exists in the db, if it doesnt, it ignores the request (i eventually want to add in a way to block ip's if it keeps spamming the API), however i dont believe this to be secure in the long run
22 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 11/9/2022 in #questions
Learning a functional lang
Has anyone got recommendations on a functional programming lang to learn? Kinda wanna get into it lmao
14 replies
TTCTheo's Typesafe Cult
Created by WOLFLEADER on 11/1/2022 in #questions
react FC's tutorial?
hey does anyone know a good react tutorial that just uses hooks instead of components? trying to get my colleague to learn react, and was going to link him to the react docs, but the react docs all use class components 🤮 surely theres an updated docs in 2022 that teaches reach usign FCs
7 replies