Merge pull request #16 from harsohailB/develop

Develop

README.md

@@ -17,6 +17,12 @@
   </p>
 </p>
 
+## Usage
+
+<p align="center">
+  <img src="./example/src/assets/images/usage.gif" alt="usage" width="75%"/>
+</p>
+
 ## Installation
 
 `npm install ticker-symbol-search`
@@ -84,7 +90,7 @@ where,
 
 ### Symbol Data Fetched
 
-Through callback or hook
+#### Stock Data Example
 
 ```json
 {
@@ -98,6 +104,21 @@ Through callback or hook
 }
 ```
 
+### Types
+
+```javascript
+import {
+  StockSymbol,
+  FuturesSymbol,
+  ForexSymbol,
+  CFDSymbol,
+  CryptoSymbol,
+  IndexSymbol,
+  EconomicSymbol,
+  SymbolData, // union type of all symbols
+} from "ticker-symbol-search";
+```
+
 ## Development
 
 To develop this package you need to install its dependencies and the dependencies of the example to test your changes

package.json

@@ -19,6 +19,17 @@
     "type": "git",
     "url": "https://github.com/harsohailB/ticker-symbol-search"
   },
+  "keywords": [
+    "react",
+    "typescript",
+    "library",
+    "stocks",
+    "tickers",
+    "fintech",
+    "crypto",
+    "finance",
+    "search"
+  ],
   "bugs": "https://github.com/harsohailB/ticker-symbol-search/issues",
   "dependencies": {
     "@material-ui/core": "^4.11.3",

src/actions/symbols.ts

@@ -5,20 +5,16 @@ import axios from "axios";
 import { MarketTypes } from "../types/markets";
 
 export const getSymbols = async (queryParams: SymbolQueryParams) => {
-  const endpointURL: string = `${config.proxyEndpoint}/${config.endpoint}/${Routes.SYMBOL_SEARCH}/`;
+  const targetParams: string = `?type=${
+    queryParams.type === MarketTypes.ALL ? "" : queryParams.type.toLowerCase()
+  }&text=${queryParams.text}&hl=${
+    queryParams.hl
+  }&exchange=&lang=en&domain=production`;
 
-  const response = await axios.get(endpointURL, {
-    params: {
-      text: queryParams.text,
-      hl: queryParams.hl,
-      exchange: "",
-      type:
-        queryParams.type === MarketTypes.ALL
-          ? ""
-          : queryParams.type.toLowerCase(),
-      lang: "en",
-      domain: "production",
-    },
+  const symbolsEndpoint: string = `${config.endpoint}/${Routes.SYMBOL_SEARCH}`;
+
+  const response = await axios.get(config.proxyEndpoint, {
+    params: { url: symbolsEndpoint + targetParams },
   });
 
   if (response.status !== 200) {

src/config.ts

@@ -2,7 +2,7 @@ import { APIConfiguration } from "./types/config";
 
 const protocol: string = "https";
 const baseUrl: string = "symbol-search.tradingview.com";
-const proxy: string = "thingproxy.freeboard.io/fetch";
+const proxy: string = "api.allorigins.win/raw";
 
 export const config: APIConfiguration = {
   protocol,

src/container/DraggableWrapper.tsx

@@ -37,7 +37,7 @@ const DraggableWrapper = (props: { theme?: Theme; children: JSX.Element }) => {
     <ThemeProvider
       theme={props.theme ? { ...defaultTheme, ...props.theme } : defaultTheme}
     >
-      <Draggable disabled={isMobile} bounds="parent">
+      <Draggable disabled={isMobile}>
         <Wrapper>{props.children}</Wrapper>
       </Draggable>
     </ThemeProvider>

src/index.ts

@@ -1,2 +1,4 @@
 export { TickerSymbolSearch } from "./container/TickerSymbolSearch";
 export { useSearchSymbols } from "./hooks/useSearchSymbols";
+export * from "./types/symbol";
+export * from "./types/theme";

src/types/symbol.ts

@@ -1,10 +1,49 @@
-export interface SymbolData {
+export interface Symbol {
   symbol: string;
   description: string;
   type: string;
   exchange: string;
   provider_id: string;
-  typespecs?: string[];
-  country?: string;
-  prefix?: string;
 }
+
+export interface Contract {
+  symbol: string;
+  description: string;
+}
+
+export interface StockSymbol extends Symbol {
+  typespecs: string[];
+  country: string;
+}
+
+export interface FuturesSymbol extends Symbol {
+  country: string;
+  contracts: Contract[];
+}
+
+export interface ForexSymbol extends Symbol {
+  prefix: string;
+}
+
+export interface CFDSymbol extends Symbol {
+  country: string;
+}
+
+export interface CryptoSymbol extends Symbol {}
+
+export interface IndexSymbol extends Symbol {
+  country: string;
+}
+
+export interface EconomicSymbol extends Symbol {
+  params: string[];
+}
+
+export type SymbolData =
+  | StockSymbol
+  | FuturesSymbol
+  | ForexSymbol
+  | CFDSymbol
+  | CryptoSymbol
+  | IndexSymbol
+  | EconomicSymbol;