[PART 5] Ref/categories to tags p5

client/src/components/global/Aggrements/index.tsx

@@ -5,8 +5,8 @@ import { Modal } from 'antd'
 import React from 'react'
 
 // Local files
-import { PrivacyPolicy } from './components/PrivacyPolicy'
-import { TermsAndConditions } from './components/TermsAndConditions'
+import { PrivacyPolicy } from './PrivacyPolicy'
+import { TermsAndConditions } from './TermsAndConditions'
 import { AggrementsProps } from '@/@types/components'
 
 export const Aggrements: React.FC<AggrementsProps> = (props): JSX.Element => (

client/src/components/global/SignModal/index.tsx

@@ -5,7 +5,7 @@ import { Modal, Typography, Divider } from 'antd'
 import React from 'react'
 
 // Local files
-import { LoginForm } from './components/LoginForm'
+import { LoginForm } from './LoginForm'
 import { SignModalProps } from '@/@types/components'
 import './style.less'
 

client/src/components/pages/[feed]/FeedHeader.tsx

@@ -26,19 +26,19 @@ import {
 import React, { useState } from 'react'
 import { format, parseISO } from 'date-fns'
 import { useRouter } from 'next/router'
+import stringToColor from 'string-to-color'
 
 // Local files
 import { getUserRateOfTitle, rateTitle, deleteTitle } from '@/services/api'
 import { SignModal } from '@/components/global/SignModal'
 import { API_URL } from '@/../config/constants'
 import { FeedHeaderProps } from '@/@types/pages'
-import '@/styles/components/[feed]/style.less'
+import './style.less'
 
 const FeedHeader: React.FC<FeedHeaderProps> = (props): JSX.Element => {
 	const {
 		titleData,
 		openUpdateModal,
-		categoryData,
 		accessToken,
 		averageTitleRate,
 		refreshTitleRate,
@@ -73,6 +73,18 @@ const FeedHeader: React.FC<FeedHeaderProps> = (props): JSX.Element => {
 			.catch(_error => setInitialRatingModalValue(0))
 	}
 
+	const handleTagsView = (tags: string[]) => {
+		return tags.map(tag => {
+			return (
+				<div key={tag} className={'custom-tag'} style={{ backgroundColor: stringToColor(tag) }}>
+					<Typography.Text style={{ color: (parseInt(stringToColor(tag).replace('#', ''), 16) > 0xffffff / 2) ? '#000' : '#fff', background: (parseInt(stringToColor(tag).replace('#', ''), 16) > 0xffffff / 2) ? '#fff' : '#000', opacity: 0.9 }}>
+						#{tag}
+					</Typography.Text>
+				</div>
+			)
+		})
+	}
+
 	const handleRateModalRender = (): JSX.Element => (
 		<Modal
 			transitionName='fade'
@@ -103,8 +115,8 @@ const FeedHeader: React.FC<FeedHeaderProps> = (props): JSX.Element => {
 				value: titleData.attributes.name
 			},
 			{
-				title: 'Category',
-				value: categoryData.attributes.name
+				title: 'Tags',
+				value: titleData.attributes.tags
 			},
 			{
 				title: 'Entry Count',
@@ -159,6 +171,7 @@ const FeedHeader: React.FC<FeedHeaderProps> = (props): JSX.Element => {
 									<Statistic
 										suffix={item.suffix}
 										title={item.title}
+										// @ts-ignore
 										value={item.value}
 									/>
 								</Card.Grid>
@@ -188,7 +201,7 @@ const FeedHeader: React.FC<FeedHeaderProps> = (props): JSX.Element => {
 			<PageHeader
 				title={
 					<>
-						<Tag color="#6ec49a">{categoryData.attributes.name}</Tag>
+						{handleTagsView(titleData.attributes.tags)}
 						<Row>
 							<Col style={{ margin: '0 5px -15px 0' }}>
 								<Typography.Title level={2} style={{ whiteSpace: 'pre-wrap' }}>

client/src/components/pages/create-feed/Step1/index.tsx

@@ -1,17 +1,17 @@
 // Antd dependencies
-import { Form, Button, Input } from 'antd'
+import { Form, Button, Input, Select, Typography } from 'antd'
 
 // Other dependencies
 import React, { useContext, useState } from 'react'
 
 // Local files
-import { CategorySelect } from '@/components/global/CategorySelect'
 import { PageHelmet } from '@/components/global/PageHelmet'
 import { Step1Props } from '@/@types/pages'
 import { ImageUpload } from '@/components/global/ImageUpload'
 import { ListOfSimilarFeeds } from '@/components/global/ListOfSimilarFeeds'
 import { StepContext } from '@/services/step.context.service'
-import '@/styles/components/StepForm/style.less'
+import { searchTagByName } from '@/services/api'
+import '../style.less'
 
 const formItemLayout = {
 	labelCol: {
@@ -24,25 +24,47 @@ const formItemLayout = {
 
 const Step1: React.FC<Step1Props> = (props): JSX.Element => {
 	const [form] = Form.useForm()
+	const [tagResult, setTagResult] = useState([])
+	const [noTagDataMessage, setNoTagDataMessage] = useState('Enter at least 3 characters to search')
 	const [titleValue, setTitleValue] = useState('')
-	const { createTitleFormData, readableCategoryValue } = useContext(StepContext)
-	const { setCreateTitleFormData, stepMovementTo, setReadableCategoryValue } = props
+	const { createTitleFormData } = useContext(StepContext)
+	const { setCreateTitleFormData, stepMovementTo, setReadableTagValue } = props
 
-	const handleFormValidation = (): void => {
-		if (!createTitleFormData.categoryId || !form.getFieldValue('title')) return
+	const handleFormValidation = async (): Promise<void> => {
+		await form.validateFields()
 		setCreateTitleFormData({
 			...createTitleFormData,
 			name: form.getFieldValue('title')
 		})
 		stepMovementTo('create-entry')
 	}
 
-	const handleReadableCategoryValue = (id: string | string[], title: React.ReactNode[]): void => {
+	const handleReadableTagValue = (tags: string[]): void => {
 		setCreateTitleFormData({
 			...createTitleFormData,
-			categoryId: id,
+			tags,
 		})
-		setReadableCategoryValue(title[0])
+		setReadableTagValue(tags)
+	}
+
+	const handleTagSearching = (value: string): void => {
+		if (value.length < 3) {
+			setTagResult([])
+			setNoTagDataMessage('Enter at least 3 characters to search')
+		}
+
+		else {
+			searchTagByName(value).then(({ data }) => {
+				const result = []
+
+				data.attributes.tags.map(tag => {
+					result.push(<Select.Option key={tag._id} value={tag.name}>{tag.name}</Select.Option>)
+				})
+
+				if (result.length !== 0) setTagResult(result)
+				else setTagResult([<Select.Option key={value} value={value}>{value}</Select.Option>])
+			})
+		}
 	}
 
 
@@ -73,7 +95,7 @@ const Step1: React.FC<Step1Props> = (props): JSX.Element => {
 			<Form
 				{...formItemLayout}
 				form={form}
-				initialValues={{ categoryId: createTitleFormData.categoryId, title: createTitleFormData.name }}
+				initialValues={{ tags: createTitleFormData.tags, title: createTitleFormData.name }}
 				layout="horizontal"
 				className={'stepForm'}
 			>
@@ -87,22 +109,30 @@ const Step1: React.FC<Step1Props> = (props): JSX.Element => {
 				</Form.Item>
 
 				<Form.Item
-					label="Category"
-					name="categoryId"
+					label="Tags"
+					name="tags"
 					rules={[
 						() => ({
 							validator() {
-								if (!createTitleFormData.categoryId) return Promise.reject('Please select category')
+								if (!createTitleFormData.tags || createTitleFormData.tags.length < 1) return Promise.reject('Please select atleast one tag')
 								return Promise.resolve()
 							}
 						})
 					]}
 				>
-					<CategorySelect
-						defaultValue={readableCategoryValue}
-						placeHolder="Electronic"
-						onSelect={handleReadableCategoryValue}
-					/>
+					<Select
+						mode="multiple"
+						style={{ width: '100%' }}
+						placeholder="please specify feed-related keywords"
+						onChange={handleReadableTagValue}
+						allowClear
+						onSearch={handleTagSearching}
+						notFoundContent={
+							<Typography.Text style={{ width: '100%' }}> {noTagDataMessage} </Typography.Text>
+						}
+					>
+						{tagResult}
+					</Select>
 				</Form.Item>
 
 				<Form.Item label="Title" name="title" rules={[{ required: true, message: 'Please fill the title input' }, { min: 3, message: 'Title length must be longer than 2 characters' }]}>

client/src/components/pages/create-feed/Step2/index.tsx

@@ -1,16 +1,17 @@
 // Antd dependencies
-import { Form, Button, Descriptions, Divider, Modal, Avatar, Rate } from 'antd'
+import { Form, Button, Descriptions, Divider, Modal, Avatar, Rate, Typography } from 'antd'
 import { ExclamationCircleOutlined, LoadingOutlined } from '@ant-design/icons'
 import TextArea from 'antd/lib/input/TextArea'
 
 // Other dependencies
 import React, { useContext, useState } from 'react'
+import stringToColor from 'string-to-color'
 
 // Local files
 import { PageHelmet } from '@/components/global/PageHelmet'
 import { StepContext } from '@/services/step.context.service'
 import { Step2Props } from '@/@types/pages'
-import '@/styles/components/StepForm/style.less'
+import '../style.less'
 
 const formItemLayout = {
 	labelCol: {
@@ -23,7 +24,7 @@ const formItemLayout = {
 
 const Step2 = (props: Step2Props): JSX.Element => {
 	const [form] = Form.useForm()
-	const { createTitleFormData, readableCategoryValue, firstEntryForm, titleRate } = useContext(StepContext)
+	const { createTitleFormData, readableTagValue, firstEntryForm, titleRate } = useContext(StepContext)
 	const { stepMovementTo, setFirstEntryForm, setIsRequestReady, setTitleRate } = props
 	const [isRequestStarted, setIsRequestStarted] = useState(false)
 
@@ -79,8 +80,16 @@ const Step2 = (props: Step2Props): JSX.Element => {
 							alt="Title Image"
 						/>
 					</Descriptions.Item>
-					<Descriptions.Item label="Category">
-						{ readableCategoryValue }
+					<Descriptions.Item label="Tags">
+						{readableTagValue.map(tag => {
+							return (
+								<div key={tag} className={'custom-tag'} style={{ backgroundColor: stringToColor(tag) }}>
+									<Typography.Text style={{ color: (parseInt(stringToColor(tag).replace('#', ''), 16) > 0xffffff / 2) ? '#000' : '#fff', background: (parseInt(stringToColor(tag).replace('#', ''), 16) > 0xffffff / 2) ? '#fff' : '#000', opacity: 0.9 }}>
+										#{tag}
+									</Typography.Text>
+								</div>
+							)
+						})}
 					</Descriptions.Item>
 					<Descriptions.Item label="Title">
 						{ createTitleFormData.name }

client/src/components/pages/create-feed/Step3/index.tsx

@@ -1,28 +1,37 @@
 // Antd dependencies
-import { Button, Result, Descriptions } from 'antd'
+import { Button, Result, Descriptions, Typography } from 'antd'
 
 // Other dependencies
 import React, { useContext } from 'react'
 import { useRouter } from 'next/router'
+import stringToColor from 'string-to-color'
 
 // Local files
 import { PageHelmet } from '@/components/global/PageHelmet'
 import { StepContext } from '@/services/step.context.service'
 import { Step3Props } from '@/@types/pages'
-import '@/styles/components/StepForm/style.less'
+import '../style.less'
 
 const Step3 = ({ titleSlugForRouting, feedCreatedSuccessfully }: Step3Props): JSX.Element => {
 	const router = useRouter()
-	const { createTitleFormData, readableCategoryValue, firstEntryForm } = useContext(StepContext)
+	const { createTitleFormData, readableTagValue, firstEntryForm } = useContext(StepContext)
 
 	const onFinish = () => router.push('/')
 	const handleOnPostRoute = () => router.push('/[feed]', `/${titleSlugForRouting}`)
 
 	const information = (
 		<div className={'information'}>
 			<Descriptions column={1}>
-				<Descriptions.Item label="Category">
-					{ readableCategoryValue }
+				<Descriptions.Item label="Tags">
+					{readableTagValue.map(tag => {
+						return (
+							<div key={tag} className={'custom-tag'} style={{ backgroundColor: stringToColor(tag) }}>
+								<Typography.Text style={{ color: (parseInt(stringToColor(tag).replace('#', ''), 16) > 0xffffff / 2) ? '#000' : '#fff', background: (parseInt(stringToColor(tag).replace('#', ''), 16) > 0xffffff / 2) ? '#fff' : '#000', opacity: 0.9 }}>
+									#{tag}
+								</Typography.Text>
+							</div>
+						)
+					})}
 				</Descriptions.Item>
 				<Descriptions.Item label="Title">
 					{ createTitleFormData.name }

client/src/components/pages/feeds/AdditionalBlock/index.tsx

@@ -61,7 +61,7 @@ export const AdditionalBlock = (): JSX.Element => {
 				<Typography.Text>
 					Feednext © 2020. All rights reserved
 				</Typography.Text>
-				<Divider style={{ marginBottom: -15, marginTop: 3 }} orientation="right">
+				<Divider style={{ marginBottom: -15, marginTop: 3, color: 'red' }} plain orientation="right">
 					<Typography.Text style={{ fontSize: 13, color: '#6ec49a' }}>
 						v{packageJson.version}
 					</Typography.Text>