-
-
Save adrianhajdin/4d2500bf5af601bbd9f4f596298d33ac to your computer and use it in GitHub Desktop.
export const sidebarLinks = [ | |
{ | |
imgURL: "/assets/icons/home.svg", | |
route: "/", | |
label: "Home", | |
}, | |
{ | |
imgURL: "/assets/icons/wallpaper.svg", | |
route: "/explore", | |
label: "Explore", | |
}, | |
{ | |
imgURL: "/assets/icons/people.svg", | |
route: "/all-users", | |
label: "People", | |
}, | |
{ | |
imgURL: "/assets/icons/bookmark.svg", | |
route: "/saved", | |
label: "Saved", | |
}, | |
{ | |
imgURL: "/assets/icons/gallery-add.svg", | |
route: "/create-post", | |
label: "Create Post", | |
}, | |
]; | |
export const bottombarLinks = [ | |
{ | |
imgURL: "/assets/icons/home.svg", | |
route: "/", | |
label: "Home", | |
}, | |
{ | |
imgURL: "/assets/icons/wallpaper.svg", | |
route: "/explore", | |
label: "Explore", | |
}, | |
{ | |
imgURL: "/assets/icons/bookmark.svg", | |
route: "/saved", | |
label: "Saved", | |
}, | |
{ | |
imgURL: "/assets/icons/gallery-add.svg", | |
route: "/create-post", | |
label: "Create", | |
}, | |
]; |
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"); | |
@tailwind base; | |
@tailwind components; | |
@tailwind utilities; | |
@layer base { | |
* { | |
@apply box-border list-none p-0 m-0 scroll-smooth; | |
} | |
body { | |
@apply bg-dark-1 text-white min-h-screen font-inter; | |
} | |
} | |
@layer utilities { | |
/* TYPOGRAPHY */ | |
.h1-bold { | |
@apply text-[36px] font-bold leading-[140%] tracking-tighter; | |
} | |
.h1-semibold { | |
@apply text-[36px] font-semibold leading-[140%] tracking-tighter; | |
} | |
.h2-bold { | |
@apply text-[30px] font-bold leading-[140%] tracking-tighter; | |
} | |
.h3-bold { | |
@apply text-[24px] font-bold leading-[140%] tracking-tighter; | |
} | |
.base-semibold { | |
@apply text-[16px] font-semibold leading-[140%] tracking-tighter; | |
} | |
.base-medium { | |
@apply text-[16px] font-medium leading-[140%]; | |
} | |
.base-regular { | |
@apply text-[16px] font-normal leading-[140%]; | |
} | |
.body-bold { | |
@apply text-[18px] font-bold leading-[140%]; | |
} | |
.body-medium { | |
@apply text-[18px] font-medium leading-[140%]; | |
} | |
.small-semibold { | |
@apply text-[14px] font-semibold leading-[140%] tracking-tighter; | |
} | |
.small-medium { | |
@apply text-[14px] font-medium leading-[140%]; | |
} | |
.small-regular { | |
@apply text-[14px] font-normal leading-[140%]; | |
} | |
.subtle-semibold { | |
@apply text-[12px] font-semibold leading-[140%]; | |
} | |
.tiny-medium { | |
@apply text-[10px] font-medium leading-[140%]; | |
} | |
/* UTILITIES */ | |
.invert-white { | |
@apply invert brightness-0 transition; | |
} | |
.flex-center { | |
@apply flex justify-center items-center; | |
} | |
.flex-between { | |
@apply flex justify-between items-center; | |
} | |
.flex-start { | |
@apply flex justify-start items-center; | |
} | |
.custom-scrollbar::-webkit-scrollbar { | |
width: 3px; | |
height: 3px; | |
border-radius: 2px; | |
} | |
.custom-scrollbar::-webkit-scrollbar-track { | |
background: #09090a; | |
} | |
.custom-scrollbar::-webkit-scrollbar-thumb { | |
background: #5c5c7b; | |
border-radius: 50px; | |
} | |
.custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
background: #7878a3; | |
} | |
.common-container { | |
@apply flex flex-col flex-1 items-center gap-10 overflow-scroll py-10 px-5 md:px-8 lg:p-14 custom-scrollbar; | |
} | |
/* All Users */ | |
.user-container { | |
@apply max-w-5xl flex flex-col items-start w-full gap-6 md:gap-9; | |
} | |
.user-grid { | |
@apply w-full grid grid-cols-1 xs:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-7 max-w-5xl; | |
} | |
/* Explore */ | |
.explore-container { | |
@apply flex flex-col flex-1 items-center overflow-scroll py-10 px-5 md:p-14 custom-scrollbar; | |
} | |
.explore-inner_container { | |
@apply max-w-5xl flex flex-col items-center w-full gap-6 md:gap-9; | |
} | |
.explore-search { | |
@apply h-12 bg-dark-4 border-none placeholder:text-light-4 focus-visible:ring-0 focus-visible:ring-offset-0 ring-offset-0 !important; | |
} | |
/* Home */ | |
.home-container { | |
@apply flex flex-col flex-1 items-center gap-10 overflow-scroll py-10 px-5 md:px-8 lg:p-14 custom-scrollbar; | |
} | |
.home-posts { | |
@apply max-w-screen-sm flex flex-col items-center w-full gap-6 md:gap-9; | |
} | |
.home-creators { | |
@apply hidden xl:flex flex-col w-72 2xl:w-465 px-6 py-10 gap-10 overflow-scroll custom-scrollbar; | |
} | |
/* Post Details */ | |
.post_details-container { | |
@apply flex flex-col flex-1 gap-10 overflow-scroll py-10 px-5 md:p-14 custom-scrollbar items-center; | |
} | |
.post_details-card { | |
@apply bg-dark-2 w-full max-w-5xl rounded-[30px] flex-col flex xl:flex-row border border-dark-4 xl:rounded-l-[24px]; | |
} | |
.post_details-img { | |
@apply h-80 lg:h-[480px] xl:w-[48%] rounded-t-[30px] xl:rounded-l-[24px] xl:rounded-tr-none object-cover p-5 bg-dark-1; | |
} | |
.post_details-info { | |
@apply bg-dark-2 flex flex-col gap-5 lg:gap-7 flex-1 items-start p-8 rounded-[30px]; | |
} | |
.post_details-delete_btn { | |
@apply p-0 flex gap-3 hover:bg-transparent hover:text-light-1 text-light-1 small-medium lg:base-medium; | |
} | |
/* Profile */ | |
.profile-container { | |
@apply flex flex-col items-center flex-1 gap-10 overflow-scroll py-10 px-5 md:p-14 custom-scrollbar; | |
} | |
.profile-inner_container { | |
@apply flex items-center md:mb-8 xl:items-start gap-8 flex-col xl:flex-row relative max-w-5xl w-full; | |
} | |
.profile-tab { | |
@apply flex-center gap-3 py-4 w-48 bg-dark-2 transition flex-1 xl:flex-initial; | |
} | |
/* Saved */ | |
.saved-container { | |
@apply flex flex-col flex-1 items-center gap-10 overflow-scroll py-10 px-5 md:p-14 custom-scrollbar; | |
} | |
/* Bottom bar */ | |
.bottom-bar { | |
@apply z-50 flex-between w-full sticky bottom-0 rounded-t-[20px] bg-dark-2 px-5 py-4 md:hidden; | |
} | |
/* File uploader */ | |
.file_uploader-img { | |
@apply h-80 lg:h-[480px] w-full rounded-[24px] object-cover object-top; | |
} | |
.file_uploader-label { | |
@apply text-light-4 text-center small-regular w-full p-4 border-t border-t-dark-4; | |
} | |
.file_uploader-box { | |
@apply flex-center flex-col p-7 h-80 lg:h-[612px]; | |
} | |
/* Grid Post List */ | |
.grid-container { | |
@apply w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-7 max-w-5xl; | |
} | |
.grid-post_link { | |
@apply flex rounded-[24px] border border-dark-4 overflow-hidden cursor-pointer w-full h-full; | |
} | |
.grid-post_user { | |
@apply absolute bottom-0 p-5 flex-between w-full bg-gradient-to-t from-dark-3 to-transparent rounded-b-[24px] gap-2; | |
} | |
/* Left sidebar */ | |
.leftsidebar { | |
@apply hidden md:flex px-6 py-10 flex-col justify-between min-w-[270px] bg-dark-2; | |
} | |
.leftsidebar-link { | |
@apply rounded-lg base-medium hover:bg-primary-500 transition; | |
} | |
/* Post Card */ | |
.post-card { | |
@apply bg-dark-2 rounded-3xl border border-dark-4 p-5 lg:p-7 w-full max-w-screen-sm; | |
} | |
.post-card_img { | |
@apply h-64 xs:h-[400px] lg:h-[450px] w-full rounded-[24px] object-cover mb-5; | |
} | |
/* Topbar */ | |
.topbar { | |
@apply sticky top-0 z-50 md:hidden bg-dark-2 w-full; | |
} | |
/* User card */ | |
.user-card { | |
@apply flex-center flex-col gap-4 border border-dark-4 rounded-[20px] px-5 py-8; | |
} | |
} | |
@layer components { | |
/* SHADCN COMPONENTS */ | |
/* Form */ | |
.shad-form_label { | |
@apply text-white !important; | |
} | |
.shad-form_message { | |
@apply text-red !important; | |
} | |
.shad-input { | |
@apply h-12 bg-dark-4 border-none placeholder:text-light-4 focus-visible:ring-1 focus-visible:ring-offset-1 ring-offset-light-3 !important; | |
} | |
.shad-textarea { | |
@apply h-36 bg-dark-3 rounded-xl border-none focus-visible:ring-1 focus-visible:ring-offset-1 ring-offset-light-3 !important; | |
} | |
/* Button */ | |
.shad-button_primary { | |
@apply bg-primary-500 hover:bg-primary-500 text-light-1 flex gap-2 !important; | |
} | |
.shad-button_dark_4 { | |
@apply h-12 bg-dark-4 px-5 text-light-1 flex gap-2 !important; | |
} | |
.shad-button_ghost { | |
@apply flex gap-4 items-center justify-start hover:bg-transparent hover:text-white !important; | |
} | |
} |
https://drive.google.com/file/d/13_7FofRAC3wARqPtAVPi53QNJJRd5RH_/view?usp=sharing |
export enum QUERY_KEYS { | |
// AUTH KEYS | |
CREATE_USER_ACCOUNT = "createUserAccount", | |
// USER KEYS | |
GET_CURRENT_USER = "getCurrentUser", | |
GET_USERS = "getUsers", | |
GET_USER_BY_ID = "getUserById", | |
// POST KEYS | |
GET_POSTS = "getPosts", | |
GET_INFINITE_POSTS = "getInfinitePosts", | |
GET_RECENT_POSTS = "getRecentPosts", | |
GET_POST_BY_ID = "getPostById", | |
GET_USER_POSTS = "getUserPosts", | |
GET_FILE_PREVIEW = "getFilePreview", | |
// SEARCH KEYS | |
SEARCH_POSTS = "getSearchPosts", | |
} |
/** @type {import('tailwindcss').Config} */ | |
const defaultTheme = require('tailwindcss/defaultTheme') | |
module.exports = { | |
darkMode: ['class'], | |
content: [ | |
'./pages/**/*.{ts,tsx}', | |
'./components/**/*.{ts,tsx}', | |
'./app/**/*.{ts,tsx}', | |
'./src/**/*.{ts,tsx}', | |
], | |
theme: { | |
container: { | |
center: true, | |
padding: '2rem', | |
screens: { | |
'2xl': '1400px', | |
}, | |
}, | |
extend: { | |
colors: { | |
'primary-500': '#877EFF', | |
'primary-600': '#5D5FEF', | |
'secondary-500': '#FFB620', | |
'off-white': '#D0DFFF', | |
'red': '#FF5A5A', | |
'dark-1': '#000000', | |
'dark-2': '#09090A', | |
'dark-3': '#101012', | |
'dark-4': '#1F1F22', | |
'light-1': '#FFFFFF', | |
'light-2': '#EFEFEF', | |
'light-3': '#7878A3', | |
'light-4': '#5C5C7B', | |
}, | |
screens: { | |
'xs': '480px', | |
}, | |
width: { | |
'420': '420px', | |
'465': '465px', | |
}, | |
fontFamily: { | |
inter: ['Inter', 'sans-serif'], | |
}, | |
keyframes: { | |
'accordion-down': { | |
from: { height: 0 }, | |
to: { height: 'var(--radix-accordion-content-height)' }, | |
}, | |
'accordion-up': { | |
from: { height: 'var(--radix-accordion-content-height)' }, | |
to: { height: 0 }, | |
}, | |
}, | |
animation: { | |
'accordion-down': 'accordion-down 0.2s ease-out', | |
'accordion-up': 'accordion-up 0.2s ease-out', | |
}, | |
}, | |
}, | |
plugins: [require('tailwindcss-animate')], | |
}; |
export type INavLink = { | |
imgURL: string; | |
route: string; | |
label: string; | |
}; | |
export type IUpdateUser = { | |
userId: string; | |
name: string; | |
bio: string; | |
imageId: string; | |
imageUrl: URL | string; | |
file: File[]; | |
}; | |
export type INewPost = { | |
userId: string; | |
caption: string; | |
file: File[]; | |
location?: string; | |
tags?: string; | |
}; | |
export type IUpdatePost = { | |
postId: string; | |
caption: string; | |
imageId: string; | |
imageUrl: URL; | |
file: File[]; | |
location?: string; | |
tags?: string; | |
}; | |
export type IUser = { | |
id: string; | |
name: string; | |
username: string; | |
email: string; | |
imageUrl: string; | |
bio: string; | |
}; | |
export type INewUser = { | |
name: string; | |
email: string; | |
username: string; | |
password: string; | |
}; |
import { useEffect, useState } from "react"; | |
// https://codesandbox.io/s/react-query-debounce-ted8o?file=/src/useDebounce.js | |
export default function useDebounce<T>(value: T, delay: number): T { | |
// State and setters for debounced value | |
const [debouncedValue, setDebouncedValue] = useState<T>(value); | |
useEffect(() => { | |
// Update debounced value after delay | |
const handler = setTimeout(() => { | |
setDebouncedValue(value); | |
}, delay); | |
// Cancel the timeout if value changes (also on delay change or unmount) | |
// This is how we prevent debounced value from updating if value is changed ... | |
// .. within the delay period. Timeout gets cleared and restarted. | |
return () => { | |
clearTimeout(handler); | |
}; | |
}, [value, delay]); // Only re-call effect if value or delay changes | |
return debouncedValue; | |
} |
import { type ClassValue, clsx } from "clsx"; | |
import { twMerge } from "tailwind-merge"; | |
export function cn(...inputs: ClassValue[]) { | |
return twMerge(clsx(inputs)); | |
} | |
export const convertFileToUrl = (file: File) => URL.createObjectURL(file); | |
export function formatDateString(dateString: string) { | |
const options: Intl.DateTimeFormatOptions = { | |
year: "numeric", | |
month: "short", | |
day: "numeric", | |
}; | |
const date = new Date(dateString); | |
const formattedDate = date.toLocaleDateString("en-US", options); | |
const time = date.toLocaleTimeString([], { | |
hour: "numeric", | |
minute: "2-digit", | |
}); | |
return `${formattedDate} at ${time}`; | |
} | |
// | |
export const multiFormatDateString = (timestamp: string = ""): string => { | |
const timestampNum = Math.round(new Date(timestamp).getTime() / 1000); | |
const date: Date = new Date(timestampNum * 1000); | |
const now: Date = new Date(); | |
const diff: number = now.getTime() - date.getTime(); | |
const diffInSeconds: number = diff / 1000; | |
const diffInMinutes: number = diffInSeconds / 60; | |
const diffInHours: number = diffInMinutes / 60; | |
const diffInDays: number = diffInHours / 24; | |
switch (true) { | |
case Math.floor(diffInDays) >= 30: | |
return formatDateString(timestamp); | |
case Math.floor(diffInDays) === 1: | |
return `${Math.floor(diffInDays)} day ago`; | |
case Math.floor(diffInDays) > 1 && diffInDays < 30: | |
return `${Math.floor(diffInDays)} days ago`; | |
case Math.floor(diffInHours) >= 1: | |
return `${Math.floor(diffInHours)} hours ago`; | |
case Math.floor(diffInMinutes) >= 1: | |
return `${Math.floor(diffInMinutes)} minutes ago`; | |
default: | |
return "Just now"; | |
} | |
}; | |
export const checkIsLiked = (likeList: string[], userId: string) => { | |
return likeList.includes(userId); | |
}; |
3:39:16 timestamp
error in line 17 in word 'documents'
can anyone help me with that???
@adrianhajdin please
I have been having a problem with GET https://cloud.appwrite.io/v1/account 401 (Unauthorized). Immediately erroring out on page load. I have checked my env links and names that are all correct, database attributes on Appwrite as well as checking over pretty much all of the code at this point. The console has been pointing to the api ts file's getCurrentUser(). However, the code all seems to replicate what Adrian had written at the time.
When I sign up a user, the data is sent to the database, but I am not redirected, and I get a failed to sign up toast notification.
export async function getCurrentUser() { try { const currentAccount = await account.get();
if (!currentAccount) throw Error; const currentUser = await databases.listDocuments( appwriteConfig.databaseId, appwriteConfig.userCollectionId, [Query.equal("accountId", currentAccount.$id)] ); if (!currentUser) throw Error; return currentUser.documents[0];
} catch (error) { console.log(error); return null; } }
Hey, did you ever get this fixed ? I have the same problem. I have my permissions set to anyone for creating, reading, and updating on appwrite.
getCurrentUser() returns a signed in user I think session is not being created properly try using createEmailPasswordSession(...) in api.ts hopefully it works :)
I've tried to fix this but i c'ant seem to find the problem, when i try to display the profile picture or the name, nothing happens, it's just blank. If anyone can help i would really appreciate it.
Hello,
I was able to solve the problem if anyone had the same issue, the problem was with Appwrite, when i gave the all the permissions to all users it started working again, i think this is a temporary fix and i'll try to find something else.
how did you resolved the issue