From caa60cb35e0b3ccc24d9bc3523d7adb38d762793 Mon Sep 17 00:00:00 2001 From: Choco Ham <77619465+banma1234@users.noreply.github.com> Date: Tue, 5 Sep 2023 19:30:52 +0900 Subject: [PATCH] Add nextjs-scheduler example (#637) --- examples/nextjs-scheduler/.env | 2 + examples/nextjs-scheduler/.env.production | 2 + examples/nextjs-scheduler/.eslintrc.js | 10 + examples/nextjs-scheduler/.gitignore | 35 + examples/nextjs-scheduler/README.md | 29 + examples/nextjs-scheduler/app/Scheduler.tsx | 89 ++ examples/nextjs-scheduler/app/favicon.ico | Bin 0 -> 16958 bytes examples/nextjs-scheduler/app/layout.tsx | 25 + examples/nextjs-scheduler/app/not-found.tsx | 6 + examples/nextjs-scheduler/app/page.tsx | 150 +++ .../nextjs-scheduler/app/styles/calendar.css | 150 +++ .../nextjs-scheduler/app/styles/globals.css | 39 + .../app/styles/page.module.css | 20 + .../nextjs-scheduler/app/utils/handlePeers.ts | 42 + .../nextjs-scheduler/app/utils/parseDate.ts | 12 + examples/nextjs-scheduler/app/utils/types.ts | 22 + examples/nextjs-scheduler/next.config.js | 4 + examples/nextjs-scheduler/package-lock.json | 977 ++++++++++++++++++ examples/nextjs-scheduler/package.json | 24 + examples/nextjs-scheduler/thumbnail.jpg | Bin 0 -> 50918 bytes examples/nextjs-scheduler/tsconfig.json | 41 + package-lock.json | 718 ++++++++++++- 22 files changed, 2379 insertions(+), 18 deletions(-) create mode 100644 examples/nextjs-scheduler/.env create mode 100644 examples/nextjs-scheduler/.env.production create mode 100644 examples/nextjs-scheduler/.eslintrc.js create mode 100644 examples/nextjs-scheduler/.gitignore create mode 100644 examples/nextjs-scheduler/README.md create mode 100644 examples/nextjs-scheduler/app/Scheduler.tsx create mode 100644 examples/nextjs-scheduler/app/favicon.ico create mode 100644 examples/nextjs-scheduler/app/layout.tsx create mode 100644 examples/nextjs-scheduler/app/not-found.tsx create mode 100644 examples/nextjs-scheduler/app/page.tsx create mode 100644 examples/nextjs-scheduler/app/styles/calendar.css create mode 100644 examples/nextjs-scheduler/app/styles/globals.css create mode 100644 examples/nextjs-scheduler/app/styles/page.module.css create mode 100644 examples/nextjs-scheduler/app/utils/handlePeers.ts create mode 100644 examples/nextjs-scheduler/app/utils/parseDate.ts create mode 100644 examples/nextjs-scheduler/app/utils/types.ts create mode 100644 examples/nextjs-scheduler/next.config.js create mode 100644 examples/nextjs-scheduler/package-lock.json create mode 100644 examples/nextjs-scheduler/package.json create mode 100644 examples/nextjs-scheduler/thumbnail.jpg create mode 100644 examples/nextjs-scheduler/tsconfig.json diff --git a/examples/nextjs-scheduler/.env b/examples/nextjs-scheduler/.env new file mode 100644 index 000000000..7a8fa0d88 --- /dev/null +++ b/examples/nextjs-scheduler/.env @@ -0,0 +1,2 @@ +NEXT_PUBLIC_YORKIE_API_ADDR='http://localhost:8080' +NEXT_PUBLIC_YORKIE_API_KEY='' diff --git a/examples/nextjs-scheduler/.env.production b/examples/nextjs-scheduler/.env.production new file mode 100644 index 000000000..c4937952c --- /dev/null +++ b/examples/nextjs-scheduler/.env.production @@ -0,0 +1,2 @@ +NEXT_PUBLIC_YORKIE_API_ADDR='https://api.yorkie.dev' +NEXT_PUBLIC_YORKIE_API_KEY='cedaovjuioqlk4pjqn6g' diff --git a/examples/nextjs-scheduler/.eslintrc.js b/examples/nextjs-scheduler/.eslintrc.js new file mode 100644 index 000000000..6b8ce4129 --- /dev/null +++ b/examples/nextjs-scheduler/.eslintrc.js @@ -0,0 +1,10 @@ +module.exports = { + rules: { + 'prettier/prettier': [ + 'error', + { + endOfLine: 'auto', + }, + ], + }, +}; diff --git a/examples/nextjs-scheduler/.gitignore b/examples/nextjs-scheduler/.gitignore new file mode 100644 index 000000000..8f322f0d8 --- /dev/null +++ b/examples/nextjs-scheduler/.gitignore @@ -0,0 +1,35 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/nextjs-scheduler/README.md b/examples/nextjs-scheduler/README.md new file mode 100644 index 000000000..93a7354f6 --- /dev/null +++ b/examples/nextjs-scheduler/README.md @@ -0,0 +1,29 @@ +# Yorkie Next.js react-calendar Example + +

+ + Live Preview + +

+ +Next.js react-calendar + +## How to run demo + +At project root, run below command to start Yorkie server and Envoy proxy. + +```bash +$ docker-compose up -f docker/docker-compose.yml up --build -d +``` + +Then install dependencies and run the demo. + +```bash +$ npm install +``` + +Now you can run the demo. + +```bash +$ npm run dev +``` diff --git a/examples/nextjs-scheduler/app/Scheduler.tsx b/examples/nextjs-scheduler/app/Scheduler.tsx new file mode 100644 index 000000000..74a16054c --- /dev/null +++ b/examples/nextjs-scheduler/app/Scheduler.tsx @@ -0,0 +1,89 @@ +'use client'; + +import React, { useState } from 'react'; +import './styles/calendar.css'; +import styles from './styles/page.module.css'; + +import { EditorPropsTypes, CalendarValue } from './utils/types'; +import { parseDate } from './utils/parseDate'; +import Calendar from 'react-calendar'; + +/** + * handle calendar component + */ +export default function Scheduler(props: EditorPropsTypes) { + const { content, actions } = props; + const [date, onChange] = useState(new Date()); + const [text, setText] = useState('Enter text here!'); + + const currentDate = date ? parseDate(new Date(date.toString())) : ''; + + const eventHandler = (event: string) => { + let flag = false; + switch (event) { + case 'PUSH': + flag = false; + content.forEach((item) => { + if (item.date === currentDate) { + flag = !flag; + return 0; + } + }); + + flag + ? actions.updateContent(currentDate, text) + : actions.addContent(currentDate, text); + + setText('Enter text here!'); + break; + case 'DELETE': + actions.deleteContent(currentDate); + break; + } + }; + + return ( +
+
+ + date.toLocaleString('en', { day: 'numeric' }) + } + tileClassName={({ date }) => + content.find((item) => item.date === parseDate(date)) + ? 'highlight' + : '' + } + /> +

selected day : {currentDate}

+
+ {content.map((item, i: number) => { + if (item.date === currentDate) { + return

{item.text}

; + } + })} +
+
+

input form

+