Skip to content

Instantly share code, notes, and snippets.

@mayyyc
mayyyc / Map.tsx
Last active June 28, 2020 22:48
Render world map in React with D3 and TopoJSON
import React, { useState, useEffect } from "react";
import { makeStyles, createStyles } from "@material-ui/styles";
import { IBaseTheme } from "javascript/components/ui/baseTheme";
import { geoMercator, geoPath } from "d3-geo";
import { feature } from "topojson-client";
import { IRelationshipOverviewFragment } from "javascript/__generated__/my_network_gql";
import { nexlAxios } from "javascript/common/clients";
import { blue } from "@material-ui/core/colors";
const useStyles = makeStyles((theme: IBaseTheme) =>
@mayyyc
mayyyc / Map.tsx
Created June 28, 2020 23:49
Map that highlights the countries with result in React with D3 and TopoJSON
import React, { useState, useEffect } from "react";
import { makeStyles, createStyles } from "@material-ui/styles";
import { IBaseTheme } from "javascript/components/ui/baseTheme";
import { geoMercator, geoPath } from "d3-geo";
import { feature } from "topojson-client";
import { IRelationshipOverviewFragment } from "javascript/__generated__/my_network_gql";
import { nexlAxios } from "javascript/common/clients";
import { blue } from "@material-ui/core/colors";
import groupBy from "lodash/groupBy";
import { useTheme } from "@material-ui/core";
@mayyyc
mayyyc / Map.tsx
Created June 29, 2020 00:45
Interactive world map result view in React with D3 and TopoJSON
import React, { useState, useEffect } from "react";
import { makeStyles, createStyles } from "@material-ui/styles";
import { IBaseTheme } from "javascript/components/ui/baseTheme";
import { geoMercator, geoPath } from "d3-geo";
import { feature } from "topojson-client";
import { IRelationshipOverviewFragment } from "javascript/__generated__/my_network_gql";
import { nexlAxios } from "javascript/common/clients";
import { blue } from "@material-ui/core/colors";
import groupBy from "lodash/groupBy";
import { useTheme, Table, Typography, IconButton } from "@material-ui/core";
import React, { createContext, useContext, useState, useEffect } from "react";
import axios, { AxiosInstance } from "axios";
import AsyncStorage from "@react-native-community/async-storage";
import {
IAuthContext,
IAuthRequest,
STORAGE_BEARER_TOKEN,
UNINITIALISED,
USER_EMAIL,
} from "./IAuthContext";
import React, { createContext, useContext } from "react";
import { ApolloClient, InMemoryCache } from "apollo-boost";
import { ErrorLink } from "apollo-link-error";
import messengerIntrospectionResult from "../__generated__/messenger_frag_matcher";
import { IntrospectionFragmentMatcher, InMemoryCache } from "apollo-cache-inmemory";
import { useAuthContext } from "./AuthContext";
const messengerFragmentMatcher = new IntrospectionFragmentMatcher({
introspectionQueryResultData: messengerIntrospectionResult,
});
import React from "react";
import { Provider as PaperProvider } from "react-native-paper";
import { baseTheme } from "./constants/baseTheme";
import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";
import { MainApp } from "./components/navigation/app/MainApp";
import { AuthApp } from "./components/navigation/app/AuthApp";
import { AuthProvider, AuthConsumer } from "./components/common/AuthContext";
import {
ApolloClientProvider,
@mayyyc
mayyyc / SearchParamsContaxt.tsx
Created August 14, 2020 04:30
SearchParamsContext.tsx
import React, { createContext, useState, useEffect, useContext } from "react";
import { useLocation, useHistory } from "react-router-dom";
import queryString from "query-string";
import { IFadingStatus } from "javascript/__generated__/my_network_gql";
const UNINITIALISED = (): void => {
throw `function uninitialised`;
};
const INITIAL_CONTEXT = {
page: 0,
import * as d3 from "d3";
export function drawChart(
engagement: {
month:string;
interactionCount: number;
}[],
) {
const interactionCeiling = 60;
const minDate = new Date(
@mayyyc
mayyyc / index.js
Created April 18, 2021 01:13
a cli tool to create p5 project boilerplate
#!/usr/bin/env node
const fs = require("fs");
const path = require("path");
const dir = process.argv[2];
if (!dir)
return printError(
"please enter project name, run: create-p5-boilerplate [project-name]"
@mayyyc
mayyyc / manifest.xml
Created July 23, 2021 23:16
An Outlook add-in manifest configurations
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0" xsi:type="MailApp">
<Id>d8c422e0-ef58-409e-8486-29c81c351890</Id>
<Version>1.0.0.0</Version>
<ProviderName>NEXL 360 Local</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue="NEXL 360 (local)"/>
<Description DefaultValue="NEXL 360 for Outlook"/>
<IconUrl DefaultValue="https://localhost:3000/android-icon-64x64.png"/>
<HighResolutionIconUrl DefaultValue="https://localhost:3000/apple-icon-128x128.png"/>