diff --git a/components/Footer.tsx b/components/Footer.tsx index 4cad44b..54ec185 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,14 +1,19 @@ import React from "react"; const Footer = () => { - return ( - - ); + return ( + + ); }; export default Footer; diff --git a/components/Modal.tsx b/components/Modal.tsx index e48aa9b..7cc62a0 100644 --- a/components/Modal.tsx +++ b/components/Modal.tsx @@ -1,6 +1,12 @@ import React from "react"; -const Modal = ({ title, hide, confirmDelete }: any) => { +type Props = { + title: string; + hide: () => void; + confirmDelete: () => void; +}; + +const Modal = ({ title, hide, confirmDelete }: Props) => { return (
diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 4731bab..ad98cc4 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -8,10 +8,6 @@ import { useUserContext } from "../context/user"; const Navbar = () => { const { data: session, status } = useSession(); - let user = useUserContext(); - - console.log(user); - return (
{session && ( @@ -46,7 +47,7 @@ const Navbar = () => { // @ts-ignore src={session.user.image} // @ts-ignore - alt={'image'} + alt={"image"} className="rounded-full w-12 h-12 ml-4 shadow-2xl" /> diff --git a/components/Post.tsx b/components/Post.tsx index 71cf4fc..cc62bf0 100644 --- a/components/Post.tsx +++ b/components/Post.tsx @@ -1,6 +1,7 @@ import React, { useState } from "react"; import Link from "next/link"; import { motion } from "framer-motion"; +import Image from "next/image"; type viewMode = "feed" | "dashboard"; @@ -26,10 +27,14 @@ const Post = ({ src, title, layout, content, id, mode }: Props) => { }; return ( -
+
{isHovered && dashboard == "dashboard" ? ( - + { ) : null} - + { : null }`} > -
+
{src ? ( - +
+ +
) : null}

{title} diff --git a/components/Users.tsx b/components/Users.tsx index 133ef86..b206e16 100644 --- a/components/Users.tsx +++ b/components/Users.tsx @@ -1,66 +1,73 @@ import React, { useEffect, useState } from "react"; import Link from "next/link"; -import TimeAgo from 'react-timeago' -import ReactTooltip from 'react-tooltip' +import TimeAgo from "react-timeago"; +import ReactTooltip from "react-tooltip"; const Users = () => { - const [users, setUsers] = useState>([]); + const [users, setUsers] = useState>([]); - useEffect(() => { - const get = async () => { - const response = await fetch("/api/users"); - const users = await response.json(); - setUsers(users); - }; - get(); - }, []); + useEffect(() => { + const get = async () => { + const response = await fetch("/api/users"); + const users = await response.json(); + setUsers(users); + }; + get(); + }, []); - return ( - - ); + return ( + + ); }; export default Users; diff --git a/context/posts.tsx b/context/posts.tsx index 397df8d..2afa4a7 100644 --- a/context/posts.tsx +++ b/context/posts.tsx @@ -1,7 +1,12 @@ -import { createContext, useContext } from "react"; import useSwr from "swr"; +import { PostType } from "../types/Post"; +import { createContext, useContext } from "react"; + +interface PostsContextType { + data: PostType[]; +} -const PostsContext = createContext({}); +const PostsContext = createContext | null>(null); const fetcher = (...args: [any]) => fetch(...args).then((res) => res.json()); diff --git a/lib/mongodb-old.js b/lib/mongodb-old.js index 7843d41..7d7e239 100644 --- a/lib/mongodb-old.js +++ b/lib/mongodb-old.js @@ -24,7 +24,7 @@ export async function connectToDatabase(database) { let client = new MongoClient(MONGODB_URI, opts); await client.connect(); - let db = client.db('crystal'); + let db = client.db("crystal"); cachedClient = client; cachedDb = db; @@ -33,4 +33,4 @@ export async function connectToDatabase(database) { client: cachedClient, db: cachedDb, }; -} \ No newline at end of file +} diff --git a/lib/mongodb.js b/lib/mongodb.js index e1ffe7a..5d55d5a 100644 --- a/lib/mongodb.js +++ b/lib/mongodb.js @@ -1,33 +1,33 @@ // This approach is taken from https://github.com/vercel/next.js/tree/canary/examples/with-mongodb -import { MongoClient } from "mongodb" +import { MongoClient } from "mongodb"; -const uri = process.env.MONGODB_URI +const uri = process.env.MONGODB_URI; const options = { useUnifiedTopology: true, useNewUrlParser: true, -} +}; -let client -let clientPromise +let client; +let clientPromise; if (!process.env.MONGODB_URI) { - throw new Error("Please add your Mongo URI to .env.local") + throw new Error("Please add your Mongo URI to .env.local"); } if (process.env.NODE_ENV === "development") { // In development mode, use a global variable so that the value // is preserved across module reloads caused by HMR (Hot Module Replacement). if (!global._mongoClientPromise) { - client = new MongoClient(uri, options) - global._mongoClientPromise = client.connect() + client = new MongoClient(uri, options); + global._mongoClientPromise = client.connect(); } - clientPromise = global._mongoClientPromise + clientPromise = global._mongoClientPromise; } else { // In production mode, it's best to not use a global variable. - client = new MongoClient(uri, options) - clientPromise = client.connect() + client = new MongoClient(uri, options); + clientPromise = client.connect(); } // Export a module-scoped MongoClient promise. By doing this in a // separate module, the client can be shared across functions. -export default clientPromise \ No newline at end of file +export default clientPromise; diff --git a/middleware/middleware.ts b/middleware/middleware.ts index da22e94..7dcd691 100644 --- a/middleware/middleware.ts +++ b/middleware/middleware.ts @@ -1,16 +1,16 @@ -import nextConnect from 'next-connect' -import multiparty from 'multiparty' +import nextConnect from "next-connect"; +import multiparty from "multiparty"; -const middleware = nextConnect() +const middleware = nextConnect(); -middleware.use(async (req: any, res:any, next: any) => { - const form = new multiparty.Form() +middleware.use(async (req: any, res: any, next: any) => { + const form = new multiparty.Form(); await form.parse(req, function (err: any, fields: any, files: any) { - req.body = fields - req.files = files - next() - }) -}) + req.body = fields; + req.files = files; + next(); + }); +}); -export default middleware \ No newline at end of file +export default middleware; diff --git a/next.config.js b/next.config.js index 467f67a..2fe3664 100644 --- a/next.config.js +++ b/next.config.js @@ -1,5 +1,10 @@ module.exports = { - images: { - domains: ['source.unsplash.com', 'images.unsplash.com'] - } -} \ No newline at end of file + images: { + domains: [ + "source.unsplash.com", + "images.unsplash.com", + "res.cloudinary.com", + "cdn.hashnode.com" + ], + }, +}; diff --git a/package.json b/package.json index fe43adb..259d445 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@next-auth/mongodb-adapter": "^1.0.1", - "@tailwindcss/typography": "^0.4.1", + "@tailwindcss/typography": "^0.5.7", "@types/formidable": "^1.2.3", "@types/react-timeago": "^4.1.3", "autoprefixer": "^10.2.6", @@ -37,7 +37,7 @@ "react-tooltip": "^4.2.21", "spinners-react": "^1.0.4", "swr": "^1.0.1", - "tailwindcss": "^2.1.4" + "tailwindcss": "^3.1.8" }, "devDependencies": { "@types/multiparty": "^0.0.33", diff --git a/pages/_app.tsx b/pages/_app.tsx index 090a384..8f613c2 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,20 +1,28 @@ import "../styles/globals.css"; +import { motion } from "framer-motion"; import type { AppProps } from "next/app"; -import { SessionProvider } from "next-auth/react"; import { Toaster } from "react-hot-toast"; -import { ToastProvider } from "react-toast-notifications"; import { PostsWrapper } from "../context/posts"; +import { SessionProvider } from "next-auth/react"; import { OwnPostsWrapper } from "../context/ownPosts"; -function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) { +function MyApp({ + Component, + pageProps: { session, ...pageProps }, + router, +}: AppProps) { return ( - + - - + + diff --git a/pages/account.tsx b/pages/account.tsx index 6826dd8..d940875 100644 --- a/pages/account.tsx +++ b/pages/account.tsx @@ -80,7 +80,7 @@ const Account = ({ session, user }: any) => { My Account | Crystal -
+

My Account @@ -93,7 +93,11 @@ const Account = ({ session, user }: any) => { style={{ backgroundImage: 'url("/trees-min.jpeg")' }} > @@ -103,9 +107,9 @@ const Account = ({ session, user }: any) => {

-
+
-
+

Username

@@ -125,7 +129,7 @@ const Account = ({ session, user }: any) => {
-
+

Name

{
-
+

Bio