feat: design applications and first api calls
Co-authored-by: Walid <87608619+WalidKorchi@users.noreply.github.com>
This commit is contained in:
Divlo
53
pages/application/[guildId]/[channelId].tsx
Normal file
53
pages/application/[guildId]/[channelId].tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import { Head } from 'components/Head'
|
||||
import { Application } from 'components/Application'
|
||||
import { Messages } from 'components/Application/Messages'
|
||||
import {
|
||||
authenticationFromServerSide,
|
||||
AuthenticationProvider,
|
||||
PagePropsWithAuthentication
|
||||
} from 'utils/authentication'
|
||||
|
||||
export interface ChannelPageProps extends PagePropsWithAuthentication {
|
||||
channelId: number
|
||||
guildId: number
|
||||
}
|
||||
|
||||
const ChannelPage: React.FC<ChannelPageProps> = (props) => {
|
||||
const { channelId, guildId, authentication } = props
|
||||
|
||||
return (
|
||||
<AuthenticationProvider authentication={authentication}>
|
||||
<Head title='Thream | Application' />
|
||||
<Application
|
||||
path={{
|
||||
channelId,
|
||||
guildId
|
||||
}}
|
||||
>
|
||||
<Messages />
|
||||
</Application>
|
||||
</AuthenticationProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export const getServerSideProps = authenticationFromServerSide({
|
||||
shouldBeAuthenticated: true,
|
||||
fetchData: async (context) => {
|
||||
const channelId = Number(context?.params?.channelId)
|
||||
const guildId = Number(context?.params?.guildId)
|
||||
if (isNaN(channelId) || isNaN(guildId)) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/application',
|
||||
permanent: false
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
channelId,
|
||||
guildId
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default ChannelPage
|
||||
84
pages/application/guilds/create.tsx
Normal file
84
pages/application/guilds/create.tsx
Normal file
@ -0,0 +1,84 @@
|
||||
import Image from 'next/image'
|
||||
import { Form } from 'react-component-form'
|
||||
import TextareaAutosize from 'react-textarea-autosize'
|
||||
|
||||
import { Head } from 'components/Head'
|
||||
import { Application } from 'components/Application'
|
||||
import { Input } from 'components/design/Input'
|
||||
import { Main } from 'components/design/Main'
|
||||
import { Button } from 'components/design/Button'
|
||||
import { FormState } from 'components/design/FormState'
|
||||
import {
|
||||
authenticationFromServerSide,
|
||||
AuthenticationProvider,
|
||||
PagePropsWithAuthentication
|
||||
} from 'utils/authentication'
|
||||
|
||||
const CreateGuild: React.FC<PagePropsWithAuthentication> = (props) => {
|
||||
return (
|
||||
<AuthenticationProvider authentication={props.authentication}>
|
||||
<Head title='Thream | Create a Guild' />
|
||||
<Application path='/application/guilds/create'>
|
||||
<Main>
|
||||
<Form className='w-4/6 max-w-xs'>
|
||||
<div className='flex flex-col'>
|
||||
<div className='flex justify-between mt-6 mb-2'>
|
||||
<label className='pl-1' htmlFor='icon'>
|
||||
Icon
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className='mt-2 relative flex flex-col items-center'>
|
||||
<button className='relative w-14 h-14 flex items-center overflow-hidden justify-center text-green-800 dark:text-green-400 transform scale-125 hover:scale-150'>
|
||||
<Image
|
||||
src='/images/data/guild-default.png'
|
||||
alt='logo'
|
||||
width={56}
|
||||
height={56}
|
||||
className='w-14 h-14 rounded-full'
|
||||
/>
|
||||
<input
|
||||
name='icon'
|
||||
id='icon'
|
||||
type='file'
|
||||
className='absolute w-22 h-20 -top-8 -left-8 opacity-0 cursor-pointer'
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Input type='text' placeholder='Name' name='name' label='Name' />
|
||||
|
||||
<div className='flex flex-col'>
|
||||
<div className='flex justify-between mt-6 mb-2'>
|
||||
<label className='pl-1' htmlFor='description'>
|
||||
Description
|
||||
</label>
|
||||
</div>
|
||||
<div className='mt-0 relative'>
|
||||
<TextareaAutosize
|
||||
className='p-3 rounded-lg bg-[#f1f1f1] text-[#2a2a2a] caret-green-600 font-paragraph w-full focus:border focus:outline-none resize-none focus:shadow-green'
|
||||
placeholder='Description...'
|
||||
id='description'
|
||||
name='description'
|
||||
wrap='soft'
|
||||
></TextareaAutosize>
|
||||
<FormState state='idle' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className='w-full mt-6' type='submit'>
|
||||
Create
|
||||
</Button>
|
||||
</Form>
|
||||
</Main>
|
||||
</Application>
|
||||
</AuthenticationProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export const getServerSideProps = authenticationFromServerSide({
|
||||
shouldBeAuthenticated: true
|
||||
})
|
||||
|
||||
export default CreateGuild
|
||||
61
pages/application/guilds/join.tsx
Normal file
61
pages/application/guilds/join.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
import Image from 'next/image'
|
||||
|
||||
import { Head } from 'components/Head'
|
||||
import { Application } from 'components/Application'
|
||||
import {
|
||||
authenticationFromServerSide,
|
||||
AuthenticationProvider,
|
||||
PagePropsWithAuthentication
|
||||
} from 'utils/authentication'
|
||||
|
||||
const JoinGuildPage: React.FC<PagePropsWithAuthentication> = (props) => {
|
||||
return (
|
||||
<AuthenticationProvider authentication={props.authentication}>
|
||||
<Head title='Thream | Application' />
|
||||
<Application path='/application/guilds/join'>
|
||||
<input
|
||||
className='w-10/12 sm:w-8/12 md:w-6/12 lg:w-5/12 bg-white dark:bg-[#3B3B3B] border-gray-500 dark:border-gray-700 p-3 my-6 mt-16 mx-auto rounded-md border'
|
||||
type='search'
|
||||
name='search_guild'
|
||||
placeholder='🔎 Search...'
|
||||
/>
|
||||
<div className='w-full flex items-center justify-center p-12'>
|
||||
<div className='max-w-[1600px] grid grid-cols-1 xl:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-8'>
|
||||
{new Array(100).fill(null).map((_, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className='max-w-sm flex flex-col items-center justify-center border-gray-500 dark:border-gray-700 p-4 cursor-pointer rounded shadow-lg border transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-none'
|
||||
>
|
||||
<Image
|
||||
src='/images/icons/Thream.png'
|
||||
alt='logo'
|
||||
width={80}
|
||||
height={80}
|
||||
/>
|
||||
<div className='m-2 text-center mt-3'>
|
||||
<h3 className='font-bold text-xl mb-2'>Guild</h3>
|
||||
<p className='text-base w-11/12 mx-auto'>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
Voluptatibus quia, nulla! Maiores et perferendis eaque,
|
||||
exercitationem praesentium nihil.
|
||||
</p>
|
||||
</div>
|
||||
<p className='flex flex-col text-green-800 dark:text-green-400 mt-4'>
|
||||
54 members
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Application>
|
||||
</AuthenticationProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export const getServerSideProps = authenticationFromServerSide({
|
||||
shouldBeAuthenticated: true
|
||||
})
|
||||
|
||||
export default JoinGuildPage
|
||||
25
pages/application/index.tsx
Normal file
25
pages/application/index.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { Head } from 'components/Head'
|
||||
import { Application } from 'components/Application'
|
||||
import { PopupGuild } from 'components/Application/PopupGuild/PopupGuild.stories'
|
||||
import {
|
||||
authenticationFromServerSide,
|
||||
AuthenticationProvider,
|
||||
PagePropsWithAuthentication
|
||||
} from 'utils/authentication'
|
||||
|
||||
const ApplicationPage: React.FC<PagePropsWithAuthentication> = (props) => {
|
||||
return (
|
||||
<AuthenticationProvider authentication={props.authentication}>
|
||||
<Head title='Thream | Application' />
|
||||
<Application path='/application'>
|
||||
<PopupGuild />
|
||||
</Application>
|
||||
</AuthenticationProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export const getServerSideProps = authenticationFromServerSide({
|
||||
shouldBeAuthenticated: true
|
||||
})
|
||||
|
||||
export default ApplicationPage
|
||||
26
pages/application/users/[userId].tsx
Normal file
26
pages/application/users/[userId].tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { Head } from 'components/Head'
|
||||
import { Application } from 'components/Application'
|
||||
import {
|
||||
authenticationFromServerSide,
|
||||
AuthenticationProvider,
|
||||
PagePropsWithAuthentication
|
||||
} from 'utils/authentication'
|
||||
|
||||
import { UserProfile } from 'components/UserProfile'
|
||||
|
||||
const UserProfilePage: React.FC<PagePropsWithAuthentication> = (props) => {
|
||||
return (
|
||||
<AuthenticationProvider authentication={props.authentication}>
|
||||
<Head title='Thream | Settings' />
|
||||
<Application path='/application/users/[userId]'>
|
||||
<UserProfile user={props.authentication.user} />
|
||||
</Application>
|
||||
</AuthenticationProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export const getServerSideProps = authenticationFromServerSide({
|
||||
shouldBeAuthenticated: true
|
||||
})
|
||||
|
||||
export default UserProfilePage
|
||||
Reference in New Issue
Block a user