-
- );
-}
diff --git a/Slopify/src/components/MessageForm.jsx b/Slopify/src/components/MessageForm.jsx
deleted file mode 100644
index b792a897..00000000
--- a/Slopify/src/components/MessageForm.jsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import { useState, useEffect } from "react";
-import { supabase } from "../supabaseClient";
-import Button from "./Button";
-import emojis from "../utils/emoji.js";
-
-export default function MessageForm() {
- const [message, setMessage] = useState("");
- const [charCount, setCharCount] = useState(1000);
- const [emojiPickerVisible, setEmojiPickerVisible] = useState(false);
-
- const handleSubmit = async (e) => {
- e.preventDefault();
- if (!message.trim()) return;
-
- const user = supabase.auth.getUser();
- const { data: userData, error: userError } = await user;
-
- if (userError || !userData.user) {
- console.error("Error retrieving user:", userError);
- return;
- }
-
- const { id: user_id } = userData.user;
-
- const { error } = await supabase
- .from("messages")
- .insert([{ content: message, user_id }]);
-
- if (error) {
- console.error("Error sending message:", error.message);
- } else {
- setMessage("");
- setCharCount(1000);
- }
- };
-
- const handleInputChange = (e) => {
- const newMessage = e.target.value;
- const newCharCount = 1000 - newMessage.length;
- if (newCharCount >= 0) {
- setMessage(newMessage);
- setCharCount(newCharCount);
- }
- };
-
- const handleEmojiClick = (event, emojiKey) => {
- const emojiText = `:${emojiKey}:`;
- const newMessage = message + emojiText;
- const newCharCount = 1000 - newMessage.length;
-
- if (newCharCount >= 0) {
- setMessage(newMessage);
- setCharCount(newCharCount);
- }
-
- if (!event.shiftKey) {
- setEmojiPickerVisible(false);
- }
- };
-
- const getColor = () => {
- if (charCount <= 0) return "black";
- if (charCount <= 10) return "red";
- if (charCount <= 100) return "yellow";
- return "white";
- };
-
- useEffect(() => {}, [charCount]);
-
- return (
-
- );
-}
diff --git a/Slopify/src/components/MessageList.jsx b/Slopify/src/components/MessageList.jsx
deleted file mode 100644
index baa0a620..00000000
--- a/Slopify/src/components/MessageList.jsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { supabase } from "../supabaseClient";
-import Message from "./Message";
-import { sendNotification } from "@tauri-apps/plugin-notification";
-
-const PAGE_SIZE = 50;
-
-export default function MessageList(data) {
- const [messages, setMessages] = useState({});
- const [loading, setLoading] = useState(true);
- const [hasMore, setHasMore] = useState(true);
- const [scrolling, setScrolling] = useState(false);
-
- const sortedMessages = useMemo(
- () =>
- Object.values(messages).sort(
- (a, b) => new Date(a.created_at) - new Date(b.created_at),
- ),
- [messages],
- );
-
- useEffect(() => {
- fetchMessages();
- const subscription = supabase
- .channel("realtime:messages")
- .on(
- "postgres_changes",
- { event: "INSERT", schema: "public", table: "messages" },
- (payload) => {
- const newMessage = payload.new;
- attachDisplayName(newMessage).then((msgWithDisplayName) => {
- setMessages((prev) => ({
- ...prev,
- [newMessage.id]: msgWithDisplayName,
- }));
- if (
- data.currentUser &&
- msgWithDisplayName.content.includes(`@${data.currentUser}`)
- ) {
- triggerNotification(msgWithDisplayName);
- }
- });
- },
- )
- .subscribe();
-
- return () => {
- subscription.unsubscribe();
- };
- }, []);
-
- useEffect(() => {
- const messageBox = document.getElementById("message-box");
-
- if (messageBox) {
- messageBox.scrollTop = messageBox.scrollHeight;
- }
- }, [messages]);
-
- const formatDate = (utcDateString) => {
- const messageDate = new Date(`${utcDateString}Z`);
- const now = new Date();
-
- const isToday = messageDate.toDateString() === now.toDateString();
-
- const isYesterday =
- messageDate.toDateString() ===
- new Date(now.setDate(now.getDate() - 1)).toDateString();
-
- if (isToday) {
- return `Today, ${messageDate.toLocaleTimeString(undefined, {
- hour: "numeric",
- minute: "2-digit",
- second: "2-digit",
- })}`;
- }
-
- if (isYesterday) {
- return `Yesterday, ${messageDate.toLocaleTimeString(undefined, {
- hour: "numeric",
- minute: "2-digit",
- second: "2-digit",
- })}`;
- }
-
- return messageDate.toLocaleString(undefined, {
- year: "numeric",
- month: "short",
- day: "numeric",
- hour: "numeric",
- minute: "2-digit",
- second: "2-digit",
- });
- };
-
- const attachDisplayName = async (message) => {
- const { data: profile, error } = await supabase
- .from("profiles")
- .select("display_name, profile_color, profile_photo_url")
- .eq("id", message.user_id)
- .single();
-
- if (error) {
- console.error(
- "Error fetching display name and profile color:",
- error.message,
- );
- throw new Error("Unable to load user profile");
- }
-
- return {
- ...message,
- display_name: profile.display_name,
- profile_color: profile.profile_color,
- profile_photo_url: profile.profile_photo_url,
- };
- };
-
- const fetchMessages = async (olderThan = null) => {
- if (scrolling) return;
-
- setScrolling(true);
- const query = supabase
- .from("messages")
- .select("id, user_id, content, created_at")
- .order("created_at", { ascending: true })
- .limit(PAGE_SIZE);
-
- if (olderThan) {
- query.lt("created_at", olderThan);
- }
-
- const { data, error } = await query;
-
- if (error) {
- console.error("Error fetching messages:", error.message);
- } else {
- try {
- const messagesWithDisplayNames = await Promise.all(
- data.map(attachDisplayName),
- );
- setMessages((prev) => ({
- ...prev,
- ...messagesWithDisplayNames.reduce((acc, msg) => {
- acc[msg.id] = msg;
- return acc;
- }, {}),
- }));
- if (data.length < PAGE_SIZE) {
- setHasMore(false);
- }
- } catch (e) {
- console.error("Failed to attach display names:", e);
- }
- }
-
- setLoading(false);
- setScrolling(false);
- };
-
- const handleScroll = (e) => {
- const { scrollTop } = e.target;
- if (!(scrollTop === 0 && hasMore)) {
- return;
- }
-
- const oldestMessage = sortedMessages[sortedMessages.length - 1];
- if (oldestMessage) {
- fetchMessages(oldestMessage.created_at);
- }
- };
-
- const triggerNotification = (message) => {
- sendNotification({
- title: `${message.display_name} mentioned you!`,
- body: message.content,
- });
- };
-
- return (
-
-
-
- 
-
- {data.date}
-
- {data.name}
-
-
-
- {loading ? (
-
- );
-}
diff --git a/Slopify/src/components/RegisterForm.jsx b/Slopify/src/components/RegisterForm.jsx
deleted file mode 100644
index 9518f1c8..00000000
--- a/Slopify/src/components/RegisterForm.jsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { useState } from "react";
-import { supabase } from "../supabaseClient";
-import { useNavigate } from "react-router-dom";
-import Button from "./Button";
-
-export default function RegisterForm() {
- const [email, setEmail] = useState("");
- const [password, setPassword] = useState("");
- const [passwordConfirm, setPasswordConfirm] = useState("");
- const [displayName, setDisplayName] = useState("");
- const [error, setError] = useState("");
- const navigate = useNavigate();
-
- const generateRandomHexColor = () => {
- return `#${Math.floor(Math.random() * 16777215)
- .toString(16)
- .padStart(6, "0")}`;
- };
-
- const isValidDisplayName = (name) => {
- return /^[a-zA-Z0-9_]+$/.test(name);
- }
-
- const handleRegister = async (e) => {
- e.preventDefault();
- setError("");
-
- if (password !== passwordConfirm) {
- setError("Passwords do not match.");
- return;
- }
-
- if (!displayName.trim()) {
- setError("Display name cannot be empty.");
- return;
- }
-
- if (!isValidDisplayName(displayName)) {
- setError("Display name can only contain letters, numbers, and underscores.");
- return;
- }
-
- try {
- const { data: user, error: displayNameError } = await supabase
- .from("profiles")
- .select("display_name")
- .eq("display_name", displayName)
- .single();
-
- if (user) {
- setError("Display name is already taken.");
- return;
- }
-
- const { data, error: authError } = await supabase.auth.signUp({
- email,
- password,
- options: {
- data: {
- display_name: displayName,
- },
- },
- });
-
- if (authError) {
- setError(authError.message);
- return;
- }
-
- const randomColor = generateRandomHexColor();
-
- const { error: profileError } = await supabase.from("profiles").insert([
- {
- id: data.user.id,
- display_name: displayName,
- profile_color: randomColor,
- },
- ]);
-
- if (profileError && profileError.code !== "406") {
- setError(profileError.message);
- } else {
- navigate("/chat");
- }
- } catch (err) {
- setError("An error occurred during registration.");
- }
- };
-
- return (
-
- );
-}
diff --git a/Slopify/src/main.jsx b/Slopify/src/main.jsx
deleted file mode 100644
index f78978ef..00000000
--- a/Slopify/src/main.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import { check } from "@tauri-apps/plugin-updater";
-import { relaunch } from "@tauri-apps/plugin-process";
-
-const update = await check();
-if (update) {
- console.log(
- `found udpate ${update.version} from ${update.date} with notes ${update.body}`,
- );
- let downloaded = 0;
- let contentLength = 0;
-
- await update.downloadAndInstall((event) => {
- switch (event.event) {
- case "Started":
- contentLength = event.data.contentLength;
- console.log(`started downloading ${event.data.contentLength} bytes`);
- break;
- case "Progress":
- downloaded += event.data.chunkLength;
- console.log(`downloaded ${downloaded} from ${contentLength}`);
- break;
- case "Finished":
- console.log("download finished");
- break;
- }
- });
-
- console.log("update installed");
- await relaunch();
-} else {
- console.log("no updates available");
-}
-
-ReactDOM.createRoot(document.getElementById("root")).render(
- Loading...
- ) : ( - sortedMessages.map((msg) => ( -Loading...
;
- }
-
- const navToSlopbox = async (e) => {
- e.preventDefault();
- navigate("/slopbox");
- };
-
- const navToProfile = async (e) => {
- e.preventDefault();
- navigate("/profile");
- };
-
- return (
-
-
- );
-}
diff --git a/Slopify/src/pages/HomePage.jsx b/Slopify/src/pages/HomePage.jsx
deleted file mode 100644
index 9344f7c8..00000000
--- a/Slopify/src/pages/HomePage.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import LoginForm from "../components/LoginForm";
-import RegisterForm from "../components/RegisterForm";
-
-export default function HomePage() {
- return (
- <>
- Welcome back to Slopify, {displayName}!
-Slopify
-
-
-
- );
-}
diff --git a/Slopify/src/pages/ProfilePage.jsx b/Slopify/src/pages/ProfilePage.jsx
deleted file mode 100644
index 76fe542f..00000000
--- a/Slopify/src/pages/ProfilePage.jsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import { useState, useEffect } from "react";
-import { supabase } from "../supabaseClient";
-import { useNavigate } from "react-router-dom";
-import Button from "../components/Button";
-
-export default function ProfilePage() {
- const [profileData, setProfileData] = useState({
- display_name: "",
- profile_color: "",
- profile_photo_url: "",
- });
- const [newPhoto, setNewPhoto] = useState(null);
- const [loading, setLoading] = useState(true);
- const navigate = useNavigate();
-
- useEffect(() => {
- const fetchUserProfile = async () => {
- const { data: session } = await supabase.auth.getSession();
-
- if (!session || !session.session) {
- navigate("/");
- return;
- }
-
- const userId = session.session.user.id;
-
- const { data: profile, error } = await supabase
- .from("profiles")
- .select("display_name, profile_color, profile_photo_url")
- .eq("id", userId)
- .single();
-
- if (error) {
- console.error("Error fetching profile:", error.message);
- } else if (profile) {
- setProfileData(profile);
- }
-
- setLoading(false);
- };
-
- fetchUserProfile();
- }, [navigate]);
-
- const handleInputChange = (e) => {
- const { name, value } = e.target;
- setProfileData((prev) => ({ ...prev, [name]: value }));
- };
-
- const handlePhotoChange = (e) => {
- const file = e.target.files[0];
- if (file && (file.type === "image/png" || file.type === "image/jpeg")) {
- setNewPhoto(file);
- } else {
- alert("Please upload a valid PNG or JPG file.");
- }
- };
-
- const isValidDisplayName = (name) => {
- return /^[a-zA-Z0-9_]+$/.test(name);
- }
-
- const handleSubmit = async (e) => {
- e.preventDefault();
- setLoading(true);
-
- const sanitizedDisplayName = profileData.display_name;
-
- if (!sanitizedDisplayName.trim()) {
- alert("Display name cannot be empty.");
- setLoading(false);
- return
- }
-
- if (!isValidDisplayName(sanitizedDisplayName)) {
- alert("Display name can only contain letters, numbers, and underscores.");
- setLoading(false);
- return;
- }
-
- const { data: session } = await supabase.auth.getSession();
- if (!session || !session.session) {
- navigate("/");
- return;
- }
-
- const userId = session.session.user.id;
- let photoUrl = profileData.profile_photo_url;
-
- if (newPhoto) {
- const { data: uploadData, error: uploadError } = await supabase.storage
- .from("profile-photos")
- .upload(`public/${userId}/${newPhoto.name}`, newPhoto, {
- cacheControl: "3600",
- upsert: true,
- });
-
- if (uploadError) {
- console.error("Error uploading photo:", uploadError.message);
- setLoading(false);
- return;
- }
-
- const { data: urlData, error: urlError } = supabase.storage
- .from("profile-photos")
- .getPublicUrl(uploadData.path);
-
- if (urlError) {
- console.error("Error getting photo URL:", urlError.message);
- setLoading(false);
- return;
- }
-
- photoUrl = urlData.publicUrl;
- }
-
- const { error: updateError } = await supabase
- .from("profiles")
- .update({
- display_name: profileData.display_name,
- profile_color: profileData.profile_color,
- profile_photo_url: photoUrl,
- })
- .eq("id", userId);
-
- if (updateError) {
- console.error("Error updating profile:", updateError.message);
- } else {
- alert("Profile updated successfully!");
- }
-
- setLoading(false);
- };
-
- if (loading) return
-
-
-
-
- Loading...
;
-
- const navToChat = async (e) => {
- e.preventDefault();
- navigate("/chat");
- };
-
- return (
-
-
- );
-}
diff --git a/Slopify/src/pages/Slopbox.jsx b/Slopify/src/pages/Slopbox.jsx
deleted file mode 100644
index c41a9008..00000000
--- a/Slopify/src/pages/Slopbox.jsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { useEffect, useState } from "react";
-import { supabase } from "../supabaseClient";
-import { useNavigate } from "react-router-dom";
-import Button from "../components/Button";
-
-export default function SlopboxPage() {
- const [html, setHtml] = useState("");
- const [css, setCss] = useState("");
- const [js, setJs] = useState("");
- const [loading, setLoading] = useState(true);
- const navigate = useNavigate();
-
- useEffect(() => {
- const fetchInitialCode = async () => {
- const { data, error } = await supabase
- .from("slopbox")
- .select("html, css, js")
- .eq("id", 1)
- .single();
-
- if (data) {
- setHtml(data.html || "");
- setCss(data.css || "");
- setJs(data.js || "");
- }
-
- if (error) {
- console.error("Error fetching initial code:", error.message);
- }
-
- setLoading(false);
- };
-
- const subscribeToRealtime = () => {
- const channel = supabase
- .channel("realtime:slopbox")
- .on(
- "postgres_changes",
- { event: "UPDATE", schema: "public", table: "slopbox" },
- (payload) => {
- const { html, css, js } = payload.new;
- setHtml(html || "");
- setCss(css || "");
- setJs(js || "");
- },
- )
- .subscribe();
-
- return () => channel.unsubscribe();
- };
-
- fetchInitialCode();
- const unsubscribe = subscribeToRealtime();
-
- return () => unsubscribe();
- }, []);
-
- const updateCode = async (field, value) => {
- try {
- await supabase
- .from("slopbox")
- .update({ [field]: value })
- .eq("id", 1);
- } catch (error) {
- console.error(`Error updating ${field}:`, error.message);
- }
- };
-
- if (loading) {
- return Profile Settings
- - -Loading...
;
- }
-
- const navToChat = async (e) => {
- e.preventDefault();
- navigate("/chat");
- };
-
- return (
-
-