<commit_before>import React, { useState } from "react";

import useInterval from "../hooks/useInterval";

import Clock from "./Clock";
import * as dots from "./dots";

const dotNames = Object.keys(dots);

const App = () => {
  const [time, setTime] = useState(new Date());
  const [dotIndex, setDotIndex] = useState(0);

  useInterval(() => {
    setTime(new Date());
  }, 1000);

  return (
    <div onClick={() => setDotIndex(() => (dotIndex + 1) % dotNames.length)}>
      <Clock time={time} Shape={dots[dotNames[dotIndex]]} />
    </div><commit_msg>Created a popup to notify user of clickability<commit_after>import React, { useState, useReducer, useEffect } from "react";

import useInterval from "../hooks/useInterval";

import Clock from "./Clock";
import * as dots from "./dots";

const dotNames = Object.keys(dots);

function reducer(state, action) {
  switch (action.type) {
    case "changeDot":
      return {
        dotIndex: (state.dotIndex + 1) % dotNames.length,
        popupVisibility: false,
        popupTimer: false
      };
    case "showPopup":
      return { ...state, popupVisibility: true };
    default:
      throw new Error(`${action.type} is not a known action type`);
  }
}

const App = () => {
  const [time, setTime] = useState(new Date());
  const [state, dispatch] = useReducer(reducer, {
    dotIndex: 0,
    popupVisibility: false,
    popupTimer: true
  });

  useInterval(() => {
    setTime(new Date());
  }, 1000);

  useEffect(() => {
    if (state.popupTimer) {
      setTimeout(() => dispatch({ type: "showPopup" }), 3000);
    }
  }, [state.popupTimer]);

  return (
    <div
      style={{ height: "100%" }}
      onClick={() => dispatch({ type: "changeDot" })}
    >
      <Clock time={time} Shape={dots[dotNames[state.dotIndex]]} />
      {state.popupVisibility && (
        <div
          style={{
            position: "absolute",
            left: "50px",
            top: "50px",
            backgroundColor: "black",
            color: "white",
            opacity: 0.3,
            padding: "5px",
            fontSize: "24px",
            userSelect: "none"
          }}
        >
          Click Anywhere!
        </div>
      )}
    </div>
{'fraction_non_alphanumeric': 0.16431497496586253, 'fraction_numerical': 0.012744651797906235, 'mean_word_length': 2.494435612082671, 'pattern_counts': {'":': 2, '<': 11, '<?xml version=': 0, '>': 20, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5248151', 'n_tokens_mistral': 699, 'n_tokens_neox': 673, 'n_words': 175}