KathreftisAI · Saif-Ali-Kamal · Apr 6, 2021 · Apr 13, 2021 · Apr 13, 2021
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "react-challenge",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@craco/craco": "^6.1.1",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^12.8.3",
+    "antd": "^4.15.0",
+    "axios": "^0.21.1",
+    "craco-less": "^1.17.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.3",
+    "react-scripts": "4.0.3",
+    "redux": "^4.0.5",
+    "web-vitals": "^1.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "redux-devtools": "^3.7.0"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Marketplace watch</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,2 @@
+
+@import '~antd/dist/antd.css';
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,12 @@
+import './App.css';
+import MainPage from './page/main-page/mainPage';
+
+function App() {
+  return (
+    <div className="App">
+      <MainPage />
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { Select, Typography } from 'antd';
+import './header.css'
+
+const Header = ({ handleLanguageChange, language }) => {
+
+  const changeLanguage = (option) => {
+    handleLanguageChange(option);
+  }
+
+  return(
+    <header className='header'>
+      <Typography.Title level={1} style={{ fontSize: '24px' }}>MARKETPLACE WATCH</Typography.Title>
+      <Select 
+        value={language} 
+        onChange={changeLanguage} 
+        placeholder='Select Language'>
+        <Select.Option value='EN-US'>EN-US</Select.Option>
+        <Select.Option value='DE-DE'>DE-DE</Select.Option>
+        <Select.Option value='FR-FR'>FR-FR</Select.Option>
+        <Select.Option value='PL-PL'>PL-PL</Select.Option>
+        <Select.Option value='ES-ES'>ES-ES</Select.Option>
+        <Select.Option value='PT-BR'>PT-BR</Select.Option>
+        <Select.Option value='ZH-CN'>ZH-CN</Select.Option>
+        <Select.Option value='KO-KR'>KO-KR</Select.Option>
+      </Select>
+    </header>
+
+  );
+}
+
+export default Header;
diff --git a/src/components/header/header.css b/src/components/header/header.css
@@ -0,0 +1,12 @@
+.header{
+  background: #D9D9D9;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 32px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 64px;
+}
diff --git a/src/components/main-content/MainContent.jsx b/src/components/main-content/MainContent.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Row, Col, Typography, Card, Space, Divider } from 'antd';
+import './main-content.css'
+
+const MainContent = ({ language, itemName, tier, enhancement, quality, itemObj, price }) => {
+
+  return(
+    <section className='main-content'>
+      <Space direction='horizontal' align='center'>
+        <img src={itemObj && itemObj.UniqueName ? `https://render.albiononline.com/v1/item/${itemObj.UniqueName}.png?quality=${quality}` : ''} />
+        <Space direction='vertical'>
+          <Space direction='horizontal' size='middle' align='center'>
+            <Typography.Title level={2} style={{ fontSize: '21px' }}>{itemObj && itemObj.LocalizedNames ? itemObj.LocalizedNames[language] : ''}</Typography.Title>
+            <Typography.Text>{tier}</Typography.Text>
+          </Space>
+          <Typography.Paragraph>{itemObj && itemObj.LocalizedDescriptions ? itemObj.LocalizedDescriptions[language] : ''}</Typography.Paragraph>
+        </Space>
+      </Space>
+      <Row style={{ marginTop: '48px' }}>
+        <Col lg={{ span: 11, offset: 0 }}>
+          <Card 
+            title='Latest Sell Price' 
+            className='main-content-card'
+            bodyStyle={{ padding: '72px 32px' }}>
+            <Space direction='horizontal' className='card-detail'>
+              <Space direction='horizontal' size='large'>
+                <Typography.Text>Location</Typography.Text>
+              </Space>
+              <Space direction='horizontal' size='large'>
+                <Typography.Text>Price</Typography.Text>
+              </Space>
+            </Space>
+            <Divider className='card-divider' />
+            {price ? price.map(p =>{
+              return (
+                <Space className='card-detail'>
+                  <Typography.Text>{p.city}</Typography.Text>
+                  <Typography.Text>{p.sell_price_max}</Typography.Text>
+                </Space>);
+            }): ''}
+          </Card>
+        </Col>
+        <Col lg={{ span: 11, offset: 2 }}>
+          <Card 
+            title='Latest Buy Price' 
+            className='main-content-card'
+            bodyStyle={{ padding: '72px 32px' }}>
+            <Space direction='horizontal' className='card-detail'>
+              <Space direction='horizontal' size='large'>
+                <Typography.Text>Location</Typography.Text>
+              </Space>
+              <Space direction='horizontal' size='large'>
+                <Typography.Text>Price</Typography.Text>
+              </Space>
+            </Space>
+            <Divider className='card-divider' />
+            {price ? price.map(p =>{
+              return (
+                <Space className='card-detail'>
+                  <Typography.Text>{p.city}</Typography.Text>
+                  <Typography.Text>{p.buy_price_max}</Typography.Text>
+                </Space>);
+            }): ''}
+          </Card>
+        </Col>
+      </Row>
+    </section>
+  );
+}
+
+export default MainContent;
diff --git a/src/components/main-content/main-content.css b/src/components/main-content/main-content.css
@@ -0,0 +1,23 @@
+.main-content{
+  padding: 48px;
+  position: fixed;
+  top: 64px;
+  left: 250px;
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
+}
+
+.main-content-card{
+  background: #D9D9D9;
+}
+
+.card-divider{
+  margin-top: 8px;
+  background: #333;
+}
+
+.card-detail{
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/src/components/sidebar/Sidebar.jsx b/src/components/sidebar/Sidebar.jsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { Select } from 'antd';
+import './sidebar.css';
+
+const Sidebar = ({ itemName, handleEnhancementChange, handleNameChange, handleQualityChange, handleTierChange }) => {
+
+  const changeItemName = (option) => {
+    handleNameChange(option);
+  }
+
+  const changeTier = (option) => {
+    handleTierChange(option);
+  }
+
+  const changeEnhancement = (option) => {
+    handleEnhancementChange(option);
+  }
+
+  const changeQuality = (option) => {
+    handleQualityChange(option);
+  }
+
+  return(
+    <section className='sidebar'>
+      <Select
+        className='sidebar-select'
+        placeholder='Select Item'
+        onChange={changeItemName}>
+        {itemName.map(item => {
+          return <Select.Option key={item} value={item}>{item}</Select.Option>
+        })}
+      </Select>
+      <Select 
+        className='sidebar-select'
+        placeholder='Select Tier'
+        onChange={changeTier}>
+        <Select.Option value='T1'>T1</Select.Option>
+        <Select.Option value='T2'>T2</Select.Option>
+        <Select.Option value='T3'>T3</Select.Option>
+        <Select.Option value='T4'>T4</Select.Option>
+        <Select.Option value='T5'>T5</Select.Option>
+        <Select.Option value='T6'>T6</Select.Option>
+        <Select.Option value='T7'>T7</Select.Option>
+        <Select.Option value='T8'>T8</Select.Option>
+      </Select>
+      <Select
+        className='sidebar-select' 
+        placeholder='Select Enhancement'
+        onChange={changeEnhancement}>
+        <Select.Option value={0}>0</Select.Option>
+        <Select.Option value={1}>1</Select.Option>
+        <Select.Option value={2}>2</Select.Option>
+        <Select.Option value={3}>3</Select.Option>
+      </Select>
+      <Select
+        className='sidebar-select'
+        placeholder='Select Quality'
+        onChange={changeQuality}>
+        <Select.Option value={0}>Default</Select.Option>
+        <Select.Option value={1}>Normal</Select.Option>
+        <Select.Option value={2}>Good</Select.Option>
+        <Select.Option value={3}>Outstanding</Select.Option>
+        <Select.Option value={4}>Excellent</Select.Option>
+        <Select.Option value={5}>Masterpiece</Select.Option>
+      </Select>
+    </section>
+  );
+}
+
+export default Sidebar;
diff --git a/src/components/sidebar/sidebar.css b/src/components/sidebar/sidebar.css
@@ -0,0 +1,18 @@
+.sidebar{
+  background: #D9D9D9;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding: 32px;
+  position: fixed;
+  top: 64px;
+  bottom: 0;
+  left: 0;
+  width: 250px;
+}
+
+.sidebar-select{
+  margin-top: 24px;
+  width: 100%;
+}