From 3fcf23e24b54eab3678b4bfd8133a62209b387c7 Mon Sep 17 00:00:00 2001 From: Richard Yang Date: Sat, 6 Apr 2024 18:07:14 -0500 Subject: [PATCH 01/12] test commit for gitignore --- hono/.gitignore | 4 +++- hono/package-lock.json | 8 ++++---- hono/package.json | 2 +- hono/src/index.ts | 4 ++++ hono/values.env | 1 + 5 files changed, 13 insertions(+), 6 deletions(-) create mode 100644 hono/values.env diff --git a/hono/.gitignore b/hono/.gitignore index 025c07c..022295c 100644 --- a/hono/.gitignore +++ b/hono/.gitignore @@ -1,4 +1,6 @@ node_modules .wrangler .idea -.dev.vars \ No newline at end of file +.dev.vars + +.env \ No newline at end of file diff --git a/hono/package-lock.json b/hono/package-lock.json index 4136e10..b801f9a 100644 --- a/hono/package-lock.json +++ b/hono/package-lock.json @@ -26,7 +26,7 @@ "@typescript-eslint/eslint-plugin": "^6.21.0", "@typescript-eslint/parser": "^6.21.0", "babel-jest": "^29.7.0", - "dotenv": "^16.4.4", + "dotenv": "^16.4.5", "drizzle-kit": "^0.20.14", "eslint": "^8.56.0", "eslint-config-prettier": "^9.1.0", @@ -4039,9 +4039,9 @@ } }, "node_modules/dotenv": { - "version": "16.4.4", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.4.tgz", - "integrity": "sha512-XvPXc8XAQThSjAbY6cQ/9PcBXmFoWuw1sQ3b8HqUCR6ziGXjkTi//kB9SWa2UwqlgdAIuRqAa/9hVljzPehbYg==", + "version": "16.4.5", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz", + "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==", "dev": true, "engines": { "node": ">=12" diff --git a/hono/package.json b/hono/package.json index aa3f94f..4983a16 100644 --- a/hono/package.json +++ b/hono/package.json @@ -32,7 +32,7 @@ "@typescript-eslint/eslint-plugin": "^6.21.0", "@typescript-eslint/parser": "^6.21.0", "babel-jest": "^29.7.0", - "dotenv": "^16.4.4", + "dotenv": "^16.4.5", "drizzle-kit": "^0.20.14", "eslint": "^8.56.0", "eslint-config-prettier": "^9.1.0", diff --git a/hono/src/index.ts b/hono/src/index.ts index 65d3f05..771a2cf 100644 --- a/hono/src/index.ts +++ b/hono/src/index.ts @@ -5,7 +5,11 @@ import { version } from '../package.json' import groups from './services/groups' import users from './services/users' +require('dotenv').config(); + const app = new Hono() +const BASE_URL = `https://api.cloudflare.com/client/v4/accounts/${process.env.CLOUDFLARE_ACCOUNT_ID}/images/v1`; +const API_TOKEN = process.env.CLOUDFLARE_API_TOKEN; app.onError((err, c) => { console.error(`${err}`) diff --git a/hono/values.env b/hono/values.env new file mode 100644 index 0000000..6d282cd --- /dev/null +++ b/hono/values.env @@ -0,0 +1 @@ +CLOUDFLARE_ACCOUNT_ID=testttt From 135eeb2d8bf75a049807d3135cddb0b7db1db885 Mon Sep 17 00:00:00 2001 From: Richard Yang Date: Sat, 6 Apr 2024 18:10:58 -0500 Subject: [PATCH 02/12] test commit for gitignore --- hono/.gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/hono/.gitignore b/hono/.gitignore index 022295c..0407f64 100644 --- a/hono/.gitignore +++ b/hono/.gitignore @@ -2,5 +2,4 @@ node_modules .wrangler .idea .dev.vars - .env \ No newline at end of file From 1ba870f844b658d18b5eca874fa1e64c5659cf74 Mon Sep 17 00:00:00 2001 From: Richard Yang Date: Sat, 6 Apr 2024 18:14:01 -0500 Subject: [PATCH 03/12] test commit for gitignore --- hono/values.env | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hono/values.env b/hono/values.env index 6d282cd..1c7614a 100644 --- a/hono/values.env +++ b/hono/values.env @@ -1 +1 @@ -CLOUDFLARE_ACCOUNT_ID=testttt +CLOUDFLARE_ACCOUNT_ID=helloworld From 6b2dcc0a2238ea0cebe1d4d0960a624547a0c03d Mon Sep 17 00:00:00 2001 From: Richard Yang Date: Sat, 6 Apr 2024 18:15:27 -0500 Subject: [PATCH 04/12] test commit for gitignore --- hono/.gitignore | 2 +- hono/values.env | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/hono/.gitignore b/hono/.gitignore index 0407f64..8166428 100644 --- a/hono/.gitignore +++ b/hono/.gitignore @@ -2,4 +2,4 @@ node_modules .wrangler .idea .dev.vars -.env \ No newline at end of file +hono/.env \ No newline at end of file diff --git a/hono/values.env b/hono/values.env index 1c7614a..2036adc 100644 --- a/hono/values.env +++ b/hono/values.env @@ -1 +1 @@ -CLOUDFLARE_ACCOUNT_ID=helloworld +CLOUDFLARE_ACCOUNT_ID=lol From db88374cf9d66a61bb005b54fe39fe3963e01509 Mon Sep 17 00:00:00 2001 From: Richard Yang Date: Sat, 6 Apr 2024 18:18:30 -0500 Subject: [PATCH 05/12] Stop tracking .env file --- hono/.gitignore | 2 +- hono/values.env | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) delete mode 100644 hono/values.env diff --git a/hono/.gitignore b/hono/.gitignore index 8166428..0407f64 100644 --- a/hono/.gitignore +++ b/hono/.gitignore @@ -2,4 +2,4 @@ node_modules .wrangler .idea .dev.vars -hono/.env \ No newline at end of file +.env \ No newline at end of file diff --git a/hono/values.env b/hono/values.env deleted file mode 100644 index 2036adc..0000000 --- a/hono/values.env +++ /dev/null @@ -1 +0,0 @@ -CLOUDFLARE_ACCOUNT_ID=lol From 292317875b52a6e42dffb1ffd3558b63169e80a1 Mon Sep 17 00:00:00 2001 From: vincentdo1 Date: Sun, 7 Apr 2024 01:10:21 -0500 Subject: [PATCH 06/12] erm --- next/package.json | 1 + next/src/app/upload/imageUpload.tsx | 25 +++++++++++++++ next/src/app/upload/page.tsx | 50 +++++++++++++++++------------ 3 files changed, 55 insertions(+), 21 deletions(-) create mode 100644 next/src/app/upload/imageUpload.tsx diff --git a/next/package.json b/next/package.json index 45f14c7..3754888 100644 --- a/next/package.json +++ b/next/package.json @@ -21,6 +21,7 @@ "chart.js": "^4.4.2", "flowbite": "^2.3.0", "flowbite-react": "^0.8.0", + "form-data": "^4.0.0", "hono": "^4.2.0", "next": "14.1.0", "react": "^18", diff --git a/next/src/app/upload/imageUpload.tsx b/next/src/app/upload/imageUpload.tsx new file mode 100644 index 0000000..bb70d2d --- /dev/null +++ b/next/src/app/upload/imageUpload.tsx @@ -0,0 +1,25 @@ +import fs from 'fs'; +import FormData from 'form-data'; + +export default async function uploadImageToCloudflare(formData: FormData) { + try { + const image = fs.readFileSync('./image.jpg'); + const blobData = new Blob([image]); + formData.append("file", blobData, "filename_for_cloudflare"); + + const response = await fetch( + `https://api.cloudflare.com/client/v4/accounts/${process.env.CLOUDFLARE_ACCOUNT_ID}/images/v1`, { + method: "POST", + headers: { + "Authorization": `Bearer ${process.env.CLOUDFLARE_UPLOAD_TOKEN}`, + }, + body: formData, + }); + + // Your image has been uploaded + // Do something with the response, e.g. save image ID in a database + console.log(await response.json()); + } catch (error) { + console.log(error.toString()); + } +} \ No newline at end of file diff --git a/next/src/app/upload/page.tsx b/next/src/app/upload/page.tsx index 2a4852f..84e08df 100644 --- a/next/src/app/upload/page.tsx +++ b/next/src/app/upload/page.tsx @@ -1,36 +1,44 @@ "use client"; -import React, { Component } from 'react'; +import React, { Component, useState } from 'react'; import WeUpLogo from '../assets/weup.png'; import Image from 'next/image'; import HomeDropdown from '../components/HomeDropdown'; +import fs from 'fs'; +import uploadImageToCloudflare from './imageUpload'; + export default function Upload() { + const [selectedFile, setSelectedFile] = useState(null); + + const handleFileChange = (event) => { + setSelectedFile(event.target.files[0]); + }; + + const handleUpload = async () => { + if (selectedFile) { + try { + // Read the selected file and upload it + const fileBuffer = fs.readFileSync(selectedFile.path); + const filename = selectedFile.name; + const formData = new FormData(); + formData.append("file", fileBuffer, filename); + + // Call the upload function + await uploadImageToCloudflare(formData); + } catch (error) { + console.error('Error uploading image:', error); + } + } else { + console.error('No file selected'); + } + }; + return ( <> {/* Container for full screen */}
- - {/* User Post */} - {/*
-
-
- {''} -
-
-

- gocats -

-

- 07:05a -

-
-
- {''} -
*/} - - {/* Group Info */}

Group Info

From 734024ce8ebab95c8e0ba09308e7afff49365616 Mon Sep 17 00:00:00 2001 From: vincentdo1 Date: Sun, 7 Apr 2024 01:32:59 -0500 Subject: [PATCH 07/12] config --- next/next.config.mjs | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/next/next.config.mjs b/next/next.config.mjs index 3713aea..20320d3 100644 --- a/next/next.config.mjs +++ b/next/next.config.mjs @@ -8,6 +8,19 @@ if (process.env.NODE_ENV === 'development') { } /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + reactStrictMode: true, + swcMinify: true, + + webpack: (config, { isServer }) => { + if (!isServer) { + config.resolve.fallback = { + fs: false, + }; + } + + return config; + }, +}; export default nextConfig; From f058bfe72f961bcb0e15d7b631ca97bef6002583 Mon Sep 17 00:00:00 2001 From: vincentdo1 Date: Sun, 7 Apr 2024 08:33:55 -0500 Subject: [PATCH 08/12] images upload correctly --- hono/src/index.ts | 11 +++++--- hono/src/services/groups.ts | 35 +++++++++++++++++--------- next/package.json | 2 ++ next/src/app/upload/imageUpload.tsx | 39 ++++++++++++++--------------- next/src/app/upload/page.tsx | 30 ++++++++-------------- 5 files changed, 62 insertions(+), 55 deletions(-) diff --git a/hono/src/index.ts b/hono/src/index.ts index 771a2cf..f984696 100644 --- a/hono/src/index.ts +++ b/hono/src/index.ts @@ -5,11 +5,7 @@ import { version } from '../package.json' import groups from './services/groups' import users from './services/users' -require('dotenv').config(); - const app = new Hono() -const BASE_URL = `https://api.cloudflare.com/client/v4/accounts/${process.env.CLOUDFLARE_ACCOUNT_ID}/images/v1`; -const API_TOKEN = process.env.CLOUDFLARE_API_TOKEN; app.onError((err, c) => { console.error(`${err}`) @@ -26,6 +22,13 @@ app.use('*', prettyJSON(), async (c, next) => { await next() }) +app.use('*', async (c, next) => { + c.header('Access-Control-Allow-Origin', '*') + c.header('Access-Control-Allow-Methods', 'GET, PUT, POST') + c.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept') + await next() +}) + app.get('/', async (c) => { return c.text(`We Up API v${version}`) }) diff --git a/hono/src/services/groups.ts b/hono/src/services/groups.ts index 72b5f6e..495f906 100644 --- a/hono/src/services/groups.ts +++ b/hono/src/services/groups.ts @@ -1,6 +1,7 @@ import { eq } from 'drizzle-orm' import { inArray } from 'drizzle-orm' import { Hono } from 'hono' +import { env } from 'hono/adapter' import { groups, posts, prompts, usersToGroups } from '../schema' import type { Variables } from '../utils/inject-db' import injectDB from '../utils/inject-db' @@ -107,19 +108,29 @@ app.post('/prompt', injectDB, async (c) => { }) app.post('/post', injectDB, async (c) => { - const body = await c.req.json() - if (body.timestamp && typeof body.timestamp === 'string') { - body.timestamp = new Date(body.timestamp) - } - return c.json( - ( - await c - .get('db') - .insert(posts) - .values({ ...body }) - .returning() - )[0] + const body = (await c.req.formData()) as FormData + const file = body.get('file') + console.log(file) + const send = new FormData() + send.append('file', file, file.name) + const { CLOUDFLARE_ACCOUNT_ID } = env<{ CLOUDFLARE_ACCOUNT_ID: string }>(c) + const { CLOUDFLARE_API_TOKEN } = env<{ CLOUDFLARE_API_TOKEN: string }>(c) + const response = await fetch( + `https://api.cloudflare.com/client/v4/accounts/${CLOUDFLARE_ACCOUNT_ID}/images/v1`, + { + method: 'POST', + headers: { + Authorization: `Bearer ${CLOUDFLARE_API_TOKEN}`, + }, + body: send, + } ) + const resJson = await response.json() + console.log(resJson) + const photo_url = resJson.result.variants[4] + + const postBody = { userId: body.get('userId'), photoUrl: photo_url, timestamp: new Date() } + return c.json((await c.get('db').insert(posts).values(postBody).returning())[0]) }) export default app diff --git a/next/package.json b/next/package.json index 3754888..1f0cb0c 100644 --- a/next/package.json +++ b/next/package.json @@ -19,9 +19,11 @@ "@tailwindcss/forms": "^0.5.7", "apexcharts": "^3.48.0", "chart.js": "^4.4.2", + "cors": "^2.8.5", "flowbite": "^2.3.0", "flowbite-react": "^0.8.0", "form-data": "^4.0.0", + "headers": "^0.9.6", "hono": "^4.2.0", "next": "14.1.0", "react": "^18", diff --git a/next/src/app/upload/imageUpload.tsx b/next/src/app/upload/imageUpload.tsx index bb70d2d..d7d8bfa 100644 --- a/next/src/app/upload/imageUpload.tsx +++ b/next/src/app/upload/imageUpload.tsx @@ -1,25 +1,24 @@ -import fs from 'fs'; import FormData from 'form-data'; -export default async function uploadImageToCloudflare(formData: FormData) { +export async function uploadImageToCloudflare(file, userId) { + const formData = new FormData(); + formData.append("file", file); + formData.append("userId", userId) try { - const image = fs.readFileSync('./image.jpg'); - const blobData = new Blob([image]); - formData.append("file", blobData, "filename_for_cloudflare"); - - const response = await fetch( - `https://api.cloudflare.com/client/v4/accounts/${process.env.CLOUDFLARE_ACCOUNT_ID}/images/v1`, { - method: "POST", - headers: { - "Authorization": `Bearer ${process.env.CLOUDFLARE_UPLOAD_TOKEN}`, - }, - body: formData, - }); - - // Your image has been uploaded - // Do something with the response, e.g. save image ID in a database - console.log(await response.json()); + const response = await fetch('http://127.0.0.1:8787/api/group/post', { + method: 'POST', + body: formData, + }); + + if (!response.ok) { + throw new Error('Network response was not ok'); + } + + const jsonResponse = await response.json(); + console.log(jsonResponse); + alert('Upload successful'); } catch (error) { - console.log(error.toString()); + console.error('Error uploading image:', error); + alert('Error uploading image'); } -} \ No newline at end of file + } \ No newline at end of file diff --git a/next/src/app/upload/page.tsx b/next/src/app/upload/page.tsx index 84e08df..304b2f5 100644 --- a/next/src/app/upload/page.tsx +++ b/next/src/app/upload/page.tsx @@ -3,34 +3,26 @@ import React, { Component, useState } from 'react'; import WeUpLogo from '../assets/weup.png'; import Image from 'next/image'; import HomeDropdown from '../components/HomeDropdown'; -import fs from 'fs'; -import uploadImageToCloudflare from './imageUpload'; - +import {uploadImageToCloudflare} from './imageUpload'; export default function Upload() { - const [selectedFile, setSelectedFile] = useState(null); - const handleFileChange = (event) => { - setSelectedFile(event.target.files[0]); - }; - - const handleUpload = async () => { - if (selectedFile) { + const handleFileChange = async (event) => { + const file = event.target.files[0]; + if (file) { + setSelectedFile(file); try { - // Read the selected file and upload it - const fileBuffer = fs.readFileSync(selectedFile.path); - const filename = selectedFile.name; - const formData = new FormData(); - formData.append("file", fileBuffer, filename); - - // Call the upload function - await uploadImageToCloudflare(formData); + await uploadImageToCloudflare(file, 'ldfm1lck9gcytdfju6b8dgjd') + console.log('Upload successful'); + alert('Upload successful'); } catch (error) { console.error('Error uploading image:', error); + alert('Error uploading image'); } } else { console.error('No file selected'); + alert('No file selected'); } }; @@ -62,7 +54,7 @@ export default function Upload() {

Click to upload or drag and drop

SVG, PNG, JPG or GIF (MAX. 800x400px)

- +
From bbd61118cb30b63191b853f7557cefcbaba37eeb Mon Sep 17 00:00:00 2001 From: vincentdo1 Date: Sun, 7 Apr 2024 10:35:19 -0500 Subject: [PATCH 09/12] push --- hono/src/services/groups.ts | 3 +- hono/test/smoke/user.smoke.test.ts | 92 ------------------------------ 2 files changed, 1 insertion(+), 94 deletions(-) delete mode 100644 hono/test/smoke/user.smoke.test.ts diff --git a/hono/src/services/groups.ts b/hono/src/services/groups.ts index 14574c2..76837f6 100644 --- a/hono/src/services/groups.ts +++ b/hono/src/services/groups.ts @@ -1,12 +1,11 @@ import { eq } from 'drizzle-orm' import { inArray } from 'drizzle-orm' -import type { Context } from 'hono' import { Hono } from 'hono' import { env } from 'hono/adapter' import { groups, posts, prompts, usersToGroups } from '../schema' import type { Variables } from '../utils/inject-db' import injectDB from '../utils/inject-db' -import type { GroupType, CloudflareResponse, Post } from '../utils/type-definitions' +import type { GroupType } from '../utils/type-definitions' const app = new Hono<{ Variables: Variables }>() diff --git a/hono/test/smoke/user.smoke.test.ts b/hono/test/smoke/user.smoke.test.ts deleted file mode 100644 index 8a1a20c..0000000 --- a/hono/test/smoke/user.smoke.test.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { drizzle } from 'drizzle-orm/postgres-js' -import type { Context } from 'hono' -import postgres from 'postgres' -// import app from '../../src/index' -import * as schema from '../../src/schema' -import { clean, provision } from '../utils/db' - -/** - * Users Smoke Tests - * - * Smoke testing, also known as 'build verification testing', is a type of - * software testing that comprises a non-exhaustive set of tests that aim at - * ensuring that the most critical functions work. The result of this testing is - * used to decide if a build is stable enough to proceed with further testing. - * - * Here we are testing the set of "users" APIs in a non-exhaustive way. A good - * guideline is to hit every endpoint and not dig deep into edge cases. - */ - -const DB_NAME = 'users_smoke_test' -const DB_PORT = 5555 -const DB_URL = `postgres://localhost:${DB_PORT}/${DB_NAME}` - -// NOTE: Beware of jest hoisting! -// .mock() will be automatically hoisted to the top of the code block, -// because of this function decomposition is not possible without overhead -jest.mock('../../src/utils/inject-db', () => { - const originalModule = jest.requireActual('../../src/utils/inject-db') - return { - __esModule: true, - ...originalModule, - default: async (c: Context, next: Function) => { - c.set('db', drizzle(postgres(DB_URL), { schema })) - await next() - }, - } -}) - -// const encodedString = encodeURIComponent('john@example.com') - -// const encodedUser = { -// name: 'John Doe', -// email: 'john@example.com', -// photoUrl: 'https://example.com/john.jpg', -// wakeTime: '2024-04-06T08:00:00+00:00', -// } - -// const decodedUser = { -// name: 'John Doe', -// email: 'john@example.com', -// photoUrl: 'https://example.com/john.jpg', -// } - -// type UserType = { -// name: string -// email: string -// photoUrl: string -// } - -beforeAll(async () => { - await provision(DB_NAME) -}) - -describe('[Smoke] Items: simple test on each endpoint, no seeding', () => { - afterAll(async () => { - await clean(DB_NAME) - }) - - // test('POST /items: should create and return one item', async () => { - // const res = await app.request('/api/user', { - // method: 'POST', - // body: JSON.stringify(encodedUser), - // headers: { 'Content-Type': 'application/json' }, - // }) - // expect(res.status).toBe(200) - // const resJSON = await res.json() - - // expect(resJSON as UserType).toMatchObject(decodedUser) - // }) - - // test('GET /items: should return no items', async () => { - // const res = await app.request(`/api/user/${encodedString}`) - // expect(res.status).toBe(200) - // const { email, name, photoUrl } = (await res.json()) as UserType - - // expect({ email, name, photoUrl }).toEqual(decodedUser) - // }) - - test('GET /items: should return no items', async () => { - expect(0).toEqual(0) - }) -}) From 95e3536f041ef0b189afc246c66716a04b7f853f Mon Sep 17 00:00:00 2001 From: vincentdo1 Date: Sun, 7 Apr 2024 12:54:21 -0500 Subject: [PATCH 10/12] update --- hono/src/services/groups.ts | 2 - next/next.config.mjs | 3 + next/src/app/components/FeedInfo.tsx | 76 ++++++++++++++------- next/src/app/home2/page.tsx | 2 +- next/src/app/upload/FileUploadComponent.tsx | 42 ++++++++++++ next/src/app/upload/page.tsx | 43 ++---------- next/tsconfig.json | 2 +- 7 files changed, 106 insertions(+), 64 deletions(-) create mode 100644 next/src/app/upload/FileUploadComponent.tsx diff --git a/hono/src/services/groups.ts b/hono/src/services/groups.ts index 76837f6..2abc0b7 100644 --- a/hono/src/services/groups.ts +++ b/hono/src/services/groups.ts @@ -104,7 +104,6 @@ app.post('/prompt', injectDB, async (c) => { app.post('/post', injectDB, async (c) => { const body = (await c.req.formData()) as FormData const file = body.get('file') - console.log(file) const send = new FormData() send.append('file', file, file.name) const { CLOUDFLARE_ACCOUNT_ID } = env<{ CLOUDFLARE_ACCOUNT_ID: string }>(c) @@ -120,7 +119,6 @@ app.post('/post', injectDB, async (c) => { } ) const resJson = await response.json() - console.log(resJson) const photo_url = resJson.result.variants[4] const postBody = { userId: body.get('userId'), photoUrl: photo_url, timestamp: new Date() } diff --git a/next/next.config.mjs b/next/next.config.mjs index 20320d3..973f0ca 100644 --- a/next/next.config.mjs +++ b/next/next.config.mjs @@ -11,6 +11,9 @@ if (process.env.NODE_ENV === 'development') { const nextConfig = { reactStrictMode: true, swcMinify: true, + images: { + domains: ['imagedelivery.net'], + }, webpack: (config, { isServer }) => { if (!isServer) { diff --git a/next/src/app/components/FeedInfo.tsx b/next/src/app/components/FeedInfo.tsx index ec1ab22..8fa0221 100644 --- a/next/src/app/components/FeedInfo.tsx +++ b/next/src/app/components/FeedInfo.tsx @@ -1,5 +1,5 @@ "use client"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import LineChart from "../charts/LineChart"; import HomeDropdown from "./HomeDropdown"; import Image from 'next/image'; @@ -7,13 +7,31 @@ import WeUpLogo from '../assets/weup.png'; export default function FeedInfo({ isUp, handleClick }: { isUp: any, handleClick: any }) { - const handleImageUpload = (event: { target: { files: any[]; }; }) => { - const file = event.target.files[0]; - if (file) { - handleClick(); - } - }; + const [imageSrcs, setImageSrcs] = useState([]); + + useEffect(() => { + const fetchImage = async () => { + try { + const response = await fetch("http://127.0.0.1:8787/api/group/rsf9kxfvz4dauvggv47wbf0c"); + const data = await response.json(); + const posts = data.post; + + const photoUrls = posts.map(post => post.photoUrl).filter(url => url !== undefined); + if (photoUrls.length > 0) { + setImageSrcs(photoUrls); // Set the found photoUrls array + } else { + console.error("No posts found or posts have no photoUrl"); + } + } catch (error) { + console.error("Failed to fetch image:", error); + } + }; + + if (isUp) { + fetchImage(); + } + }, [isUp]); return ( <> {/* Fixed upload button */} @@ -23,22 +41,34 @@ export default function FeedInfo({ isUp, handleClick }: { isUp: any, handleClick
-
- -
+
+ {isUp ? ( +
+ {imageSrcs.map((src, index) => ( +
+ {`Image +
+ ))} +
+ ) : ( + // Fallback or placeholder content +
+ +

Click to upload or drag and drop

+

SVG, PNG, JPG or GIF (MAX. 800x400px)

+
+ )} +
+ {/* */}

Today's Feed

diff --git a/next/src/app/home2/page.tsx b/next/src/app/home2/page.tsx index c0785d0..6d22654 100644 --- a/next/src/app/home2/page.tsx +++ b/next/src/app/home2/page.tsx @@ -39,7 +39,7 @@ export default function Home2() { {/* Group Info */} {/* Feed */} - +
diff --git a/next/src/app/upload/FileUploadComponent.tsx b/next/src/app/upload/FileUploadComponent.tsx new file mode 100644 index 0000000..573015e --- /dev/null +++ b/next/src/app/upload/FileUploadComponent.tsx @@ -0,0 +1,42 @@ +'use client'; +import React from 'react'; +import Image from 'next/image'; +import WeUpLogo from '../assets/weup.png'; +import { uploadImageToCloudflare } from './imageUpload'; + +const FileUploadComponent = ({ userId }) => { + + const handleFileChange = async (event) => { + const file = event.target.files[0]; + if (file) { + try { + await uploadImageToCloudflare(file, userId); // Use 'ldfm1lck9gcytdfju6b8dgjd' if needed + console.log('Upload successful'); + alert('Upload successful'); + } catch (error) { + console.error('Error uploading image:', error); + alert('Error uploading image'); + } + } else { + console.error('No file selected'); + alert('No file selected'); + } + }; + + return ( +
+ +
+ ); +}; + +export default FileUploadComponent; \ No newline at end of file diff --git a/next/src/app/upload/page.tsx b/next/src/app/upload/page.tsx index 047dbaa..050c400 100644 --- a/next/src/app/upload/page.tsx +++ b/next/src/app/upload/page.tsx @@ -1,4 +1,3 @@ -"use client"; import React, { Component, useState } from 'react'; import WeUpLogo from '../assets/weup.png'; import Image from 'next/image'; @@ -6,29 +5,12 @@ import HomeDropdown from '../components/HomeDropdown'; import {uploadImageToCloudflare} from './imageUpload'; import {withPageAuthRequired, getSession} from '@auth0/nextjs-auth0/edge'; import {getUserAPI} from '../../util/api-helpers' +import FileUploadComponent from './FileUploadComponent'; -export default withPageAuthRequired(async function Upload() { - const session = await getSession() - const user = await getUserAPI(session?.user.email) - const [selectedFile, setSelectedFile] = useState(null); - const handleFileChange = async (event) => { - const file = event.target.files[0]; - if (file) { - setSelectedFile(file); - try { - await uploadImageToCloudflare(file, user.id) // replace with 'ldfm1lck9gcytdfju6b8dgjd' if needed - console.log('Upload successful'); - alert('Upload successful'); - } catch (error) { - console.error('Error uploading image:', error); - alert('Error uploading image'); - } - } else { - console.error('No file selected'); - alert('No file selected'); - } - }; +export default async function Upload() { + // const session = await getSession(); + // const user = await getUserAPI(session?.user.email); return ( <> @@ -49,18 +31,7 @@ export default withPageAuthRequired(async function Upload() { {/* Upload function */} -
- -
+

Take a picture with your breakfast!

@@ -104,6 +75,4 @@ export default withPageAuthRequired(async function Upload() { ); -}, {returnTo: '/profile'}) - -export const runtime = 'edge'; \ No newline at end of file +} \ No newline at end of file diff --git a/next/tsconfig.json b/next/tsconfig.json index 2158df2..97a7876 100644 --- a/next/tsconfig.json +++ b/next/tsconfig.json @@ -35,7 +35,7 @@ "**/*.ts", "**/*.tsx", ".next/types/**/*.ts" - ], +, "src/app/upload/FileUploadComponent.jsx" ], "exclude": [ "node_modules" ] From 55ebd4a451ee681aa25598f1a5f12383a860b9bd Mon Sep 17 00:00:00 2001 From: vincentdo1 Date: Sun, 7 Apr 2024 12:59:10 -0500 Subject: [PATCH 11/12] lint --- hono/src/services/groups.ts | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/hono/src/services/groups.ts b/hono/src/services/groups.ts index 2abc0b7..aab95c0 100644 --- a/hono/src/services/groups.ts +++ b/hono/src/services/groups.ts @@ -1,11 +1,12 @@ import { eq } from 'drizzle-orm' import { inArray } from 'drizzle-orm' +import type { Context} from 'hono'; import { Hono } from 'hono' import { env } from 'hono/adapter' import { groups, posts, prompts, usersToGroups } from '../schema' import type { Variables } from '../utils/inject-db' import injectDB from '../utils/inject-db' -import type { GroupType } from '../utils/type-definitions' +import type { CloudflareResponse, GroupType, Post } from '../utils/type-definitions' const app = new Hono<{ Variables: Variables }>() @@ -103,11 +104,11 @@ app.post('/prompt', injectDB, async (c) => { app.post('/post', injectDB, async (c) => { const body = (await c.req.formData()) as FormData - const file = body.get('file') + const file = body.get('file') as unknown as File const send = new FormData() send.append('file', file, file.name) - const { CLOUDFLARE_ACCOUNT_ID } = env<{ CLOUDFLARE_ACCOUNT_ID: string }>(c) - const { CLOUDFLARE_API_TOKEN } = env<{ CLOUDFLARE_API_TOKEN: string }>(c) + const { CLOUDFLARE_ACCOUNT_ID } = env<{ CLOUDFLARE_ACCOUNT_ID: string }>(c as Context) + const { CLOUDFLARE_API_TOKEN } = env<{ CLOUDFLARE_API_TOKEN: string }>(c as Context) const response = await fetch( `https://api.cloudflare.com/client/v4/accounts/${CLOUDFLARE_ACCOUNT_ID}/images/v1`, { @@ -118,10 +119,14 @@ app.post('/post', injectDB, async (c) => { body: send, } ) - const resJson = await response.json() + const resJson = (await response.json()) as CloudflareResponse const photo_url = resJson.result.variants[4] - const postBody = { userId: body.get('userId'), photoUrl: photo_url, timestamp: new Date() } + const postBody = { + userId: body.get('userId'), + photoUrl: photo_url, + timestamp: new Date(), + } as Post return c.json((await c.get('db').insert(posts).values(postBody).returning())[0]) }) From 0483fce90d3b650d9e23faf16ace589297fa79a0 Mon Sep 17 00:00:00 2001 From: vincentdo1 Date: Sun, 7 Apr 2024 13:01:38 -0500 Subject: [PATCH 12/12] lint --- hono/src/services/groups.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hono/src/services/groups.ts b/hono/src/services/groups.ts index aab95c0..abe7fa7 100644 --- a/hono/src/services/groups.ts +++ b/hono/src/services/groups.ts @@ -1,6 +1,6 @@ import { eq } from 'drizzle-orm' import { inArray } from 'drizzle-orm' -import type { Context} from 'hono'; +import type { Context } from 'hono' import { Hono } from 'hono' import { env } from 'hono/adapter' import { groups, posts, prompts, usersToGroups } from '../schema'