Skip to content

Commit

Permalink
auth flow fixed (#158)
Browse files Browse the repository at this point in the history
  • Loading branch information
@codypharm
codypharm authored Apr 6, 2024
1 parent cf82125 commit 9f41f83
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 64 deletions.
24 changes: 10 additions & 14 deletions src/app/dashboard/dashLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import imageDecenterLogoSubtitle from '@public/Logo Texts.png'
import { RxDashboard } from 'react-icons/rx'
import { HiOutlineChip } from 'react-icons/hi'

import { BsDatabase } from 'react-icons/bs'
import { BsDatabase, BsGear } from 'react-icons/bs'
import { GoBell, GoSearch } from 'react-icons/go'
import { AiFillSetting } from 'react-icons/ai'
import { CiLogout } from 'react-icons/ci'
Expand Down Expand Up @@ -84,9 +84,8 @@ export const DashLayout = ({ children }: { children: React.ReactNode }) => {
<div className="w-full h-[90%] overflow-y-auto font-archivo ">
<Link href="/dashboard">
<div
className={`flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 hover:bg-primary_11 text-primary_8 hover:text-primary_1 ${
pathname === '/dashboard' ? 'bg-primary_11 text-white' : ''
}`}
className={`flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 hover:bg-primary_11 text-primary_8 hover:text-primary_1 ${pathname === '/dashboard' ? 'bg-primary_11 text-white' : ''
}`}
>
<div className="flex justify-center ">
<RxDashboard size={25} />
Expand All @@ -96,9 +95,8 @@ export const DashLayout = ({ children }: { children: React.ReactNode }) => {
</Link>
<Link href="/dashboard/train">
<div
className={`flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 hover:bg-primary_11 text-primary_8 hover:text-primary_1 ${
pathname === '/dashboard/train' ? 'bg-primary_11 text-white' : ''
}`}
className={`flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 hover:bg-primary_11 text-primary_8 hover:text-primary_1 ${pathname === '/dashboard/train' ? 'bg-primary_11 text-white' : ''
}`}
>
<div className="flex justify-center ">
<HiOutlineChip size={25} />
Expand All @@ -108,9 +106,8 @@ export const DashLayout = ({ children }: { children: React.ReactNode }) => {
</Link>
<Link href="/dashboard/repository">
<div
className={`flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 hover:bg-primary_11 text-primary_8 hover:text-primary_1 ${
pathname === '/dashboard/repository' ? 'bg-primary_11 text-white' : ''
}`}
className={`flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 hover:bg-primary_11 text-primary_8 hover:text-primary_1 ${pathname === '/dashboard/repository' ? 'bg-primary_11 text-white' : ''
}`}
>
<div className="flex justify-center ">
<BsDatabase size={25} />
Expand Down Expand Up @@ -138,12 +135,11 @@ export const DashLayout = ({ children }: { children: React.ReactNode }) => {
</div> */}
<Link href="/dashboard/settings">
<div
className={`flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 hover:bg-primary_11 text-primary_8 hover:text-primary_1 ${
pathname === '/dashboard/settings' ? 'bg-primary_11 text-white' : ''
}`}
className={`flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 hover:bg-primary_11 text-primary_8 hover:text-primary_1 ${pathname === '/dashboard/settings' ? 'bg-primary_11 text-white' : ''
}`}
>
<div className="flex justify-center ">
<BsDatabase size={25} />
<BsGear size={25} />
</div>
<p className="text-sm">Settings</p>
</div>
Expand Down
89 changes: 44 additions & 45 deletions src/app/explore/welcome/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function Page() {
const { push } = useRouter()
const userStore = useUserStore()
const [selectedImage, setSelectedImage] = useState(null);
const fileInputRef = useRef(null);
const fileInputRef = useRef(null);
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [username, setUsername] = useState('')
Expand Down Expand Up @@ -50,39 +50,39 @@ export default function Page() {
};

const areAllFieldsFilled = () => {
return firstName && lastName && username && email && bio;
return firstName && lastName && username && email;
};


const handleFileInputChange = async (event) => {

const selectedFile = event.target.files[0];

console.log(selectedFile)

if (selectedFile) {
try {
// Convert the selected file to a data URL
const dataUrl = await readFileAsDataURL(selectedFile);
// Convert the selected file to a data URL
const dataUrl = await readFileAsDataURL(selectedFile);

// console.log("Data URL: " + dataUrl)
// console.log("Data URL: " + dataUrl)


// Ensure dataUrl is a string before updating userStore
if (typeof dataUrl === 'string') {
// Update the userStore with the data URL
userStore.setUser({
profileImage: dataUrl,
});
// Ensure dataUrl is a string before updating userStore
if (typeof dataUrl === 'string') {
// Update the userStore with the data URL
userStore.setUser({
profileImage: dataUrl,
});

// Update the src prop of the Image component
setSelectedImage(selectedFile);
} else {
console.error('Error converting file to data URL. Invalid data URL format.');
}
// Update the src prop of the Image component
setSelectedImage(selectedFile);
} else {
console.error('Error converting file to data URL. Invalid data URL format.');
}

} catch (error) {
console.error('Error converting file to data URL:', error);
console.error('Error converting file to data URL:', error);
}
}
};
Expand All @@ -91,20 +91,20 @@ export default function Page() {
// Helper function to read file as data URL
const readFileAsDataURL = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => {
resolve(reader.result);
};
reader.onerror = (error) => {
reject(error);
};
reader.readAsDataURL(file);
const reader = new FileReader();

reader.onloadend = () => {
resolve(reader.result);
};

reader.onerror = (error) => {
reject(error);
};

reader.readAsDataURL(file);
});
};


type Url = {
url: string
Expand Down Expand Up @@ -144,7 +144,7 @@ export default function Page() {


return (
<div className="absolute inset-0 z-50 bg-black w-[80%] sm:w-[60%] md:w-[40%] lg:w-[30%] h-[90%] max-h-screen mx-auto transition-all duration-500 ease-in-out rounded-xl px-6 py-6 flex flex-col gap-4 shadow-xl my-auto" style={{ border: '1px solid white' }}>
<div className="absolute inset-0 z-50 bg-black w-[80%] sm:w-[60%] md:w-[40%] lg:w-[40%] h-[90%] max-h-screen mx-auto transition-all duration-500 ease-in-out rounded-xl px-6 py-6 flex flex-col gap-4 shadow-xl my-auto" style={{ border: '1px solid white' }}>
<h1 className="font-logirentBold text-primary_1 text-center font-bold text-5xl rounded-md py-3 w-[80%] lg:w-[100%] h-[10%]"
>
{' '}
Expand All @@ -159,20 +159,20 @@ export default function Page() {
/>
<label htmlFor="imageInput">
{userStore.user && (
<Image
src={selectedImage ? URL.createObjectURL(selectedImage) : userStore.user.profileImage}
alt="profile pic"
loader={myImageLoader}
unoptimized
width={70}
height={70}
className="max-w-[100%] max-h-[100%] rounded-full cursor-pointer"
/>
<Image
src={selectedImage ? URL.createObjectURL(selectedImage) : userStore.user.profileImage}
alt="profile pic"
loader={myImageLoader}
unoptimized
width={70}
height={70}
className="max-w-[100%] max-h-[100%] rounded-full cursor-pointer"
/>
)}
</label>

<button className="absolute -bottom-2 left-10 text-primary_7 bg-primary_10 p-1.5 rounded-full">
<input
<input
type="file"
accept="image/*"
style={{ display: 'none' }}
Expand All @@ -184,7 +184,7 @@ export default function Page() {
</button>
</div>
<form action="" className="text-primary_8 text-sm flex flex-col gap-4 relative ">
<div className="flex gap-4" >
<div className="flex gap-4 " >
<div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
{/*FIXME: keep firstName and last name ; .*/}
<label htmlFor="name" className="font-bold text-sm text-primary_2">
Expand Down Expand Up @@ -254,9 +254,8 @@ export default function Page() {
<div className="font-semibold flex justify-center gap-4 items-center mt-2">
<button
onClick={handleSubmit}
className={`bg-primary_10 bg-blue text-primary_4 rounded-full px-4 py-2 w-[200px] text-center mt-4 ${
areAllFieldsFilled() ? '' : 'opacity-50 cursor-not-allowed'
}`}
className={`bg-primary_10 bg-blue text-primary_4 rounded-full px-4 py-2 w-[200px] text-center mt-4 ${areAllFieldsFilled() ? '' : 'opacity-50 cursor-not-allowed'
}`}
disabled={!areAllFieldsFilled()} // Disable the button if fields are not filled
// TODO: fixme this is not activated. Use userStore.syncDB to save to DB. And pass false as the second argument to userStore.setUser
>
Expand Down
11 changes: 6 additions & 5 deletions src/state/userStore.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {create} from 'zustand'
import {devtools, persist} from 'zustand/middleware'
import {upsert_user} from '@app/explore/upsert_user'
import {User} from '@prisma/client'
import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'
import { upsert_user } from '@app/explore/upsert_user'
import { User } from '@prisma/client'

// interface IUser{
// id: string
Expand Down Expand Up @@ -36,8 +36,9 @@ const useUserStore = create<Store>()(
}))
console.log('userStore: init')
},
async setUser(userDto: Partial<IUser>, syncDB: boolean = true) {
async setUser(userDto: Partial<IUser>, syncDB: boolean = false) {
//TODO: make this false, too much DB writes!!
// * Syncdb set to false by default
set((state) => ({
...state,
user: {
Expand Down

0 comments on commit 9f41f83

Please sign in to comment.